Narrow Layout Ready
This template shows how to build a simple responsive view using Layout component’s narrow variation. 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.
<!DOCTYPE html>
<html class="duet-bg-gradient duet-sticky-footer" 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.duetds.com/api/fonts/3.0.36/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.18/lib/duet.min.css" integrity="sha384-lXsZJzvyiyIDxPLVC56+vhjfm/vPD4eEAE1z2Q8niyNbr0NgPl6nxGKEkjg18yQf" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.36/lib/tokens.custom-properties.css" integrity="sha384-bdxOmb87eo3bfxU+AHyrr4fo/iBSqSRZs4tIRaXT/e/8FCLFnV3mcABYDi1/CNQU" crossorigin="anonymous" />
<script type="module" src="https://cdn.duetds.com/api/components/8.4.0/lib/duet/duet.esm.js" integrity="sha384-k6jjwTqRDqMj48MzOlZv4UbSJQpGjVArPXKS4EYcxmUU+huiJgRO+66K7KN+kohP" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.4.0/lib/duet/duet.js" integrity="sha384-uWHPeiybdN7WPOxcNK/EM2ZkaVcXuGUpqYw9IFr+t6Qy6bZ2O6LAlphjvuSrrPei" crossorigin="anonymous"></script>
</head>
<body>
<duet-header language="fi"></duet-header>
<duet-layout center id="content">
<div slot="main">
<duet-grid alignment="center" mobile="center" direction="vertical">
<duet-grid-item margin="none" class="duet-text-center">
<img src="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg"
alt="Kuvitus" style="max-width:358px;width:70%;height:auto;"/>
<duet-card variation="plain" padding="x-small">
<duet-heading level="h1">Tervetuloa LähiTapiolan verkkopalveluun!</duet-heading>
<duet-paragraph variation="intro">
Tämä teksti on luotu Paragraph komponentin intro-nimistä tyyliä käyttäen.
Intro-tyyli sopii esimerkiksi ingressien luomiseen.
</duet-paragraph>
</duet-card>
</duet-grid-item>
</duet-grid>
<duet-card padding="large">
<form novalidate action="#">
<duet-choice-group value="one" label="Asiointikieli" direction="horizontal" name="group" responsive>
<duet-choice label="Suomi" type="radio" value="one" expand></duet-choice>
<duet-choice label="Svenska" type="radio" value="two" expand></duet-choice>
<duet-choice label="English" type="radio" value="three" expand></duet-choice>
</duet-choice-group>
<duet-grid responsive>
<duet-input label="Etunimi" placeholder="Matti" expand></duet-input>
<duet-input label="Sukunimi" placeholder="Meikäläinen" expand></duet-input>
</duet-grid>
<duet-input label="Katuosoite" tooltip="This is a tooltip" placeholder="Kotikatu 123" expand>
</duet-input>
<duet-input label="Puhelinnumero" type="tel" placeholder="050 123 4567" expand></duet-input>
<duet-spacer size="x-large"></duet-spacer>
<duet-card variation="info" padding="medium">
<div>
<duet-heading level="h2" visual-level="h4">
<duet-icon style="transform:translateY(3px);" size="small" name="messaging-paper-plane">
</duet-icon>
<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
H4-tason otsikko
</duet-heading>
<duet-spacer size="small"></duet-spacer>
<duet-radio-group
label="Tekstiviestimarkkinointilupa"
caption="Tämä teksti on asetettu Radio Group -komponentin caption asetuksella
joka mahdollistaa kertomaan tarkemmin valinnan sisällöstä."
direction="horizontal"
name="group2">
<duet-radio label="Kyllä" value="kyllä"></duet-radio>
<duet-radio label="Ei" value="ei"></duet-radio>
</duet-radio-group>
<duet-divider></duet-divider>
<duet-radio-group
label="Sähköpostilupa"
caption="Tämä teksti on asetettu Radio Group -komponentin caption asetuksella
joka mahdollistaa kertomaan tarkemmin valinnan sisällöstä."
direction="horizontal"
name="group1">
<duet-radio label="Kyllä" value="kyllä"></duet-radio>
<duet-radio label="Ei" value="ei"></duet-radio>
</duet-radio-group>
</div>
</duet-card>
<duet-card variation="info" padding="medium">
<duet-heading level="h2" visual-level="h4">
<duet-icon
style="transform:translateY(3px);"
size="small"
name="messaging-laptop">
</duet-icon>
<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
H4-tason otsikko
</duet-heading>
<duet-spacer size="small"></duet-spacer>
<duet-paragraph>
Säästä luontoa ja pienennä hiilijalanjälkeäsi. Ota käyttöösi paperiton
palvelu! <duet-link url="#">Lue lisää paperittomuudesta täältä</duet-link>.
</duet-paragraph>
<duet-checkbox label="Otan käyttööni paperittoman palvelun"></duet-checkbox>
</duet-card>
<duet-spacer></duet-spacer>
<duet-grid alignment="left">
<duet-button variation="primary">Tallenna asetukset</duet-button>
</duet-grid>
</form>
</duet-card>
</div>
</duet-layout>
<duet-footer variation="simple"></duet-footer>
<script>
// Save references to components we want to adjust below
var header = document.querySelector("duet-header")
var footer = document.querySelector("duet-footer")
// 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" }
]
// prevent header links causing a navigation
function preventDefault(e) {
e.detail.originalEvent.preventDefault()
}
header.addEventListener("duetLanguageSelect", preventDefault)
header.addEventListener("duetLogoClick", preventDefault)
// Set the help menu items in footer
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
npm install @duetds/css
npm install @duetds/fontsFor further guidelines, please see each package’s documentation.
Tutorials
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Tutorials
Building Layouts
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a template, please head over to the Support page for more guidelines and help.