Get help Color blind mode Low vision mode

Author Review

This template shows how to present author information in web pages like a news article.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.


Open in new window 
<!DOCTYPE html>
<html class="duet-sticky-footer" lang="fi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>LähiTapiola</title>
  <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.51/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.45/lib/duet.min.css" integrity="sha384-UoMJnpXiN8f7fKVnTzfKfyi7LzQlApQ+WTS9O3PXlYr6CO9yzou4glfsHV747f3v" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.59/lib/tokens.custom-properties.css" integrity="sha384-AexjbYNj18dJLZR54wNVU44b/akdDc+tpbLIWhAnzjMAbwFSli2DHpSP+7NCK+Xw" crossorigin="anonymous" />
  <script type="module" src="https://cdn.duetds.com/api/components/8.7.1/lib/duet/duet.esm.js" integrity="sha384-c3hLghWHTPntUxndMlK4myD7d59stA2U0EvBp2rPb3ibtacAwh56geBpq6z7nXLn" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.7.1/lib/duet/duet.js" integrity="sha384-H7RH4Ssj/LmElXa1VCHFSIjvtCSoLXMiPXG/KQZTS9EvYujTo7tWaj0V6/GGkY16" crossorigin="anonymous"></script>
</head>
<body>
<duet-header language="fi" skip-to-id="#content" contact="Ota yhteyttä" current-href="/vakuutukset/"></duet-header>
<duet-layout center id="content">
  <div slot="main">
    <duet-heading level="h1">Hello world</duet-heading>
    <duet-paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Pellentesque ullamcorper et nisl ut laoreet. Phasellus ipsum ante, vehicula id pulvinar nec,
      commodo sit amet justo. Donec tincidunt libero tempor metus sodales, euismod tempus
      ante sollicitudin. Nam sit amet dolor sed sapien efficitur viverra.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat sem,
      sit amet vestibulum lectus. Donec id molestie nulla. In maximus sed metus at ultrices.
      Sed mauris urna, fermentum pulvinar dictum sed, posuere et lorem. Sed eu pulvinar mi, at
      fringilla est. Maecenas eget tellus at lorem accumsan tincidunt. Sed semper molestie neque
      in consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
      ac turpis egestas.
    </duet-paragraph>
    <duet-divider></duet-divider>
    <div style="
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;
      max-width: 320px;
      margin: 0 auto;
    ">
      <duet-shaped-image
        src="https://www.duetds.com/assets/img/example-brand1.png"
        rotation="7"
        style="width: 256px; height: 256px;"
        aria-label="Kuvassa artikkelin kirjoittaja Etunimi Sukunimi"
      ></duet-shaped-image>
      <duet-heading level="h4" margin="none">Etunimi Sukunimi</duet-heading>
      <duet-paragraph weight="semi-bold">Asiakkuusjohtaja, Lähitapiola</duet-paragraph>
      <duet-paragraph size="small">
        Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Nulla ut nam odio ac fusce.
      </duet-paragraph>
    </div>
  </div>
</duet-layout>
<duet-footer variation="simple"></duet-footer>
</body>
</html>

Integration

To install this template’s dependencies into your project, run:

npm install @duetds/components
npm install @duetds/css
npm install @duetds/fonts

For further guidelines, please see each package’s documentation.


Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a template, please head over to the Support page for more guidelines and help.