Skip to main content

Alert Ready

Informs user about important changes or conditions in the interface. Use this component if you need to capture user’s attention in a prominent way.

Examples #

Open in new window
<duet-alert class="duet-text-center"> A simple default alert — check it out! </duet-alert>
<duet-alert variation="success" class="duet-text-center"> A simple success alert — check it out! </duet-alert>
<duet-alert variation="danger" class="duet-text-center"> A simple danger alert — check it out! </duet-alert>
<duet-alert variation="warning" class="duet-text-center"> A simple warning alert — check it out! </duet-alert>
Open in new window
<duet-alert icon="messaging-alert"> A default alert with an icon on left — check it out! </duet-alert>
<duet-alert variation="success" icon="messaging-alert">
A success alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="danger" icon="messaging-alert"> A danger alert with an icon on left — check it out! </duet-alert>
<duet-alert variation="warning" icon="messaging-alert">
A warning alert with an icon on left — check it out!
</duet-alert>
Open in new window
<duet-alert dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="success" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="danger" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="warning" dismissible> A dismissible alert — check it out! </duet-alert>

<script>
// Select the above alert components
var alerts = document.querySelectorAll("duet-alert")

// For each component, add dismiss event listener
alerts.forEach(function (element) {
element.addEventListener("duetDismiss", function (e) {
console.log("dismissed", e)
})
element.addEventListener("duetCloseComplete", function (e) {
console.log("complete", e)
})
})
</script>
Open in new window
<div class="duet-toast" aria-live="polite" aria-atomic="false" aria-relevant="additions">
<duet-alert announcements="false" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert announcements="false" variation="success" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert announcements="false" variation="danger" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert announcements="false" variation="warning" dismissible> A dismissible alert — check it out! </duet-alert>
</div>

<script>
// Select the above alert components
var alerts = document.querySelectorAll("duet-alert")

// For each component, add dismiss event listener
alerts.forEach(function (element) {
element.addEventListener("duetDismiss", function (e) {
console.log("dismissed", e)
})
})
</script>
Open in new window
<duet-alert>
<div class="duet-p-large">
<duet-heading level="h6">Rajoitusehdot</duet-heading>
<duet-paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae porta arcu. Mauris laoreet feugiat
facilisis. Donec tincidunt dapibus orci, sit amet eleifend augue efficitur eget. Duis eget hendrerit arcu, vitae
tempor libero. Mauris at dui efficitur, imperdiet lacus sed, volutpat lorem. Donec sed nulla ac nibh laoreet
egestas.
</duet-paragraph>
<duet-checkbox margin="none" label="Hyväksyn rajoitusehdot"></duet-checkbox>
</div>
</duet-alert>
Open in new window
<div class="duet-toast" aria-live="polite" aria-atomic="false" aria-relevant="additions">
<duet-alert announcements="false" dismissible auto-dismiss="5000"> A dismissible alert — check it out! </duet-alert>
<duet-alert announcements="false" variation="success" dismissible auto-dismiss="5000">
A dismissible alert — check it out!
</duet-alert>
<duet-alert announcements="false" variation="danger" dismissible auto-dismiss="5000">
A dismissible alert — check it out!
</duet-alert>
<duet-alert announcements="false" variation="warning" dismissible auto-dismiss="5000">
A dismissible alert — check it out!
</duet-alert>
</div>

<script>
// Select the above alert components
var alerts = document.querySelectorAll("duet-alert")

