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.
There are 2 types of cards for both desktop and mobile.
- 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
Desktop card
Mobile card
- 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
Desktop card
Mobile card
- 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
- For cards that contain a title link, you must include at the minimum the title and the description section
- For cards that do not contain a title link, you must include at the minimum the title, the description section, and 1 action link
- Card titles should be a maximum of 40 characters long
- Card descriptions 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)
- For cards with no title link, use either the divider line or an image/illustration, not both
- Card width can be customized to your needs by dragging the component in or out to increase or decrease the width
- Ensure you are using the grid system to size your cards
- Use a maximum of 3 cards per row for desktop designs
- See the below examples for more information
- The colours used in the card component should not be changed
- 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.
These examples use real content from Service Canada and DECD to show variations of how cards can be used within our grid system.
When developing a page that uses cards, update the heading level based on the content of your page to make sure card headings are in the correct order. For more information on Headings, view the typography section.
We added the cards component to the Extended GC Design library - DECD as it did not exist in the Canada.ca design system. We started with the Context-specific features pattern from the Canada.ca design system, which is the only card-type component. Based on our teams needs, we added in relevant sections to the card component as needed.