Skip to main content

Error and Success

This template shows how to build a simple responsive error view using Duet’s components. The same template can be used for success views as well by changing the illustration.

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 duet-sticky-footer" lang="fi">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-+eUULRb2TsI9BMg6C3v7JKC8sC5Zrwtxt60Y6j/f6e1J4L/iINszZh1X/DDyz1Xz" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-QNcOSzJTfVMWN/WqAtm5yev6PwVz+bBfSud0o8c/Dybn+c27Kb5bterSULzxCxKK" crossorigin="anonymous" />
<script type="module" src="" integrity="sha384-0wXJIcD/9zR943iDahCNkD5hmb60UqEERrG+P+AzWD0sRab9Hp8eF465ih9K7r4+" crossorigin="anonymous"></script>
<script nomodule src="" integrity="sha384-I+roClY+4BeY34jr982x3THYzrv+D2wyJ/cGT2mXqE/bzE1TIHD8nplbBChDYZ84" crossorigin="anonymous"></script>
<duet-header language="fi" skip-to-id="#content" contact="Ota yhteyttä" current-href="/vakuutukset/"></duet-header>
<duet-layout center id="content">
<div slot="main" class="duet-text-center">
<duet-card variation="plain" padding="x-small">
<img src=""
alt="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 on juuri nyt häiriö, yritäthän myöhemmin uudelleen.
Voit&nbsp;olla myös yhteydessä asiakaspalveluumme.
<duet-spacer size="x-small"></duet-spacer>
<duet-button fixed variation="primary" url="#" icon="navigation-arrow-left">
Palaa takaisin
<duet-footer variation="simple"></duet-footer>
// Save references to components we want to adjust below
var header = document.querySelector("duet-header")
var footer = document.querySelector("duet-footer")

// Set the header main navigation items
header.items = [
{ label: 'Etusivu', href: '#' },
{ label: 'Vakuutukset', href: '/vakuutukset/' },
{ label: 'Vahinkoasiat', href: '#' },
{ label: 'Säästöt ja sijoitukset', href: '#' },
{ label: 'Laskut', href: '#', badge: true },
{ label: 'Viestit', href: '#' }

// Set the contact menu items
header.contactItems = [
{ label: "Lähetä viesti", href: "/viestit/laheta" },
{ label: "Avaa chat", href: "/chat/" },
{ label: "Yhteystiedot", href: "/yhteystiedot/" }

// Set the language menu items
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" }

// Set label and href for session link
header.session = {
label: "Kirjaudu ulos",
href: "/?logout",
type: "logout"

// Set label and href for user profile link
header.user = {
label: "Laura",
href: "/?userId=1234"

// Listen for change events inside the header
header.addEventListener("duetChange", function(ev) {
var event = ev.detail.originalEvent
var data =
if (data.href !== "#content") {

// Set the help menu items in footer = [
{ label: 'Turvallisuus ja käyttöehdot', href: '#' },
{ label: 'Evästeet', href: '#' },
{ label: 'Henkilötietojen käsittely', href: '#' },


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.


Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:




Building Layouts


Using CLI Tools


Creating Custom Patterns


Server Side Rendering


Sharing Prototypes


Usage With Markdown


VS Code




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