Components
Summary box
A summary box highlights key information from a longer page or displays next steps.
Passed WCAG 2.1 AA
Default
Key information
- If you are under a winter storm warning, find shelter right away.
- Sign up for your community’s warning system.
- Learn the signs of, and basic treatments for, frostbite and hypothermia.
- Gather emergency supplies for your home and your car.
<h3 class="site-preview-heading">Default</h3>
<div
class="usa-summary-box"
role="region"
aria-labelledby="summary-box-key-information"
>
<div class="usa-summary-box__body">
<h4 class="usa-summary-box__heading" id="summary-box-key-information">
Key information
</h4>
<div class="usa-summary-box__text">
<ul class="usa-list">
<li>
If you are under a winter storm warning,
<a class="usa-summary-box__link" href="">find shelter</a> right away.
</li>
<li>
Sign up for
<a class="usa-summary-box__link" href=""
>your community’s warning system</a
>.
</li>
<li>
Learn the signs of, and basic treatments for,
<a class="usa-summary-box__link" href="">frostbite</a> and
<a class="usa-summary-box__link" href="">hypothermia</a>.
</li>
<li>
Gather emergency supplies for your
<a class="usa-summary-box__link" href="">home</a> and your
<a class="usa-summary-box__link" href="">car</a>.
</li>
</ul>
</div>
</div>
</div>Guidance
When to use the summary box 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.
- Bullet points require a header, image, or button.
- Alerts or callouts. you’re highlighting something new, rather than surfacing details from further down the page, use the alert component, such as the informative status alert.
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. 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.
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. Search for “readability level tool” to find tools that assess reading level.
Using the summary box component
Summary box settings
| Variable | Description |
|---|---|
$theme-summary-box-background-color
|
Background color of the Summary box. |
$theme-summary-box-border-color
|
Color the border around the Summary box. |
$theme-summary-box-border-width
|
Width of the border around the Summary box. |
$theme-summary-box-border-radius
|
Border radius of the summary box. |
$theme-summary-box-font-family
|
Font family of the content text. |
$theme-summary-box-link-color
|
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”. |
$theme-summary-box-text-color
|
Color of the content text. When set to “default”, text will get one of two values, based on contrast: |
Summary box variants
This component has no variants.
Accessibility test status
The USWDS team did 8 tests based on WCAG 2.1 AA success criteria.
| Total tests |
Passed
|
Passed with exceptions
|
Conditional
|
Failed
|
|---|---|---|---|---|
| 8 | 3 | 0 | 5 | 0 |
Overview of recent accessibility test results:
Learn more on the summary box accessibility tests page.
Package
-
Package usage:
@forward "usa-summary-box"; - Dependencies:
uswds-fonts,usa-list
Latest updates
Meaningful code and guidance updates are listed in the following table:
| Date | USWDS version | Affects | Description |
|---|---|---|---|
| 2024-12-17 | N/A |
|
Added WCAG compliance tag and accessibility test status section. More information: uswds-site#3016 |
| 2022-04-28 | 3.0.0 |
|
Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656 |
| 2021-04-28 | 2.11.2 |
|
Added missing summary box Sass package.
Now you can add a summary box package to your project with |
