Summary Box

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

status: draft

Props

Slots

• default
• heading

External Libraries

• None

Sub-Components

• None

Dependencies

• BaseHeading component

Notes

• Any links in the default slot will need to have the CSS class usa-summary-box__link applied.

Tests

1. The component has all of the default classes applied.
2. If a id prop is not provided, a unique id is auto-generated.
3. The aria-labelledby attribute is assigned the correct id prop value.
4. When the heading prop is used, the text is added as the alert heading.
5. When the heading slot is used, the content is added as the alert heading.
6. When the heading prop and slot are both used, the heading slot will override the heading prop.
7. Either the heading prop or slot must be used.