Summary Box

A summary box draws attention to important content on a page.

Props

Prop	Default	Description
`heading`		The heading text for the summary box
`heading_level`	`h4`	The HTML heading element (h1-h6)
`id`		Custom ID for aria-labelledby (auto-generated from heading if not provided)

Slots

Slot	Description
(default)	The body content of the summary box

Sub-components

`c-summary_box.link`

A styled link for use within a summary box.

Prop	Default	Description
`href`		The URL for the link

Example Usage

Summary Box with List

<c-summary_box heading="Key information">
    <ul class="usa-list">
        <li>
            If you are under a winter storm warning,
            <c-summary_box.link href="#">find shelter</c-summary_box.link>
            right away.
        </li>
        <li>
            Sign up for
            <c-summary_box.link href="#">your community's warning system</c-summary_box.link>.
        </li>
    </ul>
</c-summary_box>

With Custom Heading Level

<c-summary_box heading="Section Summary" heading_level="h2">
    <ul class="usa-list">
        <li>
            If you are under a winter storm warning,
            <c-summary_box.link href="#">find shelter</c-summary_box.link>
            right away.
        </li>
    </ul>
</c-summary_box>

{% load cotton %}

<div class="component-variants">
    <h1>Summary Box Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        
        {% cotton summary_box heading="{{ variant.heading }}" heading_level="{{ variant.heading_level|default:'h4' }}" %}
            {% if variant.items %}
            <ul class="usa-list">
                {% for item in variant.items %}
                <li>{{ item.text|safe }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Summary Box
context:
  variants:
    - title: "Summary Box with List"
      heading: "Key information"
      heading_level: "h4"
      items:
        - text: 'If you are under a winter storm warning, <a class="usa-summary-box__link" href="#">find shelter</a> right away.'
        - text: 'Sign up for <a class="usa-summary-box__link" href="#">your community''s warning system</a>.'
        - text: 'Learn the signs of, and basic treatments for, <a class="usa-summary-box__link" href="#">frostbite</a> and <a class="usa-summary-box__link" href="#">hypothermia</a>.'
        - text: 'Gather emergency supplies for your <a class="usa-summary-box__link" href="#">home</a> and your <a class="usa-summary-box__link" href="#">car</a>.'