Skip to main content

Summary box

Highlight key information or next steps from a longer page with a summary box.

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
summary-box-demo.tsx
import { SummaryBox } from '@uswds-tailwind/react/summary-box'
export default function SummaryBoxDemo() {
return (
<SummaryBox.Root>
<SummaryBox.Heading>Key information</SummaryBox.Heading>
<SummaryBox.Content className="prose">
<ul>
<li>If you are under 18, you cannot apply.</li>
<li>You must be a U.S. citizen or permanent resident.</li>
<li>You must have a valid Social Security number.</li>
</ul>
</SummaryBox.Content>
</SummaryBox.Root>
)
}

Component API

Place a Heading and Content inside Root to emphasize key information.

Root<div>

Place Heading before Content.

Heading<div>

Names the summary box. Place a heading element inside at the appropriate page level.

Content<div>

Put summary text and supporting links below Heading.