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
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

Edit this section

Usage

Standard

Person insurances	RecommendedStor 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 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
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>

Edit this section

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)`

Edit this section

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

🐛 Add missing imports for global CSS Variables (fbf6f06), closes #582437

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)

14.5.0 (2022-02-15)

Code Refactoring

update generation (5844ce4)
reinstall (147df55)

14.3.0 (2022-02-09)

Features

🎸 Add comparison table (e7f7bcb), closes #514248
🎸 Add Comparison Table component (6cdda48), closes #514248

Bug Fixes

Set default cursor to table headings (945a1b7)
reinstall (aae7082)
Working on it (17da0cb)

Edit this section

CSS ComponentThe latest version of this package is: 14.23.0, Opens in new window

Table of Contents

Usage

Standard

Dual

Expandable

Tokens

Comparison Table tokens

Changelog

Change Log

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.18.3 (2022-04-13)

Bug Fixes

14.16.0 (2022-04-07)

Bug Fixes

14.13.0 (2022-04-06)

Bug Fixes

14.9.0 (2022-03-03)

Bug Fixes

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.5.0 (2022-02-15)

Code Refactoring

14.3.0 (2022-02-09)

Features

Bug Fixes