-
Notifications
You must be signed in to change notification settings - Fork 1
Cards
rsamaroo-ss edited this page Jan 29, 2022
·
23 revisions
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.
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
- 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 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
- 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
- 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
These examples use real information from existing Service Canada and DECD content and show variations of how cards can be used within our grid system.