Cards
Cards give a brief summary of content and display information in an organised way, making it easier for the audience to find information.
When to use cards
By design, cards are clickable and link to another single piece of content.
Do
- Use cards on landing and standard pages.
- Landing pages support 2, 3 and 4 row card displays and side-scrolling cards – 4 or more cards. The 4 row card variant should only be used in a full width section on landing pages.
- 2 or 3 card row displays and side-scrolling cards work best on standard pages. 4 per row can look crowded and make the card content hard to read.
- Limit of 6 image cards per section and a total maximum limit of 12 cards per section, however it's recommended to have fewer than 12. If you need to include many cards on a page, create new sections within the page with descriptive sub-headings for each section.
- Do use the highlight line (brand accent at the top of card) sparingly to bring attention to particular cards.
- Use only on the first row of a grid of cards (2, 3, 4 columns).
- If there is only one row of cards, it can be used across all cards (2, 3, 4 columns).
- Do use cards to group related information on a topic. Mixing too many different topics in a card block can be confusing for the audience.
- Card heading should be short and to the point to give the audience a clear understanding of where they are linking to. Try to keep your heading length to a maximum of 50 characters.
- The card description should be a short descriptive sentence to provide further context to the heading. Recommended length of the description is a maximum of 200 characters.
- Only use cards when they are linking to another single piece of content.
- Try to keep the length of each description similar if using multiple cards in a row.
- Do use appropriate images or pictograms to support the content in the card.
Don't
- Don't use cards for information that is not related or does not belong together.
- Don't overcrowd the card with too much information or too many elements, as it can make the card cluttered and difficult to read.
- Don't mix different card types in a single block. All cards in a block should have the same formatting, for example all images, not an image on card 1 and a pictogram on card 2.
- Don't add cards just to create visual interest on the page.
- Don't add the highlight line to all cards in a grid (2, 3, 4 columns). Only use the highlight on the first row.
- Don't add cards to highlight important messaging. Use a callout instead.
- Don't forget to consider how cards will look and function on different screen sizes and devices. Use a mobile simulator to check the card display on different screen resolutions.
- Don't use low-quality or inappropriate images or pictograms, as they can detract from the audience experience.
- Don't add hyperlinks or buttons in the card description. The card itself is clickable and links to another single piece of content.
How to add cards
- From drop down Add Cards
- Select the Style (Mandatory).Options are:
- Brand White (default) – brand dark on hover
- Brand Dark – brand white on hover
- Brand Light – brand dark on hover.
- Variant (Mandatory) – determines how many cards display in a row. Minimum is 2 cards. This does not control the number of cards you can create. It sets the number of cards that are in a row. For example, if you select Three per row and create 6 card items, the display will be 2 rows of 3 cards.
- Options are:
- Side scroll – you need to add a minimum of 4 cards for this option to work correctly.
- Two per row
- Three per row
- Four per row – only to be used in a full width section on landing pages.
- Options are:
- Create a card item
- Icon (Optional) – select a pictogram from a predetermined list.
- Media (Optional) – add an image from the media library.
- Add a short, descriptive Heading (Mandatory) – maximum 50 characters.
- Add the card item content in the HTML / WYSIWYG editor (optional) – maximum 200 characters.
- Add a Link to another page (Mandatory) – Content (internal page) or Managed link (external page). Avoid linking to items in the media library.
- Highlight – adds a brand accent line at the top of the card.
- The highlight line should be used sparingly to bring attention to particular cards.
- Used in the first row of a grid of cards only (2, 3, 4 columns).
- If there is only one row of cards, it can be used across all cards (2, 3, 4 columns).
- The highlight line should be used sparingly to bring attention to particular cards.
- Tags (Optional)– add a topic tag if required. Maximum 50 characters.
- Variants (Optional)
- Full width/News
- Large headline
- Display date (Optional)
- Add other Card items as required.
- Save your page to display the card block.
How cards display
2 card items, brand white, pictograms
3 card items, brand dark
Heading 1
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Heading 2
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Heading 3
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
3 card items, brand light, image, tag, date
Image
Heading 1
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Image
Heading 2
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Image
Heading 3
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Side-scrolling cards, 5 cards, brand white, pictograms
Heading only, 3 cards, brand dark
6 card grid, brand white, highlight (top row only)
Card 1
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Card 2
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Card 3
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Card 4
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Card 5
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Card 6
A descriptive summary of the web page that’s linked to this card. The summary should be short and concise.
Live examples
You can see live examples of how agencies have applied the component to their content.
Cards with text only
- Department of Customer Service – Arts and culture
- Department of Customer Service – Employment
- Department of Education – Apprentices and trainees
- Training Services NSW – Resources - Vocational Education and Training
- Youth Justice NSW (landing page)
Cards with images
- Department of Customer Service – Customers
- Department of Customer Service – Young people
- Department of Regional NSW – Regional NSW planning and strategic resources