Back to Comparison Table-guidelines
CSS ComponentThe latest version of this package is: 14.23.0, Opens in new window
The Comparison Table Component is used to compare insurance products.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/comparison-table@14.23.0
Person insurances
|
RecommendedStor bil
|
HelförsÀkring
|
HalvförsÀkring
|
TrafikXtra
|
TrafikförsÀkring
|
||||
---|---|---|---|---|---|---|---|---|---|
Trafik personskada | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | This is included in the product: TrafikXtra | |||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Stöld av bil | This is included in the product: Stor |
Table of Contents
Edit this section, Opens in new windowUsage
Standard
Person insurances
|
RecommendedStor bil
|
HelförsÀkring
|
HalvförsÀkring
|
TrafikXtra
|
TrafikförsÀkring
|
||||
---|---|---|---|---|---|---|---|---|---|
Trafik personskada | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | This is included in the product: TrafikXtra | |||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Stöld av bil | This is included in the product: Stor |
<table class="if comparison-table">
<thead class="if">
<tr class="if">
<th class="if product-title-holder">
<div class="if insurance-header"><span class="if product-title">Product title</span></div>
</th>
<th class="if">
<div class="if insurance-header">
<span class="if is-recommended">Recommended</span><span class="if title">Title</span>
</div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
</tr>
</thead>
<tbody class="if">
<tr class="if">
<td class="if">Trafik personskada</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Stor</span>
</td>
<td class="if spacer"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: HelförsÀkring</span>
</td>
<td class="if spacer"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: HalvförsÀkring</span>
</td>
<td class="if spacer"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: TrafikXtra</span>
</td>
<td class="if spacer"></td>
<td class="if"></td>
</tr>
âŠ
</tbody>
</table>
Dual
Recommended
|
|||||
---|---|---|---|---|---|
Person insurances
|
Stor bil
|
HelförsÀkring
|
HalvförsÀkring
|
TrafikXtra
|
|
Trafik personskada | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | This is included in the product: TrafikXtra | |
Trafik personskada | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | This is included in the product: TrafikXtra | |
Stöld av bil | This is included in the product: Stor |
<table class="if comparison-table dual">
<thead class="if">
<tr class="if">
<th class="if"></th>
<th class="if insurance-header-holder" colspan="2">
<div class="if insurance-header">
<span class="if is-recommended">Recommended</span>
</div>
</th>
<th class="if spacer"></th>
<th class="if insurance-header-holder" colspan="2"></th>
</tr>
<tr class="if">
<th class="if product-title-holder">
<div class="if insurance-header"><span class="if product-title">Title</span></div>
</th>
<th class="if">
<div class="if insurance-header">
<span class="if title">Title</span>
</div>
</th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
<th class="if">
<div class="if insurance-header"><span class="if title">Title</span></div>
</th>
</tr>
</thead>
<tbody class="if">
<tr class="if">
<td class="if">Trafik personskada</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: Stor</span>
</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: HelförsÀkring</span>
</td>
<td class="if spacer"></td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: HalvförsÀkring</span>
</td>
<td class="if">
<span role="presentation" class="if included"></span
><span class="if axe sr-only">This is included in the product: TrafikXtra</span>
</td>
</tr>
âŠ
</tbody>
</table>
Expandable
Person insurances
|
RecommendedStor bil
|
HelförsÀkring
|
HalvförsÀkring
|
TrafikXtra
|
TrafikförsÀkring
|
||||
---|---|---|---|---|---|---|---|---|---|
Trafik personskada | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | This is included in the product: TrafikXtra | |||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Trafik annans egendom | This is included in the product: Stor | This is included in the product: HelförsÀkring | This is included in the product: HalvförsÀkring | ||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. | |||||||||
Stöld av bil | This is included in the product: Stor | ||||||||
Du fĂ„r ersĂ€ttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden, vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre belopp. |
<table class="if comparison-table expandable">
<thead class="if">
<tr class="if">
<th class="if product-title-holder">
<div class="if insurance-header"><span class="if product-title">Person insurances</span></div>
</th>
<th class="if">
<div class="if insurance-header">
<span class="if is-recommended">Recommended</span><span class="if title">Stor bil</span>
</div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">HelförsÀkring</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">HalvförsÀkring</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">TrafikXtra</span></div>
</th>
<th class="if spacer"></th>
<th class="if">
<div class="if insurance-header"><span class="if title">TrafikförsÀkring</span></div>
</th>
</tr>
</thead>
<tbody class="if">
<tr class="if expandable">
âŠ
</tr>
<tr class="if">
<td class="if" colspan="10">
Du fÄr ersÀttning för dina saker som skadas eller förloras vid inbrott eller skadegörelse i bostaden,
vattenlĂ€ckage, brand eller blixtnedslag. FörsĂ€kringsbeloppet Ă€r 1,5 miljoner kr om du inte sjĂ€lv âvalt ett högre
belopp.
</td>
</tr>
</tbody>
</table>
Tokens
Comparison Table tokens
Name | Value | Is aliased in |
---|---|---|
$ids-comparison-table-cell-border |
none |
|
$ids-comparison-table-background-color-default |
transparent |
|
$ids-comparison-table-background-color-vertical |
rgba(232,224,217,0.2) |
|
$ids-comparison-table-background-color-intersection |
rgba(232,224,217,0.6) |
|
$ids-comparison-table-background-color-horizontal |
rgba(232,224,217,0.2) |
|
$ids-comparison-table-spacer-min-width |
1.25rem |
|
$ids-comparison-table-title-holder-min-width |
20rem |
|
$ids-comparison-table-title-font-size |
1rem |
|
$ids-comparison-table-header-min-height |
4rem |
|
$ids-comparison-table-expandable-padding-left |
4rem |
|
$ids-comparison-table-expandable-background-position |
left 1rem center |
|
$ids-comparison-table-expandable-background-size |
2rem |
|
$ids-comparison-table-expandable-background-image-closed |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall down%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%230054f0%27 stroke=%27%230054f0%27%3E%3Cpolyline fill=%27none%27 stroke=%27%230054f0%27 stroke-miterlimit=%2710%27 points=%2722,13 16,19 10,13 %27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-comparison-table-expandable-background-image-opened |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall up%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%230054f0%27 stroke=%27%230054f0%27%3E%3Cpolyline fill=%27none%27 stroke=%27%230054f0%27 stroke-miterlimit=%2710%27 points=%2710,19 16,13 22,19 %27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-comparison-table-expanded-padding-right |
3rem |
|
$ids-comparison-table-expanded-background-color |
rgb(250, 249, 247) |
|
$ids-comparison-table-included-dimension |
1.25rem |
|
$ids-comparison-table-included-background-color |
rgb(0, 84, 240) |
|
$ids-comparison-table-included-background-size |
10px |
|
$ids-comparison-table-included-background-image |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%274%27 fill=%27%23faf9f7%27 stroke=%27%23faf9f7%27%3E%3Cpolyline points=%272 16 11 25 30 6%27 fill=%27none%27 stroke=%27%23faf9f7%27 stroke-miterlimit=%2710%27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-comparison-table-recommended-font-size |
1rem |
|
$ids-comparison-table-recommended-color-text |
rgb(173, 66, 0) |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385), closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9), closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and packages (349fda4), closes #586063. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.13.0 (2022-04-06)
Bug Fixes
- đ Encode data-value in design token documentation (85737c6)
14.9.0 (2022-03-03)
Bug Fixes
- đ Add missing CHANGELOG.md in files (3e4c089)
Miscellaneous chores
- đ€ Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
-
đ Add missing imports of typography CSS variables (e716c65), closes #559412
-
reinstall (d425056)
-
bootstrap (9a713df)
-
merge (2b1c5f1)
-
reinstall (5221600)