The Featured Item component pairs textual content with a media asset to create a visually prominent, self-contained unit. The Media Container provides the media element and extends it with descriptive text and an optional call to action.
The Featured Item gives editorial weight to a specific piece of content within the page hierarchy. There is an optional highlighted variant to further increase the content's prominence on the page.
Do's
- use a relevant image or video thumbnail, so the media reinforces the message
- include a call to action only when the item serves as an entry point to another page. Omit the call to action when the content is self-contained
- limit use of the highlighted variant
- if using a dynamic height, ensure the media asset is of high enough quality and maintains the focal point well at scale or when cropped
Don'ts
- do not use images that are visually complex or detailed
- do not apply the highlighted variant as a default or decorative choice. The Featured Item component provides sufficient visual prominence for most contexts
- do not include a call to action that repeats a link already present elsewhere in the same content block
When to use
- use when you want to draw attention to a specific piece of content
- use when a media asset adds context or meaning to the accompanying text
- use the highlighted variant when a single item must be visually differentiated from a set of otherwise equivalent items
- use the call to action when the item acts as an entry point to another page
When not to use
- do not use when you simply need to display a media asset, i.e. without accompanying text. Consider instead the Media Container