Skip to content

Info card13.10.5

Info Card is used to contain promotional or emphasized information and is displayed either within a context, or as a full width layout block.


$ npm i @if-design-system/info-card@13.10.5

Edit this section

Overview

If Villaförsäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.

En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller vattenskada eller att värmepannan går sönder. I villaförsäkringen ingår reseskydd och försäkring för de personliga saker du och familjen äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.

Edit this section

Variations

Type Purpose
As a list item Operates as in a list with two or three Info Cards
Standalone Is normally used in text flow, with text on the other side
Edit this section

Usage

Principles

  • Only use a short meaningful title and text
  • Do not place links inside of an Info Card
  • Never use more than three (3) Info Cards in a list
  • Standalone Info Cards cannot be put next to each other
  • Do not overuse the Info Cards

Backgrounds

The background color of each Info Card is changed based on the parent block element.

Info card, BE 5 background
Info card, BE 4 background
Info card, BE 3 background
Info card, BE 1 background

Placement

A standalone Info Card can be placed to the right or left of the text.

If Villaförsäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.

En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller vattenskada eller att värmepannan går sönder. I villaförsäkringen ingår reseskydd och försäkring för de personliga saker du och familjen äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.

If Villaförsäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.

En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller vattenskada eller att värmepannan går sönder. I villaförsäkringen ingår reseskydd och försäkring för de personliga saker du och familjen äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.

Edit this section

Behaviours

Interactions

These interactions only applies to Info Cards that are links.

Focus

Focused Info Card

3px outline with 1px offset and color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Focused Info Card

3px outline with 1px offset and color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Hover

When the Info Card is hovered, the arrow is animated.

Modifiers

Full

If you want to let the info card be full width of the parent container, use the .full- flag.

Info card, BE 5 background

Number title

If you want to emphasize a number, use the .number-flag on the .title element. The font size is somewhat increased to emphasize the number.

Info card, BE 5 background
<div class="if info-card full" role="presentation">
  <span class="if title number">
    20%
  </span>
  <span class="if text">When you buy insurance online</span>
</div>
Edit this section

Accessibility

When the Info Card is not used as a link, and not part of a context (purely standalone or full width) remember to have the role="presentation" on the element.

If it is part of a context, use the aside element.

<div class="if info-card dark" role="presentation">
  <span class="if title">
    Best satisfied customers
  </span>
  <span class="if text">
    9 out of 10 customers renew with us. Our stable prices and good service mean that our customers stay with us.
  </span>
</div>
<aside class="if info-card dark">
  <span class="if title">
    Best satisfied customers
  </span>
  <span class="if text">
    9 out of 10 customers renew with us. Our stable prices and good service mean that our customers stay with us.
  </span>
</aside>
Edit this section

Anatomy

  1. Card with background
  2. Title
  3. Text
  1. Card with background
  2. Title
  3. Text
  1. Card with background
  2. Title
  3. Text
  1. Card with background
  2. Title
  3. Text
  4. Link text
  5. Arrow
  1. Card with background
  2. Title
  3. Text
  4. Link text
  5. Arrow
  1. Card with background
  2. Title
  3. Text
  4. Link text
  5. Arrow
Edit this section

Specs

Info card, standalone
Edit this section

Implementation

In a list

<ul class="if cards info two|three">
  <li class="if info-card" role="presentation">
    <span class="if title [number]">
      A title
    </span>
    <span class="if text">When you buy insurance online</span>
  </li>
  <li class="if info-card darkest" role="presentation">
    <span class="if title [number]">
      A title
    </span>
    <span class="if text">When you buy insurance online</span>
  </li>
  <li class="if info-card dark" role="presentation">
    <span class="if title [number]">
      A title
    </span>
    <span class="if text">When you buy insurance online</span>
  </li>
</ul>
<ul class="if cards info two|three">
  <li class="if" role="presentation">
    <a href="#" class="if info-card">
      <span class="if title [number]">
        A title
      </span>
      <span class="if text">When you buy insurance online</span>
    </a>
  </li>
  <li class="if darkest" role="presentation">
    <a href="#" class="if info-card">
      <span class="if title [number]">
        A title
      </span>
      <span class="if text">When you buy insurance online</span>
    </a>
  </li>
  <li class="if dark" role="presentation">
    <a href="#" class="if info-card">
      <span class="if title [number]">
        A title
      </span>
      <span class="if text">When you buy insurance online</span>
    </a>
  </li>
</ul>

Standalone

<aside class="if info-card">
  <span class="if title [number]">
    A title
  </span>
  <span class="if text">When you buy insurance online</span>
</aside>
<a href="#" class="if info-card">
  <span class="if title [number]">
    A title
  </span>
  <span class="if text">When you buy insurance online</span>
</a>

Full width

<div class="if info-card full" role="presentation">
  <span class="if title [number]">
    A title
  </span>
  <span class="if text">When you buy insurance online</span>
</div>
Edit this section

Contact us