Part of Components

Cards

A linked, rectangular container that facilitates navigation.

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

Compliance and guides for developing public facing websites and applications for the Government of Alberta.

Card with image

Pay your Immediate Roadside Sanctions (IRS) fine or request more time to pay.

Usage guidelines

Layout

  • Place cards on landing pages.
  • Use 2 or more cards on a page.
  • The order from top of the card to the bottom is as follows:
    • image
    • header
    • lead sentence

Size and positioning

Cards fit into a single row with 2 to 3 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 3 cards per row.

  • Content area padding: 24 pixels
  • Bottom and top margin: 24 pixels

Examples

Content guidelines

A card must have a 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.

  • 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.