Use card layouts to present a high-level summary of content related to a single topic for users to navigate to.
Cards group information into meaningful sections, providing concise information in a condensed space to allow users to distinguish between content and find information easily. The information in a card outlines the main idea of a product, service, or piece of information, allowing a user to click through for further information.
Cards are styled according to their purpose:
Cards should only display enough information to give a user context. Do not use a card layout:
Cards are made up of foundation and content elements to show information to users. Some examples of these elements are included in our base card component.
The only mandatary foundations of a card are the container, headline and icon. All others shown are optional and can be adapted to meet user needs.
NOTE: Do not place single clickable elements (ie. buttons) inside a card, as whole component is clickable.
Container: Contains the content and identifies clickable area.
Label: Indicates the category of a topic or theme when a user needs to further group content. For example, departments, agencies, or services.
Date: Indicates how old the content is when this information is important to the user.
Headline: Provides a snapshot of the content.
Description: Provides further details where the headline alone may not be sufficient.
Icon: Arrow used to indicate a clickable component.
Using visual elements (such as images or icons) in cards allows for different content to stand out and provide additional context. It helps users visualise different pieces of information and quickly distinguish between content to find information easily.
Test your visual elements carefully:
Keep content concise
Cards allow users to scan content in order to find their required information quickly, therefore it is important to make the content concise. Ensure the headlines are brief and explicit about the content the cards link to. Intuitive headlines and copy help the user build a clear mental model of the content.
When a user interacts with a card it inverts colour to indicate to the user which card they are currently focused on and reinforces the clickable area.
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.