Surveys Ready
This template shows how to build different kind of surveys that are often needed to gather information about the experience customers are going through.
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.47/lib/duet.min.css" integrity="sha384-UoMJnpXiN8f7fKVnTzfKfyi7LzQlApQ+WTS9O3PXlYr6CO9yzou4glfsHV747f3v" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.61/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.3/lib/duet/duet.esm.js" integrity="sha384-W+bAckjmwa01nRBD0ol/f7xnJTQ14uXM899yjVthSe54gUJ0LTsVM0kaxXZwj8Yu" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.7.3/lib/duet/duet.js" integrity="sha384-0aVVr72EVrSf7CulIIfKWnbnvT48863P6RDFRlazIsrXeBRJXtDvASC3rzZsv5Kj" 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-spacer size="xxx-large"></duet-spacer>
<div style="max-width: 660px; text-align: center;">
<duet-heading level="h3">Feedback heading</duet-heading>
<duet-paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</duet-paragraph>
<duet-spacer></duet-spacer>
<div style="display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap;">
<duet-button variation='square' fixed margin="none">1</duet-button>
<duet-button variation='square' fixed margin="none">2</duet-button>
<duet-button variation='square' fixed margin="none">3</duet-button>
<duet-button variation='square' fixed margin="none">4</duet-button>
<duet-button variation='square' fixed margin="none">5</duet-button>
<duet-button variation='square' fixed margin="none">6</duet-button>
<duet-button variation='square' fixed margin="none">7</duet-button>
<duet-button variation='square' fixed negative margin="none">8</duet-button>
<duet-button variation='square' fixed margin="none">9</duet-button>
<duet-button variation='square' fixed margin="none">10</duet-button>
</div>
<duet-spacer></duet-spacer>
<div style="display: flex; justify-content: space-between;">
<duet-paragraph style="text-align: left;">
Info
</duet-paragraph>
<duet-paragraph style="text-align: right;">
Info
</duet-paragraph>
</div>
</div>
<duet-spacer size="xxx-large"></duet-spacer>
<div style="max-width: 660px; text-align: center;">
<duet-heading level="h3">Löysitkö etsimäsi</duet-heading>
<duet-paragraph margin="none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</duet-paragraph>
<duet-spacer size="large"></duet-spacer>
<div style="display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap;">
<duet-button variation="default" icon="expression-happy">Kyllä</duet-button>
<duet-button variation="default" icon="expression-unhappy" icon-right>En</duet-button>
</div>
</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.