Skip to main content
Search

List card

The list card is a highly flexible card that can be used for a variety of purposes. The list card's purpose is to consistently display a group of links and if needed a primary call to action.

The list card is typically used to house a collection of documents or contextual links related to the page content.

Related

Anatomy

H3 - Title goes here

Primary CTA

Specification

  • Image (optional)
  • Title (required)
  • Icons (optional)
  • List items (required)
  • Call to action (optional)

Usage guidelines

Do's

  • CTAs within the list card are editable, however labels should be kept short and broadly should be 'View all {INSERT TYPE} such as literature, articles
  • Choose between 2 or 3 columns
  • When using 2 columns, list card can house a maximum of 6 links (3 rows)
  • When using 3 columns, list card can house a maximum of 9 links (3 rows)
  • A list card can house a maximum of 9 links, cards can include fewer than 6 links. The card height will remains the same regardless of content.
  • The title of the list card is editable
  • When linking to a document or piece of literature, you must use the document icon from the specified icon list within the CMS
  • Only use the download link icon when you are linking to a file that will enact a download action. For example: downloading an application or image.

Don'ts

  • Must not be used for general content or text
  • Header must be H3 on list card when used within general section blocks
  • Only use an image when list card is used in a card holder

Behaviour

  • Rollover state on links should engage on hover
  • Links to literature must open in new windows/tabs
  • CTAs can be added to the as an optional item. CTAs can be primary, secondary or tertiary
  • Block titles can wrap over two lines if required

Example list card 2 column

View All

Example list card 3 columns - no CTA