Back to Quick Facts-guidelines

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

Quick Facts are a component listingfacts.

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/quick-facts@14.1.0

  • Försäkrad dygnet runt

    Livförsäkringen gäller dygnet runt i hela Norden och i upp till ett år utanför Norden.

  • Beloppet värdesäkras

    Försäkringsbeloppet räknas upp varje år, med motsvarande förändring av prisbasbeloppet.

  • 9 av 10 kunder förnyar hos oss

    Våra stabila priser och bra service gör att våra kunder stannar kvar hos oss.

Table of Contents

Edit this section, Opens in new window

Usage

Markup

  • Försäkrad dygnet runt

    Livförsäkringen gäller dygnet runt i hela Norden och i upp till ett år utanför Norden.

  • Beloppet värdesäkras

    Försäkringsbeloppet räknas upp varje år, med motsvarande förändring av prisbasbeloppet.

<div class="if block">
  <div class="if container">
    <ul class="if quick-facts">
      <li class="if quick-fact">
        <span class="if heading smallest">Försäkrad dygnet runt</span>
        <p class="if">
          Livförsäkringen gäller dygnet runt i hela Norden och i upp till ett år utanför Norden.
        </p>
      </li>
      <li class="if quick-fact">
        <span class="if heading smallest">Beloppet värdesäkras</span>
        <p class="if">
          Försäkringsbeloppet räknas upp varje år, med motsvarande förändring av prisbasbeloppet.
        </p>
      </li>
    </ul>
  </div>
</div>
  • Försäkrad dygnet runt

    Livförsäkringen gäller dygnet runt i hela Norden och i upp till ett år utanför Norden.

  • Beloppet värdesäkras

    Försäkringsbeloppet räknas upp varje år, med motsvarande förändring av prisbasbeloppet.

<div class="if block">
  <div class="if container">
    <ul class="if quick-facts left">
      <li class="if quick-fact">
        <span class="if heading smallest">Försäkrad dygnet runt</span>
        <p class="if">
          Livförsäkringen gäller dygnet runt i hela Norden och i upp till ett år utanför Norden.
        </p>
      </li>
      <li class="if quick-fact">
        <span class="if heading smallest">Beloppet värdesäkras</span>
        <p class="if">
          Försäkringsbeloppet räknas upp varje år, med motsvarande förändring av prisbasbeloppet.
        </p>
      </li>
    </ul>
  </div>
</div>

Single list Quick Facts

  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
<div class="if block">
  <div class="if container">
    <ul class="if quick-facts list">
      <li class="if quick-fact">
        Försäkrad dygnet runt
      </li>
      <li class="if quick-fact">
        Beloppet värdesäkras
      </li>
      <li class="if quick-fact">
        9 av 10 kunder förnyar hos oss
      </li>
    </ul>
  </div>
</div>
  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
<div class="if block">
  <div class="if container">
    <ul class="if quick-facts list large">
      <li class="if quick-fact">
        Försäkrad dygnet runt
      </li>
      <li class="if quick-fact">
        Beloppet värdesäkras
      </li>
      <li class="if quick-fact">
        9 av 10 kunder förnyar hos oss
      </li>
    </ul>
  </div>
</div>
  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
<div class="if block">
  <div class="if container">
    <ul class="if quick-facts list numbers">
      <li class="if quick-fact">
        Försäkrad dygnet runt
      </li>
      <li class="if quick-fact">
        Beloppet värdesäkras
      </li>
      <li class="if quick-fact">
        9 av 10 kunder förnyar hos oss
      </li>
    </ul>
  </div>
</div>
  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
<div class="if block">
  <div class="if container">
    <ul class="if quick-facts list large numbers">
      <li class="if quick-fact">
        Försäkrad dygnet runt
      </li>
      <li class="if quick-fact">
        Beloppet värdesäkras
      </li>
      <li class="if quick-fact">
        9 av 10 kunder förnyar hos oss
      </li>
    </ul>
  </div>
</div>
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.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.0.0 (2021-08-25)

chore

BREAKING CHANGES

  • 🧨 We are removing IE11 support

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 USPs component is now renamed to Quick Facts

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.29.0 (2020-09-03)

