PATTERN OVERVIEW

Use the color block pattern as the main hero image directly below the primary navigation bar. This pattern includes a H1 heading (page title) with an optional dash, subheading, supporting copy and an optional CTA button. 

Guidelines

• When used as hero image, the following color options can be used: primary brand (orange), off white (light gray), black, off black, gray darker, gray dark or gray. Color options will vary on CDO sites.
  
  
• Be sure to use the recommended breadcrumb and color block color combinations noted below because the breadcrumb menu will appear over top the color block. 
  • When the breadcrumb appears over the primary brand (orange), black, off black, gray darker, gray dark or gray color block the breadcrumb color is set to white. 
  • When appearing over a white or off white (light gray) color block the breadcrumb color is set to blue.
    
• Image is positioned on the right and text on left. 
  
  
• The H1 heading is added to the text block rather than directly to the AEM component since the color block title defaults to an H2 heading.
  
  
• 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.
    
• The share bar is placed directly below the color block when needed. It should be added so that the top of the share bar touches the bottom of the color block component.

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

specifications

H1 heading (page title): 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. 

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

Button: Maximum character count is 25 characters (including spaces).  

Image size: 1080 x 720 px (16:9 ratio). The image may be clip on the top and bottom if the minimum character count is not achieved.  On mobile the image is resized to fit the smaller viewport.

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

Note: If the heading and copy do not meet the recommended character counts, the image will be clipped on both the top and bottom.