PATTERN OVERVIEW

Use as the main hero banner that appears on the top of the page directly below the primary navigation. A slightly opaque white panel (90 or 95% opacity) or solid (100%) panel appears on the left with an H1 heading (page title) with a dash, supporting copy and an optional CTA button. 

Guidelines

• The image supports the content on the page.
  
  
• The same image is displayed on desktop and mobile. However, on mobile the left and right side of the image is cropped, revealing just the center 1/3 of the image. Be sure to select an image with this cropping behavior in mind.
  
  
• A dash can be inserted between the H1 heading and the body copy to help draw focus.
  
  
• The white panel is created by adding a full width image backround column control inside a 1/2 1/2 column control. 
  
  
• Since the darkness of an image will vary, use the opacity level that allows your type to be extremely legible. When including functionality such as pick list in the panel use the 100% opaque image. White panel opacity options: 
  • /content/dam/optum3/optum/en/images/background-colors/white-box-90.png 
    
  • /content/dam/optum3/optum/en/images/background-colors/white-box-95.png
  • /content/dam/optum3/optum/en/images/background-colors/white-box-100.png

AEM component: Use the full-width image background column control, a column control and the text3 component to build this pattern.

Requirements

H1 heading (page title): Up to 45 characters (including spaces). When necessary the title can extend to three lines (character count no more than 60 characters).

Body copy: Up to 140 characters (including spaces). Ideally the body copy should be no more than three lines long. 

Image size: 1500 x 450 px jpeg. Note that a single image is used for desktop, tablet and mobile. On mobile the center 1/3 of the image shows and the left 1/3 and right 1/3 are cropped out of view. In addition, the image may clip on the top and bottom depending on the amount of content placed in the white panel.

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.

Button: Use a basic, basic reverse, basic large or a basic reverse large.

Type alignment: Left aligned