Skip to main content
Logo USWDS + Tailwind

Summary box

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

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Key information

Twig
<div role="region" aria-labelledby="summary-box-heading" class="border border-cyan-20 bg-cyan-5 rounded p-6">
<div class="prose">
<h3 id="summary-box-heading">
Key information
</h3>
<ul>
<li>If you are under a winter storm warning,
<a href="#">find shelter</a>
right away.</li>
<li>Sign up for
<a href="#">your community’s warning system</a>.</li>
<li>Learn the signs of, and basic treatments for,
<a href="#">frostbite</a>
and
<a href="#">hypothermia</a>.</li>
<li>Gather emergency supplies for your
<a href="#">home</a>
and your
<a href="#">car</a>.</li>
</ul>
</div>
</div>