// For each component, add dismiss event listener
alerts.forEach(function (element) {
element.addEventListener("duetDismiss", function (e) {
console.log("dismissed", e)
})
})
</script>
Open in new window
<style>
duet-tab-group::part(slideout-tab-button) {
background-color: transparent;
}
duet-tab-group::part(slideout-tab-button--selected) {
background-color: transparent;
}
</style>
<duet-nav>
<duet-link url="#main" tab-to-link>Siirry pääsisältöön</duet-link>
<duet-link url="/hae-korvausta" tab-to-link>Hae korvausta</duet-link>
<div slot="mobile">
<duet-menu-bar accessible-label="Main">
<div slot="right">
<duet-menu-bar-item accessible-label="Avaa hakuvalikko" leading-icon="form-search" id="search-navigation-opener" accessible-popup="true" accessible-expanded="false"></duet-menu-bar-item>
<duet-slideout opener="search-navigation-opener" accessible-role="generic">
<div slot="sticky-header">
<duet-grid alignment="center" style="gap: var(--space-small)">
<duet-icon name="form-search" size="medium" margin="none"></duet-icon>
<duet-heading visual-level="h3" fixed-size margin="none">Haku</duet-heading>
</duet-grid>
<duet-spacer></duet-spacer>
<duet-input type="text" expand label="Haku" label-hidden clear="true"></duet-input>
</div>
<duet-spacer size="x-small"></duet-spacer>
<div>
<duet-heading level="h3" visual-level="h6">Usein haettua</duet-heading>
<div role="list">
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Autovakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Lapsiturva</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Rahastosäästäminen</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Henkivakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Varainhoito</duet-popup-menu-item>
</div>
<duet-divider></duet-divider>
</div>
<div>
<duet-heading level="h3" visual-level="h6" color="gray-darker">Ehdotetut haut</duet-heading>
<div role="list">
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>vakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem">sähkö<b>auto</b>n vakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>maattinen korvauskäsittely</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>tie</duet-popup-menu-item>
</div>
</div>
<duet-spacer size="large"></duet-spacer>
<div>
<duet-heading level="h3" visual-level="h6" color="gray-darker">Hakutulokset termillä 'auto' (93)</duet-heading>
<ul style="list-style: none; padding: 0;">
<li style="padding: var(--space-medium) 0;">
<duet-button url="#" variation="plain" margin="none" padding="none" fixed>Autovakuutus</duet-button>
<duet-paragraph margin="none">Halvin autovakuutus ei aina ole järkevin vaihtoehto. Suosittelemme vakuutusten sisällön vertailua ja huomioimaan erityisesti...</duet-paragraph>
<duet-spacer size="xx-small"></duet-spacer>
<duet-breadcrumbs variation="plain" color="gray-darker">
<span><duet-breadcrumb icon="">Henkilöasiakas</duet-breadcrumb></span>
<span><duet-breadcrumb >Vakuutukset</duet-breadcrumb></span>
<span><duet-breadcrumb>Ajoneuvot</duet-breadcrumb></span>
<span><duet-breadcrumb>Autovakuutus</duet-breadcrumb></span>
</duet-breadcrumbs>
</li>
</ul>
</div>
</duet-slideout>
<duet-menu-bar-item accessible-label="Avaa kirjautumisvalikko" leading-icon="navigation-user" id="login-navigation-opener" accessible-popup="true" accessible-expanded="false"></duet-menu-bar-item>
<duet-slideout opener="login-navigation-opener">
<div slot="sticky-header">
<duet-grid alignment="center" style="gap: var(--space-small)">
<duet-icon name="navigation-login" size="medium" margin="none" color="secondary"></duet-icon>
<duet-heading margin="none" level="h2" visual-level="h3" fixed-size>Kirjautuminen</duet-heading>
</duet-grid>
<duet-spacer></duet-spacer>
<duet-tab-group variation="plain" identifier="slideout-tab" margin="none">
<duet-tab label="Henkilöasiakas" selected content-id="mobile-login-tab-private-customer"></duet-tab>
<duet-tab label="Yritysasiakas" content-id="mobile-login-tab-corporate-customer"></duet-tab>
</duet-tab-group>
</div>
<div id="mobile-login-tab-private-customer">
<duet-slideout-link size="medium" caret>
Vakuutukset ja vahinkoasiat
<span slot="description">Hallinnoi vakuutuksia, ilmoita vahingosta ja tarkastele korvauspäätöksiäsi.</span>
</duet-slideout-link>
<duet-spacer></duet-spacer>
<duet-divider margin="none"></duet-divider>
<duet-spacer></duet-spacer>
<duet-slideout-link size="medium" caret>
Säästäminen ja sijoittaminen
<span slot="description">Seuraa sijoitustesi kehitystä, hallinnoi rahastoja ja muita sijoitustuotteitasi.</span>
</duet-slideout-link>
<duet-spacer></duet-spacer>
<duet-divider margin="none"></duet-divider>
<duet-spacer></duet-spacer>
<duet-slideout-link size="medium" caret>
Ajoneuvorahoitus
<span slot="description">Tarkastele ja tee muutoksia osamaksu- tai leasingrahoitussopimukseesi.</span>
</duet-slideout-link>
</div>
<div id="mobile-login-tab-corporate-customer"></div>
</duet-slideout>
<duet-menu-bar-item accessible-label="Avaa päävalikko" leading-icon="navigation-menu" id="main-navigation-opener"></duet-menu-bar-item>
<duet-slideout opener="main-navigation-opener">
<duet-slideout-panel active label-size="large">
<span slot="label">Vakuutukset</span>
<duet-slideout-panel-dropdown active icon="category-car">
<span slot="label">Ajoneuvot</span>
<duet-slideout-link>Auto</duet-slideout-link>
<duet-slideout-link>Pakettiauto</duet-slideout-link>
<duet-slideout-link>Moottoripyörä</duet-slideout-link>
<duet-slideout-link>Mopo</duet-slideout-link>
<duet-slideout-link>Kaikki ajoneuvot</duet-slideout-link>
</duet-slideout-panel-dropdown>
<duet-slideout-panel-dropdown icon="category-personal">
<span slot="label">Koti</span>
<duet-slideout-link>Kotivakuutus</duet-slideout-link>
<duet-slideout-link>Mökkivakuutus</duet-slideout-link>
<duet-slideout-link>Vuokralaisen kotivakuutus</duet-slideout-link>
<duet-slideout-link>Vuokranantajan vakuutus</duet-slideout-link>
</duet-slideout-panel-dropdown>
<duet-slideout-panel-dropdown icon="category-personal">
<span slot="label">Terveys</span>
<duet-slideout-link active>Tapaturmavakuutus</duet-slideout-link>
<duet-slideout-link>Sairaskuluvakuutus</duet-slideout-link>
<duet-slideout-link>Urheiluvakuutus</duet-slideout-link>
<duet-slideout-link>Vauvavakuutus</duet-slideout-link>
<duet-slideout-link>Lapsivakuutus</duet-slideout-link>
<duet-slideout-link>Työkyvyttömyysvakuutus</duet-slideout-link>
<duet-slideout-link>Kaikki henkilövakuutukset</duet-slideout-link>
</duet-slideout-panel-dropdown>
<duet-slideout-link active icon="category-travel">Matka</duet-slideout-link>
<duet-slideout-link icon="category-life-insurance">Henki</duet-slideout-link>
<duet-slideout-panel-dropdown icon="category-pet">
<span slot="label">Eläin</span>
<duet-slideout-link>Koiravakuutus</duet-slideout-link>
<duet-slideout-link>Kissavakuutus</duet-slideout-link>
<duet-slideout-link>Hevosvakuutus</duet-slideout-link>
</duet-slideout-panel-dropdown>
<duet-slideout-link icon="category-forest">Metsä</duet-slideout-link>
</duet-slideout-panel>
<duet-slideout-link size="large">Sijoittaminen</duet-slideout-link>
<duet-slideout-link size="large">Rahoitus</duet-slideout-link>
<duet-slideout-link size="large">Asiakkaalle</duet-slideout-link>
<duet-spacer size="large"></duet-spacer>
<duet-slideout-panel label-size="medium" icon="category-block" active background-color="gray-lightest">
<span slot="label">Kirjautuneen palvelut</span>
<div slot="sticky-header">
<duet-grid alignment="center" style="gap: var(--space-small)">
<duet-icon name="navigation-login" size="medium" margin="none" color="secondary"></duet-icon>
<duet-heading margin="none" level="h2" visual-level="h3" fixed-size>Kirjautuminen</duet-heading>
</duet-grid>
<duet-spacer></duet-spacer>
<duet-tab-group variation="plain" identifier="slideout-tab" margin="none">
<duet-tab label="Henkilöasiakas" selected content-id="mobile-panel-login-tab-private-customer"></duet-tab>
<duet-tab label="Yritysasiakas" content-id="mobile-panel-login-tab-corporate-customer"></duet-tab>
</duet-tab-group>
</div>
<div id="mobile-panel-login-tab-private-customer" label="Henkilöasiakas" selected>
<duet-slideout-link size="medium" caret>
Vakuutukset ja vahinkoasiat
<span slot="description">Hallinnoi vakuutuksia, ilmoita vahingosta ja tarkastele korvauspäätöksiäsi.</span>
</duet-slideout-link>
<duet-spacer></duet-spacer>
<duet-divider margin="none"></duet-divider>
<duet-spacer></duet-spacer>
<duet-slideout-link size="medium" caret>
Säästäminen ja sijoittaminen
<span slot="description">Seuraa sijoitustesi kehitystä, hallinnoi rahastoja ja muita sijoitustuotteitasi.</span>
</duet-slideout-link>
<duet-spacer></duet-spacer>
<duet-divider margin="none"></duet-divider>
<duet-spacer></duet-spacer>
<duet-slideout-link size="medium" caret>
Ajoneuvorahoitus
<span slot="description">Tarkastele ja tee muutoksia osamaksu- tai leasingrahoitussopimukseesi.</span>
</duet-slideout-link>
</div>
<div id="mobile-panel-login-tab-corporate-customer"></div>
</duet-slideout-panel>
<duet-slideout-link size="medium" icon="form-search">Hae sivustolta</duet-slideout-link>
<duet-divider></duet-divider>
<duet-slideout-link size="small" active>Henkilöasiakkaat</duet-slideout-link>
<duet-slideout-link size="small">Yritysasiakkaat</duet-slideout-link>
<duet-slideout-link size="small">Maa- ja metsätilat</duet-slideout-link>
<duet-slideout-link size="small">Yhtiöryhmä</duet-slideout-link>
<duet-spacer size="medium"></duet-spacer>
<duet-slideout-lang>
<duet-slideout-link size="small" accessible-label="Vaihda kieli suomeksi" active>Suomi</duet-slideout-link>
<duet-slideout-link size="small" accessible-label="Byt språk till svenska" target-language="sv">Svenska</duet-slideout-link>
<duet-slideout-link size="small" accessible-label="Change language to English" target-language="en">English</duet-slideout-link>
</duet-slideout-lang>
</duet-slideout>
</div>
</duet-menu-bar>
<duet-menu-bar logo="false" accessible-label="Primary">
<div slot="center">
<duet-menu-bar-item>Vakuutukset</duet-menu-bar-item>
<duet-menu-bar-item>Sijoittaminen</duet-menu-bar-item>
<duet-menu-bar-item active>Rahoitus</duet-menu-bar-item>
<duet-menu-bar-item>Asiakkaalle</duet-menu-bar-item>
</div>
</duet-menu-bar>
<duet-submenu-bar accessible-label="Secondary">
<span slot="label">Valitse vakuutus</span>
<duet-submenu-bar-dropdown icon="category-car">
<span slot="label">Ajoneuvot</span>
<duet-submenu-bar-dropdown-link active>Autovakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Moottoripyörävakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Mopovakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Pakettiautovakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Moottorivenevakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Purjevenevakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Kaikki ajoneuvovakuutukset</duet-submenu-bar-dropdown-link>
</duet-submenu-bar-dropdown>
<duet-submenu-bar-dropdown icon="category-apartment">
<span slot="label">Koti</span>
<duet-submenu-bar-dropdown-link>Kotivakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Mökkivakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Vuokralaisen kotivakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Vuokranantajan vakuutus</duet-submenu-bar-dropdown-link>
</duet-submenu-bar-dropdown>
<duet-submenu-bar-dropdown icon="category-personal">
<span slot="label">Terveys</span>
<duet-submenu-bar-dropdown-link>Tapaturmavakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Sairaskuluvakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Urheiluvakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Vauvavakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Lapsivakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Työkyvyttömyysvakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Kaikki henkilövakuutukset</duet-submenu-bar-dropdown-link>
</duet-submenu-bar-dropdown>
<duet-submenu-bar-link icon="category-travel" active>Matka</duet-submenu-bar-link>
<duet-submenu-bar-link icon="category-life-insurance">Henki</duet-submenu-bar-link>
<duet-submenu-bar-dropdown icon="category-pet">
<span slot="label">Eläimet</span>
<duet-submenu-bar-dropdown-link>Koiravakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Kissavakuutus</duet-submenu-bar-dropdown-link>
<duet-submenu-bar-dropdown-link>Hevosvakuutus</duet-submenu-bar-dropdown-link>
</duet-submenu-bar-dropdown>
<duet-submenu-bar-link icon="category-forest">Metsä</duet-submenu-bar-link>
</duet-submenu-bar>
</div>
<div slot="desktop">
<duet-toolbar accessible-label="Secondary" variation="negative">
<div slot="left">
<duet-toolbar-item variation="negative" url="#henkiloasiakkaat" active>Henkilöasiakkaat</duet-toolbar-item>
<duet-toolbar-item variation="negative" url="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-item>
<duet-toolbar-item variation="negative" url="#maatila-asiakkaat">Maatila-asiakkaat</duet-toolbar-item>
<duet-toolbar-item variation="negative" leading-icon="navigation-language" id="toolbar-item-yhtioryhma">Yhtiöryhmä</duet-toolbar-item>
<duet-popup-menu controller="toolbar-item-yhtioryhma" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
</duet-popup-menu>
</div>
<div slot="right">
<duet-toolbar-item variation="negative" id="desktop-search-opener" url="#search" icon="form-search">Hae</duet-toolbar-item>
<duet-slideout opener="desktop-search-opener" accessible-role="generic">
<div slot="sticky-header">
<duet-grid alignment="center" style="gap: var(--space-small)">
<duet-icon name="form-search" size="medium" margin="none"></duet-icon>
<duet-heading visual-level="h3" fixed-size margin="none">Haku</duet-heading>
</duet-grid>
<duet-spacer></duet-spacer>
<duet-input type="text" expand label="Haku" label-hidden clear="true"></duet-input>
</div>
<duet-spacer size="x-small"></duet-spacer>
<div>
<duet-heading level="h3" visual-level="h6">Usein haettua</duet-heading>
<div role="list">
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Autovakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Lapsiturva</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Rahastosäästäminen</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Henkivakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Varainhoito</duet-popup-menu-item>
</div>
</div>
<duet-divider></duet-divider>
<div>
<duet-heading level="h3" visual-level="h6" color="gray-darker">Ehdotetut haut</duet-heading>
<div role="list">
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>vakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem">sähkö<b>auto</b>n vakuutus</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>maattinen korvauskäsittely</duet-popup-menu-item>
<duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>tie</duet-popup-menu-item>
</div>
</div>
<duet-spacer size="large"></duet-spacer>
<div>
<duet-heading level="h3" visual-level="h6" color="gray-darker">Hakutulokset termillä 'auto' (93)</duet-heading>
<ul style="list-style: none; padding: 0;">
<li style="padding: var(--space-medium) 0;">
<duet-button url="#" variation="plain" margin="none" padding="none" fixed>Autovakuutus</duet-button>
<duet-paragraph margin="none">Halvin autovakuutus ei aina ole järkevin vaihtoehto. Suosittelemme vakuutusten sisällön vertailua ja huomioimaan erityisesti...</duet-paragraph>
<duet-spacer size="xx-small"></duet-spacer>
<duet-breadcrumbs variation="plain" color="gray-darker">
<span><duet-breadcrumb icon="">Henkilöasiakas</duet-breadcrumb></span>
<span><duet-breadcrumb >Vakuutukset</duet-breadcrumb></span>
<span><duet-breadcrumb>Ajoneuvot</duet-breadcrumb></span>
<span><duet-breadcrumb>Autovakuutus</duet-breadcrumb></span>
</duet-breadcrumbs>
</li>
</ul>
</div>
</duet-slideout>
<duet-toolbar-item variation="negative" accessible-label="Valitse kieli" leading-icon="navigation-language" id="toolbar-item-language">FI</duet-toolbar-item>
<duet-popup-menu controller="toolbar-item-language" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item url="#" accessible-role="listitem" accessible-label="Vaihda kieli suomeksi" active>Suomeksi</duet-popup-menu-item>
<duet-popup-menu-item url="#" accessible-role="listitem" accessible-label="Byt språk till svenska" target-language="sv">På Svenska</duet-popup-menu-item>
<duet-popup-menu-item url="#" accessible-role="listitem" accessible-label="Change language to English" target-language="en">In English</duet-popup-menu-item>
</duet-popup-menu>
</div>
</duet-toolbar>
<duet-menu-bar id="desktop-menu-bar" accessible-label="Main">
<div slot="center">
<duet-menu-bar-item active>Vakuutukset</duet-menu-bar-item>
<duet-menu-bar-item url="#">Sijoittaminen</duet-menu-bar-item>
<duet-menu-bar-item>Rahoitus</duet-menu-bar-item>
<duet-menu-bar-item>Asiakkaalle</duet-menu-bar-item>
</div>
<div slot="right">
<duet-menu-bar-item leading-icon="navigation-user" id="desktop-login-opener">Kirjautuminen</duet-menu-bar-item>
<duet-slideout opener="desktop-login-opener">
<div slot="sticky-header">
<duet-grid alignment="center" style="gap: var(--space-small)">
<duet-icon name="navigation-login" size="medium" margin="none"></duet-icon>
<duet-heading visual-level="h3" fixed-size margin="none">Kirjautuminen</duet-heading>
</duet-grid>
<duet-spacer></duet-spacer>
<duet-tab-group variation="plain" identifier="slideout-tab" margin="none">
<duet-tab label="Henkilöasiakas" selected content-id="desktop-login-tab-private-customer"></duet-tab>
<duet-tab label="Yritysasiakas" content-id="desktop-login-tab-corporate-customer"></duet-tab>
</duet-tab-group>
</div>
<div id="desktop-login-tab-private-customer">
<duet-slideout-link size="medium" caret>
Vakuutukset ja vahinkoasiat
<span slot="description">Hallinnoi vakuutuksia, ilmoita vahingosta ja tarkastele korvauspäätöksiäsi.</span>
</duet-slideout-link>
<duet-spacer></duet-spacer>
<duet-divider margin="none"></duet-divider>
<duet-spacer></duet-spacer>
<duet-slideout-link size="medium" caret>
Säästäminen ja sijoittaminen
<span slot="description">Seuraa sijoitustesi kehitystä, hallinnoi rahastoja ja muita sijoitustuotteitasi.</span>
</duet-slideout-link>
<duet-spacer></duet-spacer>
<duet-divider margin="none"></duet-divider>
<duet-spacer></duet-spacer>
<duet-slideout-link size="medium" caret>
Ajoneuvorahoitus
<span slot="description">Tarkastele ja tee muutoksia osamaksu- tai leasingrahoitussopimukseesi.</span>
</duet-slideout-link>
</div>
<div id="desktop-login-tab-corporate-customer"></div>
</duet-slideout>
<duet-menu-bar-item leading-icon="navigation-user" id="desktop-menu-bar-etunimi">Etunimi</duet-menu-bar-item>
<duet-popup-menu controller="desktop-menu-bar-etunimi" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item accessible-role="listitem">Omat tiedot</duet-popup-menu-item>
<duet-divider margin="none"></duet-divider>
<duet-popup-menu-item leading-icon="messaging-logout" accessible-role="listitem">Kirjaudu ulos</duet-popup-menu-item>
</duet-popup-menu>
</div>
</duet-menu-bar>
<duet-submenu-bar accessible-label="Submenu">
<duet-submenu-bar-item leading-icon="category-car" id="desktop-submenu-bar-ajoneuvot">Ajoneuvot</duet-submenu-bar-item>
<duet-popup-menu controller="desktop-submenu-bar-ajoneuvot" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item accessible-role="listitem" leading-icon="category-car">Autovakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem" leading-icon="category-motorbike" active>Moottoripyörävakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem" leading-icon="category-motorcycle">Mopovakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem" leading-icon="category-van">Pakettiautovakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem" leading-icon="category-motor-boat">Moottorivenevakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem" leading-icon="category-sailing">Purjevenevakuutus</duet-popup-menu-item>
<duet-divider margin="none"></duet-divider>
<duet-popup-menu-item>
<duet-grid alignment="center" style="gap: var(--space-x-small)">
<span>Kaikki ajoneuvovakuutukset</span>
<duet-icon margin="none" name="action-arrow-right-small" size="xxx-small"></duet-icon>
</duet-grid>
</duet-popup-menu-item>
</duet-popup-menu>
</duet-popup-menu>
<duet-submenu-bar-item leading-icon="category-apartment" id="desktop-submenu-bar-koti">Koti</duet-submenu-bar-item>
<duet-popup-menu controller="desktop-submenu-bar-koti" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item accessible-role="listitem">Kotivakuutus</duet-popup-menu-item accessible-role="listitem">
<duet-popup-menu-item accessible-role="listitem">Mökkivakuutus</duet-popup-menu-item accessible-role="listitem">
<duet-popup-menu-item accessible-role="listitem">Vuokralaisen kotivakuutus</duet-popup-menu-item accessible-role="listitem">
<duet-popup-menu-item accessible-role="listitem">Vuokranantajan vakuutus</duet-popup-menu-item accessible-role="listitem">
</duet-popup-menu>
<duet-submenu-bar-item leading-icon="category-personal" id="desktop-submenu-bar-terveys">Terveys</duet-submenu-bar-item>
<duet-popup-menu controller="desktop-submenu-bar-terveys" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item accessible-role="listitem">Tapaturmavakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Sairaskuluvakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Urheiluvakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Vauvavakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Lapsivakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Työkyvyttömyysvakuutus</duet-popup-menu-item>
<duet-divider margin="none"></duet-divider>
<duet-popup-menu-item>
<duet-grid alignment="center" style="gap: var(--space-x-small)">
<span>Kaikki henkilövakuutukset</span>
<duet-icon margin="none" name="action-arrow-right-small" size="xxx-small"></duet-icon>
</duet-grid>
</duet-popup-menu-item>
</duet-popup-menu>
<duet-submenu-bar-item leading-icon="category-travel" active>Matka</duet-submenu-bar-item>
<duet-submenu-bar-item leading-icon="category-life-insurance">Henki</duet-submenu-bar-item>
<duet-submenu-bar-item leading-icon="category-pet" id="desktop-submenu-bar-elaimet">Eläimet</duet-submenu-bar-item>
<duet-popup-menu controller="desktop-submenu-bar-elaimet" accessible-role="list" skip-teleport force-placement>
<duet-popup-menu-item accessible-role="listitem">Koiravakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Kissavakuutus</duet-popup-menu-item>
<duet-popup-menu-item accessible-role="listitem">Hevosvakuutus</duet-popup-menu-item>
</duet-popup-menu>
<duet-submenu-bar-item leading-icon="category-forest">Metsä</duet-submenu-bar-item>
</duet-submenu-bar>
</div>
</duet-nav>

