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.

Preview

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

A title When you buy insurance online Read more
Focused Info Card

2px dottet outline with 2px offset and color BL 1, BLUE.

A title When you buy insurance online Read more
Focused Info Card

2px dottet outline with 2px offset and color BL 1, BLUE.

Hover

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

A title When you buy insurance online
Hovered info card
A title When you buy insurance online
Hovered info card

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
20% When you buy insurance online Calculate your price
  1. Card with background
  2. Title
  3. Text
  4. Link text
  5. Arrow
20% When you buy insurance online Calculate your price
  1. Card with background
  2. Title
  3. Text
  4. Link text
  5. Arrow
20% When you buy insurance online Calculate your price
  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