Skip to main content
LocalTapiola Turva

Hero Area (light) 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 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 language="fi" skip-to-id="#content"></duet-nav>
<duet-hero
  heading="Eläinvakuutus. Vaivattomasti. Vain muutamassa minuutissa."
  image="https://www.duetds.com/assets/img/illustrations/lt-pet-insurance.png"
  button-label="Aloita tästä"
  variation="light"
  button-url="#"
  icon="navigation-arrow-down"
  icon-right
  id="content"
  nav-distance="without-links">
</duet-hero>
<duet-layout sticky sticky-top="456" sticky-distance="without-links">
  <duet-card padding="large">
    <duet-heading level="h2">Pääpalsta</duet-heading>
    <duet-paragraph>LähiTapiola-ryhmä on keskinäiseen yhtiömuotoon perustuva, asiakkaidensa omistama yhtiöryhmä, joka palvelee monia eri asiakasryhmiä. <duet-link url="https://www.lahitapiola.fi/henkilo">LähiTapiolan tuotteet</duet-link> ja palvelut kattavat vahinko-, henki- ja eläkevakuuttamisen sekä sijoittamisen ja säästämisen palvelut. Olemme myös yritysten riskienhallinnan ja henkilöstön työhyvinvoinnin ammattilainen. Omistaja-asiakkaita meillä on lähes 1,6 miljoonaa.</duet-paragraph>
    <duet-paragraph>LähiTapiola on uudistumassa perinteisestä vakuutusyhtiöstä elämänturva&shy;yhtiöksi. <duet-link url="https://www.lahitapiola.fi/henkilo/edut/miksi-lahitapiola">Elämänturva</duet-link> merkitsee asiakkaillemme kokonaisvaltaista ja ennakoivaa palvelua terveyden, turvallisuuden ja talouden alueilla. LähiTapiolan visiona on tarjota suomalaisille turvallisempaa ja terveempää elämää. Elämänturva merkitsee asiakkaillemme kokonaisvaltaista ja ennakoivaa palvelua.</duet-paragraph>
    <duet-heading level="h3">Otsikko 3</duet-heading>
    <duet-paragraph>Lähivakuutuksen ja Tapiolan juuret ulottuvat 1700- ja 1800-luvuille. Vuonna 2012 yhtiöiden historia sai uuden käänteen, kun Lähivakuutus ja Tapiola ilmoittivat yhdistymisestään.</duet-paragraph>
    <duet-heading level="h4">Otsikko 4</duet-heading>
    <duet-paragraph>Lähivakuutuksen juuret ulottuvat vuoteen 1770, jolloin kuningas Adolf Fredrik sääti lain pitäjien paloapuyhdistysten perustamisesta.</duet-paragraph>
    <duet-heading level="h5">Otsikko 5</duet-heading>
    <duet-paragraph>Kunnallisasetuksessa säädettiin, että kuntakokous sai tehdä paloapua koskevat lopulliset ratkaisut. Vuonna 1908 annettiin ensimmäinen paloapuyhdistyksiä koskeva oma laki, jossa säädettiin jälleenvakuuttaminen pakolliseksi.</duet-paragraph>
    <duet-heading level="h6">Otsikko 6</duet-heading>
    <duet-paragraph>Tapiolan edeltäjäyhtiöistä Pohja perustettiin vuonna 1909 ja Aura vuonna 1917.</duet-paragraph>
  </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 footer = document.querySelector("duet-footer")

  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.addEventListener("duetChange", function(ev) {
    var event = ev.detail.originalEvent
    event.preventDefault()
  })

  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.