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.

WARNING: There is bug in NVDA screen reader that is causing multiple alert readings when alert contains other components (link, button etc.). It is working correctly for text only.
Danger and warning alerts have a role="alert" defined which makes sure assistive technologies announce them when they appear.
Default and success alert variations have a role="status" defined. This makes sure they’re being read after danger and warning alerts.
All alerts use aria-live attributes. This makes sure contents are announced by assistive technologies when updated. This behaviour can be disabled if needed using announcements property.
Alerts additionally use tabindex="0" to make it possible to access them using tab key or programmatically move focus to them.
Dynamically adding alerts may not work with screen readers. See the example Accessible dynamic alerts for possible work-arounds.

Additional considerations #

Alert component can be used as a toast message as well, view an example.
When used as a toast, the alerts will appear from the middle top part of the viewport and stack on top of each other if there’s more than one alert.
When used as a toast (where alerts are dynamically added), the alert's announcements property should be set to false, and aria-live (and other related attributes) should instead be placed on the container element. This improves the reliability of screen reader announcements by ensuring the live region is already in the DOM before it is used. View an example.

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

Troubleshooting

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

Alert Ready

Examples #

Properties #

Events #

Methods #

`hide() => Promise<void>` #

Returns #

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

Parameters #

Returns #

`show() => Promise<void>` #

Returns #

Slots #

Usage #

When to use #

When not to use #

Variations #

Accessibility #

Additional considerations #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

Examples #

Properties #

Events #

Methods #

hide() => Promise<void> #

Returns #

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

Parameters #

Returns #

show() => Promise<void> #

Returns #

Slots #

Usage #

When to use #

When not to use #

Variations #

Accessibility #

Additional considerations #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

`hide() => Promise<void>` #

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

`show() => Promise<void>` #