DS Card set

Component description

The DS card set component features between two and 12 cards that can be used to group information to help users navigate to key pages on your site.

Component field properties

• Character count limits and recommendations per field
• Mandatory and optional elements
• Other notable display options.

Content box heading field 
Mandatory field  
Character count: 35 characters or less including spaces  
Plain text – no HTML

Content box description field 
Mandatory field  
Character count: 85 characters or less including spaces  
Plain text – no HTML

Call to action link text (CTA) field  
Optional field, use one (primary) or two buttons (secondary) 
Text: use 5 words or less, use active voice, don’t use 'learn more', 'read more', or 'click here' as not best practice for links. 
Plain text – no HTML

Image field

• Optional field
• Use images of people as per Photography Brand Guidelines.
• Images should be 2560 x 1700 pixels, jpeg format, linked by asset ID number.
• If images are included, they should all be the same ratio 3:2 preferred.
• Ensure images are optimised and compressed for web for faster page load speeds.
• Note: Images do not display when viewing on mobile devices.

Other notable display options

• Cards can either be content only (no link) or include a link (no image).
• Select ‘wide’ view on landing pages.
• Select option 3 if you have 5, 6 or 9 cards for better layout.
• Cards are hidden by default, check card_[number]_show setting if your card is not displaying.

Guidelines for use

• Only use one card set component per page, which is a maximum of 12 cards on page. Don’t stack/use two card sets on a page.
• Use a minimum of two cards, don't use the card set component to display one card.
• Maximum four cards per row each with or without image.
• If more than four cards, avoid using images – it’s difficult for the user to scan the content.
• If you have too much information for a card set component, consider DS Tabs or DS Link list.

Most suited for these page types

• First level landing pages
• Second level landing pages
• Campaign page

Example(s) of use

https://www.latrobe.edu.au/research/graduate-research (with images)

https://www.latrobe.edu.au/study/choose-la-trobe (without images and links / with images and links)