Skip to main content
LocalTapiola Turva

Error View (with nav) 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="/" language="fi" region="Pääkaupunkiseutu" skip-to-id="#content" contact="Ota yhteyttä"></duet-nav>
<duet-layout center nav-distance="with-links" id="content">
  <img src="https://www.duetds.com/assets/img/illustrations/lt-error.png" alt="Virheilmoituksen kuvitus" style="max-width:358px;width:70%;height:auto;"/>
  <duet-spacer size="large"></duet-spacer>
  <duet-heading level="h1">Jokin meni pieleen, pahoittelemme</duet-heading>
  <duet-paragraph variation="intro">Palvelussamme olevan häiriön vuoksi kaikki toiminnallisuudet eivät juuri nyt ole käytössäsi. Yritä myöhemmin uudelleen tai ole yhteydessä asiakaspalveluumme.</duet-paragraph>
  <duet-spacer size="x-small"></duet-spacer>
  <duet-button fixed variation="primary" url="#" icon="navigation-arrow-left">Palaa takaisin</duet-button>
</duet-layout>
<script>
  var header = document.querySelector("duet-nav")

  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()
  })
</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.