Components

Summary box

A summary box highlights key information from a longer page or displays next steps.

Default

Key information 

<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">
    <h3 class="usa-summary-box__heading" id="summary-box-key-information">
      Key information
    </h3>
    <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

  • 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: $theme-text-reverse-color or $theme-text-color.

Summary box variants

This component has no variants.

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 Breaking Description
2022-04-28 3.0.0
  • Assets
  • JavaScript
  • Styles
 Breaking

Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656

2021-04-28 2.11.2
  • Assets
  • Styles
 No

Added missing summary box Sass package. Now you can add a summary box package to your project with packages/usa-summary-box. More information: uswds#4162