Site Alert

A site alert communicates urgent sitewide information. It wraps the c-alert component inside a <section> element.

Props

Prop	Default	Description
`type`	`info`	Alert type: `info` or `emergency`
`heading`		Optional heading text (adds `--no-heading` class if empty)
`aria_label`	`Site alert`	Accessible label for the section
`slim`		Enable slim variant when set
`no_icon`		Hide the icon when set

Example Usage

Standard Informational Site Alert

<c-site_alert type="info" heading="Short alert message">
    Additional context and followup information including
    <a class="usa-link" href="#">a link</a>.
</c-site_alert>

Standard Emergency Site Alert

<c-site_alert type="emergency" heading="Emergency alert message">
    Additional context and followup information including
    <a class="usa-link" href="#">a link</a>.
</c-site_alert>

Site Alert with No Header

<c-site_alert type="emergency">
    <strong>Short alert message.</strong> Additional context and followup
    information including <a class="usa-link" href="#">a link</a>.
</c-site_alert>

Site Alert with List

<c-site_alert type="emergency" heading="Emergency alert message">
    <c-list>
        <li>The primary emergency message and <a class="usa-link" href="#">a link</a> for supporting context.</li>
        <li>Another message, <a class="usa-link" href="#">and another link</a>.</li>
        <li>A final emergency message.</li>
    </c-list>
</c-site_alert>

Slim Site Alert

<c-site_alert type="emergency" slim="true">
    <strong>Short alert message.</strong> Additional context and followup
    information including <a class="usa-link" href="#">a link</a>.
</c-site_alert>

Site Alert with No Icon

<c-site_alert type="emergency" no_icon="true">
    <strong>Short alert message.</strong> Additional context and followup
    information including <a class="usa-link" href="#">a link</a>.
</c-site_alert>

{% load cotton %}

<div class="component-variants">
    <h1>Site Alert Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton site_alert type="{{ variant.type }}" heading="{{ variant.heading }}" aria_label="{{ variant.aria_label|default:'Site alert' }}" slim="{{ variant.slim }}" no_icon="{{ variant.no_icon }}" %}
            {% if variant.list_items %}
            {% cotton list %}
                {% for item in variant.list_items %}
                <li>{{ item|safe }}</li>
                {% endfor %}
            {% endcotton %}
            {% else %}
            {{ variant.content|safe }}
            {% endif %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Site Alert
context:
  variants:
    - title: "Standard Informational Site Alert"
      type: "info"
      heading: "Short alert message"
      content: 'Additional context and followup information including <a class="usa-link" href="#">a link</a>.'
    - title: "Standard Emergency Site Alert"
      type: "emergency"
      heading: "Emergency alert message"
      content: 'Additional context and followup information including <a class="usa-link" href="#">a link</a>.'
    - title: "Site Alert with No Header"
      type: "emergency"
      heading: ""
      content: '<strong>Short alert message.</strong> Additional context and followup information including <a class="usa-link" href="#">a link</a>.'
    - title: "Site Alert with List"
      type: "emergency"
      heading: "Emergency alert message"
      list_items:
        - 'The primary emergency message and <a class="usa-link" href="#">a link</a> for supporting context.'
        - 'Another message, <a class="usa-link" href="#">and another link</a>.'
        - 'A final emergency message.'
    - title: "Slim Site Alert"
      type: "emergency"
      heading: ""
      slim: "true"
      content: '<strong>Short alert message.</strong> Additional context and followup information including <a class="usa-link" href="#">a link</a>.'
    - title: "Site Alert with No Icon"
      type: "emergency"
      heading: ""
      no_icon: "true"
      content: '<strong>Short alert message.</strong> Additional context and followup information including <a class="usa-link" href="#">a link</a>.'