Cards

Cards present a short summary of a much larger and more complex topic within an interactive container. Clicking on a card takes you to a new page that provides the full details on the topic.

Anatomy

There are 2 types of cards for both desktop and mobile:

1. Cards that contain a title link

• The entire card is clickable
• There is still the option of adding 1 or 2 action links that would be clickable as well and link to separate pages than that of the main card
• The recommended card option, as the greater tap target increases accessibility

2. Cards that do not contain a title link

• The entire card is NOT clickable; only the action link(s) are
• There is a divider included in this version to better separate the content – remove the divider if you are keeping the image section in the card, as both are not needed

INSERT IMAGE

Usage

When to use

• To present a summary and link to additional details and information
• When you have multiples of the same content – an individual card is typically a member of a collection of similar cards, not a single card in isolation.

When NOT to use

• When you need to emphasize the order of the content (tables organize and order content better)
• When you have more than two action links
• When you have inline links (i.e., links within description text)
• For the sole purpose of styling a single block of content

How to use

• Each card should only relate to one concept/idea
• Card description should be short (2-3 sentences) as it is meant to be a summary of information

Customizing cards

• The card content can be customized to your needs by removing sections that are not needed (e.g., if you don't need a label, remove the label layer in the component)
• When adding a label with a long character count, ensure you have at least 24px of white space between the left side of the label and the left edge of the card by breaking the text into 2 lines.
• For cards with no title link, use either the divider line or an image/illustration, not both

Examples

These examples use real content from Service Canada and DECD to show variations of how cards can be used within our grid system.

Desktop – Cards with title link

Desktop – Cards with no title link

Mobile – Cards with title link

Mobile – Cards with no title link