Tables Ready
This template shows how to build a simple responsive view that utilizes Table component. 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"
skip-to-id="#content"
contact="Ota yhteyttä"
current-href="/">
</duet-header>
<duet-layout id="content">
<div slot="main">
<duet-tab-group>
<duet-tab label="Multi-body">
<duet-card padding="large" heading="Multi-body table" heading-level="h1">
<duet-table breakpoint="large" sticky sticky-distance="without-links">
<table>
<thead>
<tr>
<th>Sijoituskohde</th>
<th>Arvopäivä</th>
<th>Osuuden arvo</th>
<th>Osuuden määrä</th>
<th class="duet-text-right">Saaston määrä</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5">Varainhoitosalkut</th>
</tr>
<tr>
<td><duet-link>Varainhoito Tasapainoinen ›</duet-link></td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="5">Sijoitussalkut</th>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="5">Eläkesuunnitelma</th>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.04.2018</td>
<td>10,32 €</td>
<td>147,31 kpl</td>
<td class="duet-text-right">1 520,16 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="duet-font-weight-semi-bold">Total</td>
<td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">16 721,76 €</td>
</tr>
</tfoot>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Plain with buttons">
<duet-card padding="large" heading="Plain with buttons">
<duet-table breakpoint="medium" variation="plain">
<table>
<thead>
<tr>
<th>Valtuuttaja</th>
<th>Salkun nimi</th>
<th>Tuoteryhmä</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<duet-link url="/">Antti Ahola ›</duet-link>
</td>
<td class="foo">Antin salkku<br /><duet-link url="/">Siirry salkkuun ›</duet-link></td>
<td>Rahastot</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Poista
</duet-button>
</td>
</tr>
<tr>
<td>
<duet-link url="/">Metallitarvike Oy ›</duet-link>
</td>
<td>390-677889-H<br /><duet-link url="/">Siirry salkkuun ›</duet-link></td>
<td>Vakuutussijoitukset</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Poista
</duet-button>
</td>
</tr>
</tbody>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Striped with buttons">
<duet-card padding="large" heading="Striped with buttons">
<duet-table breakpoint="medium">
<table>
<thead>
<tr>
<th>Valtuutettu</th>
<th>Salkun nimi</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
Hermanni Mikkola<br />
10.10.1999
</td>
<td class="foo">Antin salkku<br /><duet-link url="/">Siirry salkkuun ›</duet-link></td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Poista
</duet-button>
</td>
</tr>
<tr>
<td>
Jukka-Pekka Routakorpi-Salomaa<br />
10.11.1988
</td>
<td>
Justiinan ja Jukka-Pekan yhteinen salkku 1234<br /><duet-link url="/">Siirry salkkuun ›</duet-link>
</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Poista
</duet-button>
</td>
</tr>
<tr>
<td>
Veera Mikkola<br />
01.01.2001
</td>
<td>Vapun rahastot<br /><duet-link url="/">Siirry salkkuun ›</duet-link></td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Poista
</duet-button>
</td>
</tr>
</tbody>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Plain with footer">
<duet-card padding="large" heading="Plain with footer">
<duet-table variation="plain">
<table>
<thead>
<tr>
<th>Nostokohde</th>
<th>Arvopäivä</th>
<th>Nosto-%</th>
<th class="duet-text-right">Nosto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>32 %</td>
<td class="duet-text-right">-500,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="duet-font-weight-semi-bold">Yhteensä</td>
<td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">-2 500,00 €</td>
</tr>
</tfoot>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Sticky header">
<duet-card padding="large" heading="Sticky header">
<duet-table variation="plain" sticky sticky-distance="without-links">
<table>
<thead>
<tr>
<th>Item</th>
<th>Number</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00 €</td>
</tr>
</tbody>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Comparison">
<duet-card padding="large" heading="Comparison table" heading-level="h1">
<duet-table margin="none" breakpoint="none-scrollable">
<table>
<colgroup>
<col />
<col />
<col class="duet-selected-column" />
<col />
<col />
</colgroup>
<thead>
<tr>
<th width="45%" style="min-width: 180px">Vakuutus</th>
<th class="duet-text-center">Loisto­kasko</th>
<th class="duet-text-center duet-color-secondary">Laaja kasko</th>
<th class="duet-text-center">Perus­kasko</th>
<th class="duet-text-center">Osa­kasko</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<duet-collapsible heading="Eläintörmäys" margin="none">
Eläintörmäysvakuutus korvaa, jos ajoneuvo törmää muuhun eläimeen kun hirvieläimeen. Väistämisestä aiheutuneet vahingot korvataan kolarointi­vakuutuksesta.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Hirvivahinko" margin="none">
Hirvivahinkovakuutus korvaa, jos ajoneuvo törmää hirven, poron, kauriin tai peuran kanssa. Väistämisestä aiheutuneet vahingot korvataan kolarointi­vakuutuksesta.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Palo" margin="none">
Palovakuutus korvaa irtipäässeen tulen tai ajoneuvon suoraan osuneen salamaniskun aiheuttamat vahingot.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Varkaus" margin="none">
Varkausvakuutus korvaa ajoneuvon, jos se varastetaan. Vakuutus korvaa myös ajoneuvon vauriot, jos se vahingoittuu varkauden, luvattoman käytön tai näiden yrityksen yhteydessä. Korvaus maksetaan, jos ajoneuvo on ollut lukittuna tai lukitussa tilassa. Varkaus pitää aina ilmoittaa poliisille.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Ilkivalta" margin="none">
Ilkivaltavakuutus korvaa tahallisesta vahingonteosta aiheutuneita vahinkoja. Ilkivallasta on tehtävä rikosilmoitus. Toisella ajoneuvolla aiheutettua vahinkoa ei korvata ilkivalta­vakuutuk­sesta.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Rahoitus" margin="none">
Rahoitusvakuutus liitetään kaskoon, jos ajoneuvon omistajana on rahoitusyhtiö tai autoliike tai ajoneuvo on leasingvuokrattu. Rahoitusvakuutuksesta voidaan korvata ajoneuvon menettäminen tai vaurioituminen ajoneuvon omistajalle, jos korvaus muuten evättäisiin tai sitä kohtuul­listet­taisiin.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Rahoitusvakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Luonnonilmiö" margin="none">
Luonnonilmiövakuutus korvaa, jos myrsky kaataa puun ajoneuvon päälle, raesade vahingoittaa ajoneuvon ulkopintoja tai kun tulvaveden nousu tai myrskyn irrottama esine aiheuttaa vahinkoa pysähtyneelle ajoneuvolle.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Rahoitusvakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Kolarointi" margin="none">
Kolarointivakuutus eli törmäysvakuutus korvaa vahingot, jos ajoneuvo törmää, suistuu tieltä, kaatuu tai putoaa.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Kolarointivakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Bonusturva" margin="none">
Bonusturva varmistaa, että bonukset eivät laske, vaikka kolari sattuisi. Ansaitset bonusturvan vahingottomalla ajolla.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Bonusturva sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Bonusturva sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Bonusturva ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Bonusturva ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Lasi" margin="none">
Lasivakuutus korvaa vauriot, jotka aiheutuvat suoraan ulkoapäin ikkunalasiin osuneesta iskusta. Esimerkiksi kivi sinkoutuu tuulilasiin ja rikkoo sen.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Lasivakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Lasivakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Lasivakuutus ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Lasivakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Laaja sijaisauto" margin="none">
Laajan sijaisautovakuutuksen turvin saat käyttöön sijaisauton, kun oma auto on korjattavana matkan keskeyttävän teknisen vian tai vakuutuksesta korvattavan kaskovahingon takia. Sijaisautona korvataan vastaava, enintään C-kokoluokan henkilöauto tai enintään 9m3 pakettiauto.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Laaja sijaisautovakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
</tbody>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Plain with pagination">
<duet-card padding="large" heading="Plain with footer">
<duet-table variation="plain">
<table>
<thead>
<tr>
<th>Nostokohde</th>
<th>Arvopäivä</th>
<th>Nosto-%</th>
<th class="duet-text-right">Nosto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>32 %</td>
<td class="duet-text-right">-500,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="duet-font-weight-semi-bold">
<duet-pagination></duet-pagination>
</td>
</tr>
</tfoot>
</table>
</duet-table>
</duet-card>
</duet-tab>
</duet-tab-group>
</div>
</duet-layout>
<duet-footer logo-href="/" language="fi"></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 contact menu items
header.contactItems = [
{ label: "Kysy lisätietoja", href: "mailto:minna.poikela@lahitapiola.fi" },
{ label: "Yhteystiedot", href: "/yhteystiedot/" }
]
// Set label and href for session link
header.session = {
label: "Kirjaudu sisään",
href: "#signin",
type: "signin"
}
// Set footer main items
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 footer help menu
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.