<duet-alert dismissible position="below-nav" variation="danger">
A serious situation has occurred, hence this alert is of the danger variation. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero vitae consequatur qui molestiae sequi nesciunt quam veritatis optio corporis dicta, sunt non atque itaque ex neque soluta quo dolorum enim!
<duet-paragraph slot="show-more">Here we have more information on the alert subject.</duet-paragraph>
</duet-alert>

<duet-alert dismissible position="below-nav" variation="warning">
There is something that you should know, but it is not as serious as the danger alert.
<duet-paragraph slot="show-more">Here we have more information on the alert subject.</duet-paragraph>
</duet-alert>

<duet-alert dismissible position="below-nav" variation="success">
The thing you did on the previous page went through successfully, so we show this success alert.
<duet-paragraph slot="show-more">Here we have more information on the alert subject.</duet-paragraph>
</duet-alert>

<duet-alert dismissible position="below-nav">
A simple default alert with link rendered as button. <duet-link url="" external onclick="window.open('https://www.duetds.com/')">Read more link</duet-link>
</duet-alert>


<duet-page-heading layout="narrow" icon="category-car">
<duet-heading slot="heading" level="h1" margin="none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</duet-heading>
</duet-page-heading>
<duet-layout margin="none" center>
<div slot="main">
<duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
<duet-heading level="h4">Heading H4</duet-heading>
<duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
</div>
</duet-layout>
Open in new window
<duet-layout center>
<div slot="main">

