Call-out Card

Call-out Cards are used to highlight certain content areas and are used as navigable elements to different pages of the website. They can appear in various brand colours depending on the scenario and are always accompanied by a relevant icon.

![Call-out card 1](/images/Call-out%20Card/CalloutCard.png) ![Call-out card 2](/images/Call-out%20Card/M_CalloutCard.png)

Use guidance

Call-out Card components are used as focused elements which help guide a user to other relevant webpages. They can be either singular or in multiple (stacked vertically) to divide between different sections of content. The objective of the component is to provide a quick, easy to follow, focused link for the user to follow when navigating a content page.

These cards are noticably different in use from Content Card components which are used to link to sections of content. Call-out Cards are primarily used within sections of content for navigation purposes.

Use on subpages to provide dynamic links to content within content pieces
Use multiple cards linking to different content sections, labelled clearly
Use brand colours for the cards to add an element of visual recognition
Use too many cards. A maximum number of 5 cards per iteration is recommended
Have two different cards with different content which link to the same end location
Use a Call-out Card without introductory copy, positioning the call-out(s)
Use to link to section based content. For this, a Content Card should be used instead

Up next