Highlight Box

The highlight box contains important or related content. It’s a visual way to separate page sections or components, such as a collection. 

Use it to show

• Important content or a collection in yellow at the top of a page.
• Related information or a collection in blue at the bottom of a page.

Do not use it for

• Table of contents
• System status messages
• Form validation messages
• Internal page navigation

Follow these rules

Headings

• Use the correct heading level.
• Limit headings to 160 characters.

Content

Keep it short.

Visual style and functionality

• Use a grid when dividing the content into two or more columns.
• Set images in fractions of a page width (1/4, 1/3, 1/2, or 2/3).
• Limit related links to seven or fewer.
• Do not place two highlight boxes next to each other.
• Place a collection inside a highlight box if you want it to stand out.

Examples