Get help Color blind mode Low vision mode

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.


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-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

 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.