PATTERN OVERVIEW

This responsive pattern uses a combination of an image, copy over top a block of color. Use this pattern to promote a specific item. 

Guidelines

• A color block component can be set up to span the full width of the page or be placed inside of 1280 or 1080 px wide column.
• Color options for the block include: white, off white, gray lighter, gray darker, off black, black, primary brand, accent 1-alt, accent 2-alt, accent 3-alt, and accent 4-alt — See color swatches. 
• A variation of this pattern can be used as a hero banner.
  
• This component includes an option to open a video in overlay panel overtop the color block content, see videos to learn more.
• An optional descriptor label can be added above the H2 heading to help provide the user with more context. 
  
  
• CTA button: Use the approved button style and color block combinations noted below:
  • Off white — use a basic, reverse, or button link.
  • Primary brand orange — use a reverse button.
  • Black, off black, gray darker, gray dark or gray — use a reverse button.
    
  • Accent colors — use a reverse button.
• Note: if the copy does not meet the recommened character count, the top and bottom of the image will be cropped.

AEM component: Use the color block component to build this pattern.

specifications

Eyebrow / Badge headline: 1-3 descriptive keywords (frames up the content below it). An eyebrow is is optional.

Section heading (H2): Recommended character count is 45 characters (including spaces). Ideally, the heading should fit on two lines. 

Subheading: Recommended character count is 60 characters (including spaces). Ideally, the subheading should fit on two lines. The subheading is optional.

Body copy: Minimum character count is 270 characters (including spaces). 

Button: Maximum of 25 characters (including spaces).  

Image size: 1080 x 720 px (16:9 ratio).

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

Type alignment: Left aligned when the image appears on the left or right side of the color block. Center aligned when appearing over a full-bleed image option.

*An eyebrow is a descriptive keyword or phrase included to give users a cue on what the text is about before they commit to reading it. Avoid if the headline contains the same keywords.