Skip to main content
LocalTapiola Turva

Tabs 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="/vakuutukset/" language="fi" skip-to-id="#content" region="Pääkaupunkiseutu" contact="Ota yhteyttä"></duet-nav>
<duet-layout nav-distance="with-links" id="content">
  <duet-visually-hidden>
    <duet-heading level="h1">Vakuutukset</duet-heading>
  </duet-visually-hidden>
  <duet-tab-group>
    <duet-tab label="Yhteenveto" selected>
      <duet-card padding="large">
        <duet-heading level="h2">Yhteenveto</duet-heading>
        <duet-spacer></duet-spacer>
        <duet-definition-list variation="striped"></duet-definition-list>
      </duet-card>
    </duet-tab>
    <duet-tab label="Kotivakuutus">
      <duet-card padding="large">
        <duet-heading level="h2">Kotivakuutus</duet-heading>
        <duet-paragraph>Tab 2 content</duet-paragraph>
        <!-- the below div makes the card taller for example
             purposes, you can remove this. -->
        <div style="height:520px"></div>
      </duet-card>
    </duet-tab>
    <duet-tab label="Autovakuutus">
      <duet-card padding="large">
        <duet-heading level="h2">Autovakuutus</duet-heading>
        <duet-paragraph>Tab 3 content</duet-paragraph>
        <!-- the below div makes the card taller for example
             purposes, you can remove this. -->
        <div style="height:520px"></div>
      </duet-card>
    </duet-tab>
    <duet-tab label="Henkivakuutus">
      <duet-card padding="large">
        <duet-heading level="h2">Henkivakuutus</duet-heading>
        <duet-paragraph>Tab 4 content</duet-paragraph>
        <!-- the below div makes the card taller for example
             purposes, you can remove this. -->
        <div style="height:520px"></div>
      </duet-card>
    </duet-tab>
    <duet-tab label="Eläketurva">
      <duet-card padding="large">
        <duet-heading level="h2">Eläketurva</duet-heading>
        <duet-paragraph>Tab 5 content</duet-paragraph>
        <!-- the below div makes the card taller for example
             purposes, you can remove this. -->
        <div style="height:520px"></div>
      </duet-card>
    </duet-tab>
  </duet-tab-group>
</duet-layout>
<duet-footer logo-href="#" language="fi"></duet-footer>
<script>
  var header = document.querySelector("duet-nav")
  var list = document.querySelector("duet-definition-list")
  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()
  })

  list.items = [
    { label: "Kotivakuutus", value: "Tunnus: 2191167, voimassa 21.6.2019 asti" },
    { label: "Autovakuutus", value: "Tunnus: 4693062389, voimassa 21.6.2019 asti" },
    { label: "Henkivakuutus", value: "Tunnus: 83062, voimassa 21.6.2019 asti" },
    { label: "Eläketurva", value: "Tunnus: 99300, voimassa 21.6.2019 asti" },
    { label: "Vastuuvakuutus", value: "Tunnus: 2191167, voimassa 21.6.2019 asti" },
    { label: "Tapaturmavakuutus", value: "Tunnus: 4693062389, voimassa 21.6.2019 asti" },
    { label: "Eläinvakuutus", value: "Tunnus: 83062, voimassa 21.6.2019 asti" },
    { label: "Sairausvakuutus", value: "Tunnus: 99300, voimassa 21.6.2019 asti" },
    { label: "Venevakuutus", value: "Tunnus: 2191167, voimassa 21.6.2019 asti" },
    { label: "Metsävakuutus", value: "Tunnus: 4693062389, voimassa 21.6.2019 asti" }
  ]

  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.