|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|
- 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
The background color of each Info Card is changed based on the parent block element.
A standalone Info Card can be placed to the right or left of the text.
When the Info Card is hovered, the arrow is animated.
If you want to let the info card be full width of the parent container, use the
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>