Cards
Cards group related content or tasks to make it easier for users to scan, read, and find information.
Experience museums, galleries, live music and cultural events across NSW.
Discover national parks, coastal walks and natural attractions across NSW.
Show code Hide code
Usage
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.
Card types
Cards are styled according to their purpose:
- Highlight cards - Use to highlight important content of a related topic or area. For example, to draw attention to priority or key content on a Homepage.
- Content cards - Use to display all or larger groups of content options to your user. For example, on landing pages where it is used to show all content areas within that section of the site.
How to use
Cards should only display enough information to give a user context.
Guidance
- consider and choose text and visual elements carefully. Test your cards with minimal content and only add additional content or graphics where they give needed context to the user
- use headlines that set clear expectations about the content being linked to
- use one style of card per module
- feature one piece of information per card
- outline the main idea with the minimal possible information
- use short, comma-separated tags when more than one category applies. Stick to one or two words per tag to keep the layout clean and easy to scan.
- mix card styles within the same module
- overload with information as the card links to more detail
- add inline text links, the card itself is clickable and should link to a single piece of information, consider using content blocks in this instance
- use a single card component on its own.
- use long phrases or full sentences as tags — they create visual clutter and make content harder to scan.
- use a card layout to highlight a solo piece of information, consider callout
- use a card layout when the content requires in-line or multiple links, consider content blocks
- use a card layout when a large amount of text is needed to give users context
- use a card layout to anchor link to content lower down on the page, consider in-page navigation.
Building cards
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.
Tag: Helps users quickly scan and group related content by showing what category or theme it belongs to, for example, a topic, department, or service. Keep tags short and clear. Use single words where possible, like "Transport" or "Seniors." Avoid full sentences or long phrases, as they can clutter the layout. When showing multiple tags, separate each one with a comma.
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.
Visual elements
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:
- only use where it supports and re-enforces the content to the user
- only use when they can clearly show the difference between content and can be easily identified
- do not use for decorative purposes only.
Principles
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.
Behaviour
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.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.