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 windowOverview
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.
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 |
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.
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
- 20% When you buy insurance online
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.
Behaviours
Interactions
Focus
2px
dottet outline
with 2px
offset and
color BL 1, BLUE.
2px
dottet outline
with 2px
offset and
color 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.
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.
<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>
Anatomy
- Card with background
- Title
- Text
- Card with background
- Title
- Text
- Card with background
- Title
- Text
As links
- Card with background
- Title
- Text
- Link text
- Arrow
- Card with background
- Title
- Text
- Link text
- Arrow
- Card with background
- Title
- Text
- Link text
- Arrow