Overview
Cards provide an added visual aid when you need to link to featured web pages or content. They help bring attention to specific information and must be linked.
Card with no image
Card with image
Usage guidelines
Layout
- Place featured cards on landing pages over a medium grey band.
- Use 2 or more cards on a page.
- The order from top of the card to the bottom is as follows:
- image
- page title/header
- lead
Size and positioning
Cards fit into a single row with 2 to 4 cards side-by-side. A single row of cards becomes a column on smaller screen sizes. You may also add multiple rows of cards to a page, and each row still uses between 2 to 4 cards per row.
- Content area padding: 24 pixels
- Bottom and top margin: 24 pixels
Examples
- Emergency management training – Course catalogue
- Agri-News
- Hydrogen development
- Historic sites, museums and archives
Content guidelines
A card must have a page title or header and a lead sentence enclosed within a container. These elements are automatically added to the card when a card links to a web page.
- page title or header – 70 characters with spaces (mandatory)
- lead sentence – 140 characters with spaces
Images (16:9) are optional. See the images page for proper usage and guidelines before requesting to insert an image.
Was this page helpful?
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.