Skip to main content

Spotlight card

The spotlight card is designed to allow a user to scan content quickly and easily and provide options to explore the content further. It is a flexible device which can be tailored to suit the needs of the content and a call to action can be displayed. They can also be used to display embedded videos and allow the user to view the video while staying on the page.

Please note a spotlight card can only go into a card holder container.

Related

Anatomy

Spotlight card

spotlight-card.svg

Specification

  • Media (optional)
  • Image or video - W 575 - H 260 (optional)
  • Title (required)
  • Text (required)
  • Call to action (optional)

Usage guidelines

Do's

  • Spotlight cards are very useful on secondary or section pages where you wish to highlight a range of content.
  • Use the spotlight card to display video content.
  • If using an image or video within a spotlight card then all other spotlight cards within the same group should also have images or videos
  • Text within the card should be a preview or taster of the content it is linking to.
  • If you wish to add extra prominence to the card, use the primary button with a clear description of the destination.

Dont's

  • Spotlight cards must not be used outside of a card holder.
  • Try to avoid using spotlight cards on tertiary level pages.
  • Do not create additional links within the spotlight card. There should only be one call to action either a button or the whole card is clickable.
  • When using the button within the card try to avoid excessive usage. Ideally a button should be used to make just the primary action stand out
  • Try to avoid making the title or button text wrap over two lines.
  • Text within the card should not be used for multiple paragraphs
  • Should not be used when linking to a platform or login function - please contact the UX team for more information in this scenario.

Behaviour

  • Rollover state should engage on hover
  • When no buttons are used the entire card is a clickable element except when a video is used
  • Buttons can be a primary or secondary style