Skip to content

Quick Facts13.10.5

Quick Facts are a component listingfacts.


$ npm i @if-design-system/quick-facts@13.10.5

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

Edit this section

Overview

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

Usage

Responsive
Edit this section

Behaviours

Modifiers

Left

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

Left

Quick Facts can be left-aligned. Use the .left-class on the .if.quick-facts-container.

List

  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
List

Quick Facts can be lists. Use the .list-class on the .if.quick-facts-container.

Large
  • Jos laitteesi takuu on voimassa ja rikkoutuminen kuuluu takuun piiriin, ole ensin yhteydessä laitteen myyjään.
  • Jos takuu ei kata rikkoutumista, ota yhteyttä iTapsaan, Mcareen tai Fonumiin.
  • Kerro olevasi Ifin asiakas.
  • Huoltoliike kertoo, kannattaako laitteesi korjata ja antaa suullisen hinta-arvion.
  • Saat yhteistyökumppanin edut käyttöösi silloinkin, kun laitteesi korjaussumma jää alle omavastuun.
  • Jos päätät korjauttaa laitteesi ja korjauskustannukset ylittivät kotivakuutuksesi omavastuun, tee vahinkoilmoitus Omilla sivuilla korvauksen saamiseksi.
  • Jos laitetta ei saatu korjattua, niin mitä pitää tehdä?
Large List

Quick Facts can be large lists. Use the .list.large-class on the .if.quick-facts-container.

Numbers
  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
Numbered list

Quick Facts can be numbered lists. Use the .list.numbers-class on the .if.quick-facts-container.

Large
  • Jos laitteesi takuu on voimassa ja rikkoutuminen kuuluu takuun piiriin, ole ensin yhteydessä laitteen myyjään.
  • Jos takuu ei kata rikkoutumista, ota yhteyttä iTapsaan, Mcareen tai Fonumiin.
  • Kerro olevasi Ifin asiakas.
  • Huoltoliike kertoo, kannattaako laitteesi korjata ja antaa suullisen hinta-arvion.
  • Saat yhteistyökumppanin edut käyttöösi silloinkin, kun laitteesi korjaussumma jää alle omavastuun.
  • Jos päätät korjauttaa laitteesi ja korjauskustannukset ylittivät kotivakuutuksesi omavastuun, tee vahinkoilmoitus Omilla sivuilla korvauksen saamiseksi.
  • Jos laitetta ei saatu korjattua, niin mitä pitää tehdä?
Large Number List

Quick Facts can be large number lists. Use the .list.large.numbers-class on the .if.quick-facts-container.

Edit this section

Anatomy

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

Centered Quick Facts

  1. Title
  2. Description
  3. Icon
  • 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.

Left aligned Quick Facts

  1. Title
  2. Description
  3. Icon
  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss

Single list Quick Facts

  1. Icon
  2. Only a title
Edit this section

Specs

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

Centered Quick Facts
  • 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.

Left aligned Quick Facts
  • Försäkrad dygnet runt
  • Beloppet värdesäkras
  • 9 av 10 kunder förnyar hos oss
Single list Quick Facts
Edit this section

Implementation

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

      <li class="if quick-fact">
        <span class="if heading smallest">9 av 10 kunder förnyar hos oss</span>
        <p class="if">
          Våra stabila priser och bra service gör att våra kunder stannar kvar hos oss.
        </p>
      </li>
    </ul>
  </div>
</div>

Single list Quick Facts

<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

Contact us