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.
- Media (optional)
- Image or video - W 575px - H 260px (optional)
- Title (required)
- Text (required)
- Primary/secondary call to action (optional)
- 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.
- 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.
- 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