Summary Box

feedbackUSWDS-derived

A bordered callout box for highlighting key information or takeaways.

Variants

Default

Key information

First key point with a link
Second key point
Third key point

<div class="flex-summary-box" role="region" aria-labelledby="summary-heading">
  <div class="flex-summary-box__body">
    <h3 class="flex-summary-box__heading" id="summary-heading">Key information</h3>
    <div class="flex-summary-box__text">
      <ul>
        <li>First key point with <a href="/example">a link</a></li>
        <li>Second key point</li>
        <li>Third key point</li>
      </ul>
    </div>
  </div>
</div>

With Paragraph

Important notice

This is a summary of the most important information on the page, presented in a callout box for visibility.

<div class="flex-summary-box" role="region" aria-labelledby="notice-heading">
  <div class="flex-summary-box__body">
    <h3 class="flex-summary-box__heading" id="notice-heading">Important notice</h3>
    <div class="flex-summary-box__text">
      <p>This is a summary of the most important information on the page, presented in a callout box for visibility.</p>
    </div>
  </div>
</div>

Contract

Class mapping

USWDS	Flex	Notes
`usa-summary-box`	`.flex-summary-box`	Base summary box class
`usa-summary-box__heading`	`.flex-summary-box__heading`	Summary box heading
`usa-summary-box__text`	`.flex-summary-box__text`	Summary box text container
`usa-summary-box__body`	`.flex-summary-box__body`	Summary box body wrapper

Verified properties

background-colorborder-colorborder-radiusfont-familyfont-size

Behavior promises

✓ Has info-lighter background with cyan border
✓ Region role with aria-labelledby for heading
✓ Accessibility audit passes

Source CSS

/* flex-summary-box — USWDS Summary Box conformance
   Bordered callout with info-lighter background */

.flex-summary-box {
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
  color: var(--flex-color-text);
  background-color: var(--flex-color-info-lighter);
  border: 1px solid var(--flex-cyan-20);
  border-radius: 0.25rem;
  padding: 1.5rem;
  position: relative;
  margin-block-start: 1rem;
}

.flex-summary-box__body {
  /* No extra styling needed — padding is on the outer element */
}

.flex-summary-box__heading {
  font-size: 1.46rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.flex-summary-box__text {
  margin: 0;

  ul,
  ol {
    padding-inline-start: 2ch;
    margin: 0;
  }

  li:last-child {
    margin-block-end: 0;
  }
}