Skip to main content
Search

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

Image of an example spotlight card

Specification

  • Media (optional)
  • Image or video - W 575px - H 260px (optional)
  • Title (required)
  • Text (required)
  • Primary/secondary call to action (optional)

Usage guidelines

Do's

  • Spotlight cards are very useful 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 or secondary button with a clear description of the destination.

Don'ts

  • Spotlight cards must not be used outside of a card holder.
  • Do not create additional links within the spotlight card. There should only be one call to action either a primary/secondary button or the whole card is clickable.
  • When using the button within the card try to avoid excessive usage. on a page - Ideally a button should be used to make just the primary content/action stand out
  • If a spotlight card doesn't have a video or needs a link then avoid using this card. Consider a promo card instead.
  • 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