1. Home
  2. Design System
  3. Components
  4. Highlight Box

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


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


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.


A collection in the highlight box

Highlight box with two columns

Date Last Reviewed: