PATTERN OVERVIEW

A dash is an optional decorative element added below an H1 or H2 heading to help define the visual hierarchy of the page. The dash helps bring focus to the main sections of a page and will make the page easier for a user to scan.

The color of the dash is #ce4b27 (primary brand orange) on Optum branded sites. The color may vary on a CDO site that has a unique color palette.

A dash is used in the following situations:

• H1 heading appearing in the main hero banner with an overlay block or a color block used as the main hero banner.
• H2 heading appearing above a solution/services listing, client success stories, or in a color block.

GUIDELINES

• The dash is either centered or left aligned based on the alignment of the heading.
• Do not overuse the dash on a page since it will lose its effectiveness. Use it bring focus to the main sections of a page.
• A dash is not a mandatory element for all H1 and H2 headings and is used when needed.

AEM component: A dash is created by adding the "dash" class to a H1 or H2 heading in the source edit view of the text editor.

Requirements

• Do not add a dash to an H1 or H2 heading that is styled with a class to visually appear smaller or when the heading color is orange.
• A dash can appear on the following background colors: White, Off White (light gray - #efefee), Off Black, Black. Do not add a dash on top of a Dark Gray background.