Skip to main content
LocalTapiola Turva

Form Components ready

Please note that example templates load Duet from jsDelivr’s CDN. For production usage you should install the packages using NPM and host the different parts yourself.

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-bg-gradient" 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.jsdelivr.net/npm/@duetds/fonts@latest/lib/localtapiola.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/fonts@latest/lib/turva.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/css@latest/lib/duet.min.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/components@2.6.10/lib/duet/duet.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/components@2.6.10/lib/duet/duet.js"></script>
</head>
<body>
<duet-nav current-href="/viestit/" language="fi" region="Pääkaupunkiseutu" skip-to-id="#content" contact="Ota yhteyttä"></duet-nav>
<duet-layout nav-distance="with-links" sticky sticky-top="110" id="content">
  <duet-card padding="large">
    <form action="#">
      <duet-heading level="h1" visual-level="h2">Ota yhteyttä</duet-heading>
      <duet-paragraph>
        Lähetä meille viesti kun olet muuttamassa, haluat antaa palautetta tai pyytää yhteydenottoa. Jos olet jo asiakkaamme, asiasi hoituu parhaiten, kun kirjaudut verkkopalveluun.
      </duet-paragraph>
      <duet-spacer size="medium"></duet-spacer>
      <duet-grid>
        <duet-input label="Etunimi" placeholder="Matti" expand required></duet-input>
        <duet-input label="Sukunimi" placeholder="Meikäläinen" expand required></duet-input>
      </duet-grid>
      <duet-input label="Katuosoite" placeholder="Kadunnimi 1 A 2" tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the icon again." required expand></duet-input>
      <duet-select label="Kaupunki" value="valitse" expand></duet-select>
      <duet-range-slider label="Sijoitettava pääoma" value="3000" min="100" max="10000" step="100" unit=" €" expand></duet-range-slider>
      <duet-grid>
        <duet-input label="Postinumero" value="96100" expand disabled></duet-input>
        <duet-input label="Postitoimipaikka" value="Rovaniemi" expand disabled></duet-input>
      </duet-grid>
      <duet-label for="toggle">Hyväksyn ehdot</duet-label>
      <duet-toggle identifier="toggle" checked></duet-toggle>
      <duet-input label="Puhelinnumero" type="tel" placeholder="+358" required expand></duet-input>
      <duet-input label="Sähköposti" type="email" placeholder="nimi@email.com" required expand></duet-input>
      <duet-textarea label="Viesti asiakaspalveluun" placeholder="Kirjoita tähän" tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the icon again." expand></duet-textarea>
      <duet-divider></duet-divider>
      <duet-radio-group label="Yhteydenoton syy" direction="horizontal" value="one" name="group1">
        <duet-radio label="Tarvitsen apua" value="one"></duet-radio>
        <duet-radio label="Ongelma" value="two"></duet-radio>
        <duet-radio label="Kysymys" value="three"></duet-radio>
      </duet-radio-group>
      <duet-divider></duet-divider>
      <duet-label>Haluatko viestin myös sähköpostiisi?</duet-label>
      <duet-checkbox label="Kyllä" checked></duet-checkbox>
      <duet-spacer size="x-large"></duet-spacer>
      <duet-button variation="primary" submit>Lähetä viesti</duet-button>
      <duet-button>Keskeytä</duet-button>
    </form>
  </duet-card>
  <div slot="sidebar">
    <duet-card padding="large" heading="Sivupalsta">
      Sivupalstaa voidaan käyttää pääsisältöön liittyvän tiedon näyttämiseen tai vaihtoehtoisesti nostamaan esiin aiheeseen liittyvää muuta sisältöä.
    </duet-card>
  </div>
</duet-layout>
<duet-footer logo-href="#" language="fi"></duet-footer>
<script>
  var header = document.querySelector("duet-nav")
  var select = document.querySelector("duet-select")
  var footer = document.querySelector("duet-footer")

  header.items = [
    { label: "Etusivu", href: "/" },
    { label: "Vakuutukset", href: "/vakuutukset/" },
    { label: "Vahinkoasiat", href: "/vahinkoasiat/" },
    { label: "Säästöt ja sijoitukset", href: "/saastot-ja-sijoitukset/" },
    { label: "Laskut", href: "/laskut/", badge: true },
    { label: "Viestit", href: "/viestit/" }
  ]
  header.contactItems = [
    { label: "Viestit", href: "/viestit/" },
    { label: "Chat", href: "/chat/" },
    { label: "Yhteystiedot", href: "/yhteystiedot/" }
  ]
  header.languageItems = [
    { label: "Suomeksi", country: "fi", href: "/?lang=fi" },
    { label: "På Svenska", country: "sv", href: "/?lang=sv" },
    { label: "In English", country: "en", href: "/?lang=en" }
  ]
  header.session = {
    label: "Kirjaudu ulos",
    href: "/?logout",
    type: "logout"
  }
  header.user = {
    label: "Laura",
    href: "/?userId=1234"
  }

  header.addEventListener("duetChange", function(ev) {
    var event = ev.detail.originalEvent
    event.preventDefault()
  })

  select.items = [
    { label: "Valitse…", value: "valitse" },
    { label: "Helsinki", value: 1 },
    { label: "Tampere", value: 2 },
    { label: "Vantaa", value: 3 },
    { label: "Espoo", value: 4 }
  ]

  footer.items = [
    { label: "Hae korvausta", href: "#", icon: "navigation-make-claim" },
    { label: "Osta vakuutus", href: "#", icon: "action-buy-insurance" },
    { label: "Yhteystiedot", href: "#", icon: "form-tel" }
  ]
  footer.menu = [
    { label: "Turvallisuus ja käyttöehdot", href: "#" },
    { label: "Evästeet", href: "#" },
    { label: "Henkilötietojen käsittely", href: "#" },
  ]
</script>
</body>
</html>

Integration

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

npm install @duetds/components --save-dev
npm install @duetds/css --save-dev
npm install @duetds/fonts --save-dev

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

Troubleshooting

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