Skip to main content

Maintenance Ready

This template shows how to build a simple maintenance 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-wDs2jncW8Cx05wCmC63VPWf+LNs6zl5HoVGzkWKyrvLzkOkoly9PEA6YKluhz/01" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-7+5ZzVlpstuRULythk9AjF5A5RTVVm+QM/dzBlKwfAy7IknFG9yq5pMPypcvJHBD" crossorigin="anonymous" />
<script type="module" src="" integrity="sha384-eG4qKthuSEwQVkC5ibCytRvztDjTpxz9F1Vww4uQwXheghN2GJwtYpIIZvZJhDpl" crossorigin="anonymous"></script>
<script nomodule src="" integrity="sha384-EIBBbDpu70LtskytP53zG/25bD7QBqTBq3DoXpcxeBgLKXFrEtaVbnKiDswCBlYe" crossorigin="anonymous"></script>
<duet-layout center middle>
<div slot="main" class="duet-text-center">
<img src=""
alt="Kuvitus" style="max-width:358px;width:70%;height:auto;"/>

<duet-spacer size="large"></duet-spacer>
<duet-heading level="h1">Palvelussamme on juuri nyt huoltokatko</duet-heading>
<duet-paragraph variation="intro">
Kehitämme palveluita, pahoittelemme katkosta aiheutuvaa haittaa.
Olet&nbsp;tervetullut palveluun katkon päätyttyä.
<duet-spacer size="x-small"></duet-spacer>
<duet-button fixed variation="primary" url="">
Siirry etusivulle
<duet-footer variation="simple"></duet-footer>
// Save references to components we want to adjust below
var footer = document.querySelector("duet-footer")

// 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


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