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.
<!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.39/lib/duet.min.css" integrity="sha384-UoMJnpXiN8f7fKVnTzfKfyi7LzQlApQ+WTS9O3PXlYr6CO9yzou4glfsHV747f3v" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.53/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.6.5/lib/duet/duet.esm.js" integrity="sha384-zlmTmZHEuzIlFyNJfqgcVUedVNgYnJ81YbepzCQdiTWmCvXoYvP+p/cg0XunGeMY" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.6.5/lib/duet/duet.js" integrity="sha384-SwuOaY1MvhUwduj7yUiSLQCaRrdNCVJKVFHTSMTxyLK+8nicqQ7+apGj7th2g/oQ" 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>
<!DOCTYPE html>
<html class="duet-theme-turva duet-sticky-footer" lang="fi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Turva</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.51/lib/turva.css" integrity="sha384-hHdwZODJ+y2QoCpmMYq9dSnwexFN8FO9B9cVru7Y7iy2l3bXKpf/vNfPASXgfKWU" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.39/lib/duet.min.css" integrity="sha384-UoMJnpXiN8f7fKVnTzfKfyi7LzQlApQ+WTS9O3PXlYr6CO9yzou4glfsHV747f3v" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.53/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.6.5/lib/duet/duet.esm.js" integrity="sha384-zlmTmZHEuzIlFyNJfqgcVUedVNgYnJ81YbepzCQdiTWmCvXoYvP+p/cg0XunGeMY" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.6.5/lib/duet/duet.js" integrity="sha384-SwuOaY1MvhUwduj7yUiSLQCaRrdNCVJKVFHTSMTxyLK+8nicqQ7+apGj7th2g/oQ" 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
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a template, please head over to the Support page for more guidelines and help.