Skip to main content

Hero Area (image) Ready

This template shows how to build a simple responsive view that utilizes image variation of Hero Area. Please note that the example below does not represent a real use case.

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-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-v3AWPcrsJ2qn69D7QjR5hOy+ADPSF/MyNjJ05ndB/40O1phyIhtkcT5bMNPdeYOn" crossorigin="anonymous"></script>
<script nomodule src="" integrity="sha384-Weczws0h4TNJ7LFwg1TT1IT+/EQGpfT1zoERdVZykkF3/QTED1FkEj4EFm9mGf3H" crossorigin="anonymous"></script>
<duet-header skip-to-id="#content" contact="Ota yhteyttä"></duet-header>
heading="LähiTapiola Meklarit"
description="Tarjoamme vakuutusmeklareille asiantuntevaa palvelua keskitetysti ja alueellisesti.
Rekisteröi&shy;tyessäsi saat käyttöösi kattavat sähköiset asiantuntija&shy;palvelumme."

button-label="Rekisteröidy käyttäjäksi"

<div slot="main">
<duet-card padding="large" id="signin">
<duet-heading level="h2" visual-level="h4" border>Kirjaudu sisään</duet-heading>
<duet-spacer size="x-large"></duet-spacer>
Ole hyvä ja syötä käyttäjätunnuksesi ja salasanasi alla oleviin kenttiin kirjautuaksesi sisään.
Tarvittaessa saat lisätietoja osoitteesta
<duet-link url="">
<duet-grid-item margin="none" max-width="400px" fill>
<form novalidate method="post">
<duet-input expand type="email" label="Tunnus" placeholder="" name="email"></duet-input>
<duet-input type="password" expand label="Salasana" placeholder="••••••••••••" name="password"></duet-input>
<duet-button submit variation="secondary">Kirjaudu</duet-button>
<duet-spacer size="small"></duet-spacer>
<div slot="sidebar">
<duet-card background="primary-lightest" padding="large" margin="none">
<duet-heading level="h2" visual-level="h5">Toiminnot</duet-heading>
<duet-spacer size="x-small"></duet-spacer>
<duet-link url="#">Lue lisää Meklareista</duet-link><br>
<duet-link url="#">Kysy lisätietoja</duet-link><br>
<duet-link url="#">Yhteystiedot</duet-link><br>
<duet-link url="#">Rekisteröidy käyttäjäksi</duet-link><br>
<duet-link url="#">Unohditko salasanasi?</duet-link>
<duet-footer logo-href="/" language="fi"></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 contact menu items
header.contactItems = [
{ label: "Kysy lisätietoja", href: "" },
{ label: "Yhteystiedot", href: "/yhteystiedot/" }

// Set label and href for session link
header.session = {
label: "Kirjaudu sisään",
href: "#signin",
type: "signin"

// Set the main links in footer
footer.items = [
{ label: 'Hae korvausta', href: '#', icon: 'navigation-make-claim' },
{ label: 'Osta vakuutus', href: '#', icon: 'action-buy-insurance' },
{ label: 'Yhteystiedot', href: '#', icon: 'form-tel' }

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