Summary box

A summary box highlights key information from a longer page or displays next steps.
Status:
Draft: Do not use
About this element
Guidance

When to use

  • Summarize dense content. If your page contains a lot of information, use the summary box to call out 3-5 key details that readers shouldn’t miss.
  • Highlight a short, actionable list. If the page content describes a few steps or a checklist of items to remember, collect them in a summary box. Use five bullet points or less.

When to consider something else 

  • Internal page navigation. Don’t use a summary box as a table of contents. If you’re listing headings for internal page navigation, use a simple unordered list of jump links or side navigation.
  • Your page is short. The summary box gives users quick access to the most important information on a long page. If your page isn’t that long, a recap may feel redundant.
  • Your list needs more detail. Summary boxes should be short.
  • Alerts or callouts. If you’re highlighting something new, rather than surfacing details from further down the page, consider other options.

Usability guidance

  • Select, split, and sequence to prioritize critical information. First, select the most important information from the page. Then, split up the information into logical parts. Finally, sequence the parts in an order that makes sense to the reader.
  • Link to more information. Consider linking to further reading on the same page using an anchor link. To do this without confusing your readers, do your best to explain where the link will take them in the hyperlinked text and reiterate it with the subsequent heading.
  • Give the user a way to get back. Provide a “back to top” link or sticky internal navigation.

Accessibility guidance 

  • Write for your audience. The summary box is meant to make it easier to understand page content. Don’t leave readers without access to critical information. Check your writing level to ensure it’s easy to read.