Unit Content - Highlight Box
The Unit Content – Highlight Box component can call attention to or “highlight” information on a content page. A highlight box can have a light grey or white background. The headline can be a link and designated as an H3 or H4 to maintain proper page hierarchy. Images and buttons may also be added within the highlight box.
On This Page
Examples
Headline (H3) without Headline Link / Paragraph / with Button Link / with Image /
Sans / Grey Background
Headline (H3) with Headline Link / Paragraph / without Button Link / without Image
/ Serif / White Background
Headline (H4) without Headline Link / Paragraph / with Button Link / without Image
/ Sans / Grey Background
Headline (H4) without Headlne Link / Paragraph / without Button Link / with Image
/ Serif / White Background
Settings & Features
- Choose a white or light grey background
- Specify heading size of H3 or H4 to maintain page hierarchy
- Headings:
- Text can be serif or sans
- 150 character limit (including spaces)
- Linkable
- Optional button with text and link
- Optional image (1200 x 1200 pixels)
Working with Content
Good for:
- Drawing attention to specific information like instructions or deadlines
- Signaling importance of information
- Making word heavy content more scannable
- Guiding an action the site user should take
Avoid if:
- Content will be general information or is overly lengthy
- Page has an abundance of highlight boxes on it
- Box disrupts flow of page or content
- Too many emphasis items like bold text, bullets, icons, etc. make page feel visually overwhelming
Best Practices
- Use one per page to highlight the most pertinent information for the site user.
Usability & Guidelines
- Adjust heading size to maintain proper page hierarchy for improved accessibility.
Alternative Options
If a highlight box is so large it overwhelms the page, consider another type of component for better usability, accessibility and maintenance.
| Content Need | Recommended Component |
|---|---|
| Long-form content | Standard content page structure with proper heading hierarchy |
| Explaining a sequential process | Link List or Accordion |