Cards

Capability cards are made up of two elements: a text block and links. There could be one tertiary button or a list group.

Title sets the topic for the card. Has a character limit.
Body gives more context. It is optional. Has a character limit.
CTA enforces one ore more desired user actions. Use the overline variation of the list group hen there are multiple actions.
Background defines the space of the text block. It can be a solid color, transparent with an outline, or transparent without an outline.

When to Use

Use capability cards to display a list of related options (which will open on a different window) in an organized way. Capability cards show users related content on a single card.

When Not to Use

Don’t use capability cards when the actions or options listed are not related to each other or when you need to list more than six options. Use a general card or list instead.


Variation	Purpose	CTA	Background
List group	Use to display related options (six max).	Overline list group with more than one option	Fill, outline, float
Single action	Use to display one related option.	Overline list group with one option	Fill, outline, float

List Group

Use content with a solid background, a transparent background and an outline, or a transparent background only.

Single Action

Use content with a solid background, a transparent background and an outline, or a transparent background only.

Use a card container for standard spacing and sizing between a group of cards and a consistent behavior.

Spacing

Ensure that proper space is given between each card item.

Ensure that proper space is given between each card. Both the vertical and the horizontal space between cards, should be the same as the gutter of the layout.

Hierarchy

A proper hierarchy must be ensured for the elements that compose the card. The title, with highest level of importance, needs to give a clear and short idea of the topic of the card content. The list group should have items that are related to the card content (from one to six listed items), and it has to be placed near the body copy (top-aligned).

Alignment

The alignment of the components within the card depend of the type of component. The text is left-aligned, and the list group is left-spaced aligned.

Capability Card Do — Do keep the non variable padding between the text block and the list group. Keep the list group top aligned as well.

Capability cards don't — **Don’t** increase the padding between the text block and the list group or change its alignment to the bottom of the card container.

Cards don’t manage sizes like other components. Their width will adapt to the card container and the view-port size they are being displayed. Their height, on the other hand, will adapt to the content length. The card can become taller, but it should never be less than 200px in height.

Clickable Cards

Cards are components that by definition need to have an interaction. Actions can be exposed and show more clearly with CTAs inside the card or triggered by clicking anywhere on the card.

Capability cards can have from one to six clickable listed items. If the card has more than one action, the container should not be clickable, only the CTAs. On the other hand, if the card has only one action, clicking anywhere on the container, should trigger the same action as clicking the CTA inside it.

Flexible Height

All card types will match sizes across rows to the tallest card. Keep in mind that the card can become taller, but it should never be less than 200px in height. Links top hang.