Card
A card is used as a call to action (CTA) to drive traffic to different web pages. Though each card represents a single idea, we typically use cards in groups of at least two. the cards within a card deck should all link to the same type of pages (e.g., news stories).
Component(s) you might want to use with this one:
- You must use the Card deck component regardless of the number of cards you're using.
Design options
The Card component provides a CTA encouraging users to click through to learn more. Cards may include all or some of the following:
- Title
- Subtitle
- Overview (also known as body text or blurb)
- Category
- Call to action (a link, with or without a button)
- Date
- Image
The title and call to action fields are mandatory; the other fields are optional.
Cards can be displayed with equal or varying heights. The Card deck component determines how the cards are displayed.
Guidelines
- The cards within a card deck are equal in rank.
- A card must contain a hyperlink. If linking to an external web site or a PDF, check link target to open in a new tab.
- Keep the text brief. The point of a card is to entice the user to click through to more information on a topic.
- Crop all images to the same aspect ratio when selecting the card deck equal height option. The vignette setting is recommended.
- Do include a button in a card if:
- the card has a heading, subheading and a blurb
- the card has a heading and a blurb
- The simple button style is recommended.
- Don't include a button if you want the entire card to be clickable. In the Call to action section of the Text tab, ensure the Button text is blank.
Accessibility
- Text should be clear, succinct and written in plain language.
- Button text should be clear and actionable.
- Include image titles and alt text unless the image is decorative. Learn more about decorative images.
Title
Overview (blurb): Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Equal height vs. masonry
To see the difference between the equal height and masonry settings, visit the Card deck page.
Helpful tips
- If the page you're linking to includes an image (e.g., hero banner), use that same image for your card.
- If the card doesn't have an image, you may opt to use a coloured background. This is found on the Settings tab. Make sure to check Hide border.
- The font colour will adjust automatically for coloured backgrounds.
- Do not use multiple colours together.
Training
Cards and card decks are covered in the Heroes and Cards training sessions. This training is reserved for units whose websites use this component.
Need support?
The Web team is here to help.