A summary box highlights key information from a longer page or displays next steps.
When to use this component
- 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. Use a process list, graphic list, or icon list in the body of the article when:
- There are more than five bullet points;
- Bullet points are longer than 20 words; or
- Bullet points require a header, image, or button.
- Alerts or callouts. If you’re highlighting something new, rather than surfacing details from further down the page, use the alert component, such as the informative status alert.
- 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. We suggest 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.
- Use smooth scrolling. Show the reader that they haven’t left the page with smooth scrolling. If you opt for smooth scrolling, ensure the focus state is transferred appropriately.
- Give the user a way to get back. Provide a “back to top” link or sticky internal navigation.
- 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. Search for "readability level tool" to find tools that assess reading level.
Summary box settings
Background color of the Summary box
Color the border around the Summary box
Width of the border around the Summary box
Border radius of the summary box
Font family of the content text
Color of the links inside the content text. When set to “default”, links will get one of three values, based on contrast: $theme-link-color, $theme-link-reverse-color, or “ink”
Color of the links inside the content text. When set to “default”, text will get one of two values, based on contrast: “white” or “ink”