<duet-paragraph>
If a live region (element with role="alert" is also a live region) is present on page load and its content does not
change, then some screen readers do not read it out. So you have to either
</duet-paragraph>
<ul>
<li>have the alert already on the page (but visually hidden) and change its text content when it needs to be announced, or</li>
<li>attach the alert to the DOM only when it needs to be announced</li>
</ul>

<duet-button class="a">Alarm A</duet-button>
<duet-button class="b">Alarm B</duet-button>

<duet-alert id="alert-a" class="duet-visually-hidden" dismissible></duet-alert>
</div>

</duet-layout>

<template id="alert-tpl">
<duet-alert>Alerting alarm B</duet-alert>
</template>

<script>

const buttonA = document.querySelector('duet-button.a')
const buttonB = document.querySelector('duet-button.b')
const alertA = document.getElementById('alert-a')

buttonA.addEventListener('click', evt => {
// removing of duet-alert-is-dismissed is needed if the alert has been dismissed
alertA.classList.remove('duet-visually-hidden', 'duet-alert-is-dismissed');
alertA.textContent = 'Alerting alarm A';
});
// When initially hidden alert is dismissed, after its 300ms fade-out revert
// the 'duet-visually-hidden' class and empty the text content so when
// the alert is shown again, the screen readers can catch the change
alertA.addEventListener('duetDismiss', evt => {
setTimeout(() => {
alertA.classList.add('duet-visually-hidden');
alertA.textContent = '';
}, 300)
});