Features

  • 🎸 Left align the USPs checkmarks in responsive views (62ce161)

6.17.2 (2020-05-25)

Bug Fixes

  • 🐛 Fix IE11 alignment issues when we have more than three usps (3481eb2)

6.16.1 (2020-05-20)

Bug Fixes

  • 🐛 Fix routing for dev server (295db6e)

6.15.6 (2020-05-19)

Bug Fixes

  • 🐛 Decrease spacing between usps in responsive view (ea38814)

6.11.5 (2020-04-23)

Bug Fixes

  • 🐛 Fix margin and padding issues in list based components (5c8fc57)

6.11.2 (2020-04-22)

Bug Fixes

  • 🐛 Clean up the margin/padding mess I made with lists (a107891)

6.11.0 (2020-04-22)

Bug Fixes

  • 🐛 Add sr only text for footer logo link (2971dd9)

6.4.2 (2020-04-03)

Bug Fixes

  • 🐛 Change min-width none to initial (f661bea)
  • 🐛 Remove misuse of unset, none, auto and initial (87624d7)
  • 🐛 Use initial instead of none and unset (d75bc65)
  • 🐛 use min-height none instead of unset (f6c335b)

6.0.0 (2020-03-23)

Bug Fixes

  • 🐛 Layout issues for usps (188801b)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.120 (2020-02-17)

Features

  • 🎸 Adjust usps to new baseline grid (1646151)

5.0.1-alpha.113 (2020-01-22)

Features

  • 🎸 Add support for usp scss and less (b687394)

5.0.1-alpha.112 (2020-01-22)

Bug Fixes

  • 🐛 Remove margin and dead code, use custom icon (c7627bc)

5.0.1-alpha.109 (2020-01-20)

Features

  • 🎸 Add support for single list usp and update documentatio (98ff1c0)

Bug Fixes

13.0.0 (2021-08-25)

chore

BREAKING CHANGES

  • 🧨 We are removing IE11 support

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 USPs component is now renamed to Quick Facts

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.29.0 (2020-09-03)

Features

  • 🎸 Left align the USPs checkmarks in responsive views (62ce161)

6.17.2 (2020-05-25)

Bug Fixes

  • 🐛 Fix IE11 alignment issues when we have more than three usps (3481eb2)

6.16.1 (2020-05-20)

Bug Fixes

  • 🐛 Fix routing for dev server (295db6e)

6.15.6 (2020-05-19)

Bug Fixes

  • 🐛 Decrease spacing between usps in responsive view (ea38814)

6.11.5 (2020-04-23)

Bug Fixes

  • 🐛 Fix margin and padding issues in list based components (5c8fc57)

6.11.2 (2020-04-22)

Bug Fixes

  • 🐛 Clean up the margin/padding mess I made with lists (a107891)

6.11.0 (2020-04-22)

Bug Fixes

  • 🐛 Add sr only text for footer logo link (2971dd9)

6.4.2 (2020-04-03)

Bug Fixes

  • 🐛 Change min-width none to initial (f661bea)
  • 🐛 Remove misuse of unset, none, auto and initial (87624d7)
  • 🐛 Use initial instead of none and unset (d75bc65)
  • 🐛 use min-height none instead of unset (f6c335b)

6.0.0 (2020-03-23)

Bug Fixes

  • 🐛 Layout issues for usps (188801b)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.120 (2020-02-17)

Features

  • 🎸 Adjust usps to new baseline grid (1646151)

5.0.1-alpha.113 (2020-01-22)

Features

  • 🎸 Add support for usp scss and less (b687394)

5.0.1-alpha.112 (2020-01-22)

Bug Fixes

  • 🐛 Remove margin and dead code, use custom icon (c7627bc)

5.0.1-alpha.109 (2020-01-20)

Features

  • 🎸 Add support for single list usp and update documentatio (98ff1c0)

5.0.1-alpha.87 (2019-12-04)

Bug Fixes

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

5.0.1-alpha.53 (2019-11-13)

Features

  • 🎸 Add IE11 support for teasers, crosslinks, usps +footer (b36949b)

5.0.1-alpha.50 (2019-11-12)

Bug Fixes

  • 🐛 Remove padding for usp main documentation page (dd414ed)

Features

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