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 window

Usage

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

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

Make sure the colspan="" value matches the number of columns!

Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

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, Opens in new window

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

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

Edit this section, Opens in new window
Contact us, Opens in new window