Summary Box

A summary box highlights key information on a page to help users identify important content at a glance.

Default Summary Box

Component Preview

Key information

This is a summary box that highlights important information users need to know. Use it to call attention to key points, deadlines, or essential requirements.

Component Code


<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">
      <p>
        This is a summary box that highlights important information users need to know.
        Use it to call attention to key points, deadlines, or essential requirements.
      </p>
    </div>
  </div>
</div>

Summary Box with List

Component Preview

What you need to apply

Before you begin, make sure you have the following:

A valid government-issued ID
Proof of residence (utility bill, bank statement, etc.)
Social Security number or ITIN
Contact information (email and phone number)

Component Code


<div class="usa-summary-box" role="region" aria-labelledby="summary-box-requirements">
  <div class="usa-summary-box__body">
    <h4 class="usa-summary-box__heading" id="summary-box-requirements">
      What you need to apply
    </h4>
    <div class="usa-summary-box__text">
      <p>Before you begin, make sure you have the following:</p>
      <ul class="usa-list">
        <li>A valid government-issued ID</li>
        <li>Proof of residence (utility bill, bank statement, etc.)</li>
        <li>Social Security number or ITIN</li>
        <li>Contact information (email and phone number)</li>
      </ul>
    </div>
  </div>
</div>

Guidance

When to use the summary box component

To highlight key information that users should not miss on a page.

To summarize important points, requirements, or deadlines at the top of a page or section.

To draw attention to critical content without creating a sense of urgency or alarm.

When to consider something else

If you need to communicate urgent or time-sensitive information.: Use an alert component instead, which is designed for warnings, errors, and success messages.
If the content is navigational or leads to another page.: Use a card component, which is better suited for clickable, navigational content.
If the information applies site-wide.: Use a site alert component for announcements that affect the entire site.

Usability guidance

Keep content concise.: Summary boxes work best when they contain brief, scannable information. Avoid lengthy paragraphs.
Use clear, descriptive headings.: The heading should clearly indicate what type of information the box contains.
Limit to one per page section.: Using multiple summary boxes dilutes their impact and can overwhelm users.
Use lists for multiple related items.: When presenting several related points, use bullet points to improve scannability.

Accessibility guidance

Use proper heading hierarchy.: The summary box heading should fit logically within your page's heading structure. Adjust the heading level as needed.
Include role="region" and aria-labelledby.: These attributes help screen reader users understand that this is a distinct region of content and what it contains.
Ensure sufficient color contrast.: The default summary box styling meets WCAG 2.1 Level AA contrast requirements.
Use unique IDs for the heading.: Each summary box heading should have a unique id that matches the aria-labelledby attribute.

USWDS Documentation

For more guidance, view the USWDS Summary Box Component Documentation.

Settings

Variable	Description
`$theme-summary-box-background-color`	Background color of the summary box.
`$theme-summary-box-border-color`	Border color of the summary box.
`$theme-summary-box-border-width`	Border width of the summary box.
`$theme-summary-box-border-radius`	Border radius of the summary box.
`$theme-summary-box-font-family`	Font family of the summary box.
`$theme-summary-box-link-color`	Link color within the summary box.
`$theme-summary-box-text-color`	Text color of the summary box.

Variants

Variant	Description
`.usa-summary-box`	The default summary box with a light blue background and dark blue border.
`.usa-summary-box__body`	Container for the summary box content including heading and text.
`.usa-summary-box__heading`	The heading element within the summary box.
`.usa-summary-box__text`	The text content container within the summary box.