Summary Box
feedbackUSWDS-derived
A bordered callout box for highlighting key information or takeaways.
Reference: USWDS documentation ↗
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-sizeBehavior 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;
}
}
A digital services project by Flexion