Spotlight

PATTERN OVERVIEW

Spotlight a video or other content. 

Guidelines

• Include a badge above the headline to set the spotlight content apart from other content on the page. A badge is typically something  that is earned.  Examples include "Spotlight" , "Featured story" or "Most popular".
  
  
• In place of badge, an eyebrow headline (descriptive keyword or phrase) can be added above the heading to give users a cue to what the content is about before they commit to reading. Examples include White paper, Case study, Video, Blog article, Podcast, or Success story  or "Latest News".
  
  
• Include an image or video player on the right.
  
  
• When appropriate use an off black background to place more emphasis on the content.

Component names: Use the text3 and adaptive image components to build this pattern. When adding a video use the video component.

specifications

Badge / Eyebrow label: 1-3 descriptive keywords. 

Descriptor label: Two to four words. No more than 25 characters (including spaces).

H2 heading: No more than 60 characters (including spaces). Ideally the heading should be no longer than two lines.

Body copy: One or two paragraphs. A paragraph should be no longer than 270 characters (including spaces). 

Image: 1080 x 720 px or less. The height of the image can be reduced to more closely align with the copy on the right.

Button: Use basic, basic reverse or button link.

Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For body copy, use sentence case with complete and punctuated sentences.

Type alignment: Left aligned