Back to components

Info card

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

Table of Contents

Edit this section, Opens in new window

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

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

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

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 " role="presentation">
  <span class="if title number">
    20%
  </span>
  <span class="if text">When you buy insurance online</span>
</div>
Edit this section, Opens in new window

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

Specs

Info card, standalone
Edit this section, Opens in new window
Contact us, Opens in new window