document.querySelector('duet-button.b').addEventListener('click', evt => {
const tpl = document.getElementById('alert-tpl');
const clone = document.importNode(tpl.content, true);
// The timeout helps VoiceOver to catch the change
setTimeout(() => evt.target.after(clone), 10);
});
</script>

Properties #

Property Attribute Description Type Default
accessibleLabel accessible-label Adds accessible label for the dismissible alert close button. string getLocaleString(this.accessibleLabelDefaults)
accessibleLabelDefaults accessible-label-default Property to change languageDefaults on the component. normally you would handle these strings on an application level and override accessibleLabel when needed DuetLangObject | string { fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message", }
announcements announcements Enable or disabled announcements by assistive technologies. boolean true
autoDismiss auto-dismiss Time in milliseconds which is waited before auto dismiss. number undefined
dismissible dismissible Should a button be rendered to dismiss the alert? boolean false
focusable focusable Should it be possible to focus on alert? boolean false
icon icon Icon to display to the left of the content. string ""
margin margin Controls the margin of the component. "auto" | "none" "auto"
padding padding Controls the padding of the component. "auto" | "none" "auto"
position position Allows for styling of the alert based on its position in the layout. "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation. "below-nav" | "content" "content"
theme theme Theme of the card. "" | "default" | "turva" ""
variation variation Style variation of the alert. "danger" | "default" | "success" | "warning" "default"

Events #

Event Description Type
duetCloseComplete Emitted when the alert closing transition is complete. CustomEvent<any>
duetDismiss Emitted when the dismiss button is clicked CustomEvent<{ component: "duet-alert"; originalEvent: MouseEvent; }>

Methods #

hide() => Promise<void> #

Hide.

Returns #

Type: Promise<void>

setFocus(options?: FocusOptions) => Promise<void> #

Sets focus on the specified duet-alert.
Works only when focusable property is set to true.
Use this method instead of the global
button.focus().

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

show() => Promise<void> #

Show.

Returns #

Type: Promise<void>

Slots #

Slot Description
"default" Alert content.
"show-more" Additional content that is initially hidden and shown when user expands it.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.
It is extremely important that any text you add to the components default slot is ALSO replicated on the accessibleLabel property, otherwise a non sighted user will not be able to understand what is going on

When to use #

  • When you need to capture user’s attention in a prominent way.
  • To inform user about important changes or conditions in the interface.
  • To highlight error and success messages in an interface.
  • Put alert close to the context it’s referring to e.g. “Apply” or “Save” functionalities, or alternatively, if the alert is related to contents of an entire page, place it at the top of the page.

When not to use #

  • For highlighting general content or as a banner. Use Card component instead for such purposes.
  • Instead of generic error pages.

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name Purpose
default Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.
success Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
danger Used to communicate problems that have to be resolved so that user can continue forward. This variation should be always used for e.g. highlighting errors.
warning Used to display information that needs user’s attention and may require further steps.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Additional considerations #


Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines


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

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown


Troubleshooting

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