Highlight Board

The Highlight Board component is a prominent way to introduce an experience and present the user with a clear call to action.

Developer Documentation

See the code and developer guidelines for this component.

Highlight Board is typically used at the top of a page, below the Masthead. It can also be used as a call to action on other parts of a page.

Effective use of a Highlight Board involves a clear, concise headline that grabs attention.
The background can either be an image or a solid color.
The headline should not exceed 2-3 lines.
The background image can either take up the full width of the site’s main container or extend to the full width of the viewport.
If there is only one call-to-action, it must use the primary button style.
A secondary call-to-action must exist with a primary call-to-action.

The Default Highlight Board is used to encourage engagement with strong imagery or a solid background color.

See the code and developer guidelines for this component.

The No Image Highlight Board omits the background image and centers the content.

See the code and developer guidelines for this component.

The Stacked Highlight Board places the image, content, and buttons in a vertical stack. This places greater emphasis on the image.

See the code and developer guidelines for this component.

Highlight Board must contain a headline.
Highlight Board should include one or more buttons.
Highlight Board may have either a background image, a solid background color, or no image.

When using a Highlight Board that includes an image, be sure to include a descriptive alt attribute.
When using a solid background color, the contrast ratio between the headline and the background must be at least 3:1.
To check the contrast ratio of your text on a background image, check out this resource. Use a color picker tool to test the background colors of the image against the test color.