Skip to main content

Site Alert

A site alert communicates urgent sitewide information.


Informational Site Alert

Component Preview

Short alert message

Additional context and followup information including a link.


Component Code

<section class="usa-site-alert usa-site-alert--info" aria-label="Site alert">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <h3 class="usa-alert__heading">Short alert message</h3>
      <p class="usa-alert__text">
        Additional context and followup information including <a class="usa-link" href="#">a link</a>.
      </p>
    </div>
  </div>
</section>

Emergency Site Alert

Component Preview

Emergency alert message

Additional context and followup information including a link.


Component Code

<section class="usa-site-alert usa-site-alert--emergency" aria-label="Site alert">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <h3 class="usa-alert__heading">Emergency alert message</h3>
      <p class="usa-alert__text">
        Additional context and followup information including <a class="usa-link" href="#">a link</a>.
      </p>
    </div>
  </div>
</section>

Site Alert with List

Component Preview

Short alert message

Additional context and followup information:

  • First important update or action item
  • Second important update with a link
  • Third important update or action item

Component Code

<section class="usa-site-alert usa-site-alert--info" aria-label="Site alert">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <h3 class="usa-alert__heading">Short alert message</h3>
      <p class="usa-alert__text">
        Additional context and followup information:
      </p>
      <ul class="usa-list">
        <li>First important update or action item</li>
        <li>Second important update with <a class="usa-link" href="#">a link</a></li>
        <li>Third important update or action item</li>
      </ul>
    </div>
  </div>
</section>

Slim Site Alert

Component Preview

Short alert message with a link.


Component Code

<section class="usa-site-alert usa-site-alert--info usa-site-alert--slim" aria-label="Site alert">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <p class="usa-alert__text">
        Short alert message with <a class="usa-link" href="#">a link</a>.
      </p>
    </div>
  </div>
</section>

No Icon Site Alert

Component Preview

Short alert message

Additional context and followup information including a link.


Component Code

<section class="usa-site-alert usa-site-alert--info usa-site-alert--no-icon" aria-label="Site alert">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <h3 class="usa-alert__heading">Short alert message</h3>
      <p class="usa-alert__text">
        Additional context and followup information including <a class="usa-link" href="#">a link</a>.
      </p>
    </div>
  </div>
</section>


Guidance

When to use the site alert component

To communicate important system-wide messages that affect all users across the entire site.
To announce emergency alerts such as natural disasters, security incidents, or critical service outages.
To notify users about scheduled maintenance, system updates, or temporary service interruptions.

When to consider something else

If the message only applies to a specific page or section.
Use the standard Alert component instead for page-specific feedback and messages.
If the information is not time-sensitive or urgent.
Consider using standard page content, callout boxes, or other less prominent UI elements.
If users need to take immediate action on a form or task.
Use inline validation or the Alert component placed near the relevant content.

Usability guidance

Place site alerts at the very top of the page.
Site alerts should appear above the header and navigation to ensure maximum visibility.
Keep messages concise and actionable.
Users should quickly understand what is happening and what, if anything, they need to do.
Use emergency alerts sparingly.
Reserve the emergency variant for truly critical situations. Overuse diminishes their impact and can cause alert fatigue.
Provide a way for users to dismiss non-critical alerts.
Consider adding a close button for informational alerts that do not require immediate action.

Accessibility guidance

Use the aria-label attribute.
Add aria-label="Site alert" to the <section> element to help screen reader users understand the purpose of the region.
Use appropriate heading levels.
The alert heading should fit logically within the page's heading hierarchy. Use <h3> or adjust based on your page structure.
Ensure sufficient color contrast.
The site alert component meets WCAG 2.1 AA contrast requirements. Do not override the default colors without verifying contrast ratios.
Do not rely solely on color to convey meaning.
Use icons and text to communicate the alert type in addition to color.

USWDS Documentation

For more guidance, view the USWDS Site Alert Component Documentation.



Settings

Variable Description
$theme-site-alert-max-width

Maximum width of the site alert content.
$theme-alert-bar-width

Width of the colored bar on the left side of alerts.
$theme-alert-font-family

Font family of the alert text.
$theme-alert-icon-size

Size of the alert icon.
$theme-alert-padding-x

Horizontal padding inside the alert.


Variants

Variant Description

.usa-site-alert--info

Display an informational site alert with a blue background.

.usa-site-alert--emergency

Display an emergency site alert with a red background for critical messages.

.usa-site-alert--slim

Display a slimmer version of the site alert with reduced padding.

.usa-site-alert--no-icon

Display the site alert without the status icon.
Looking for U.S. government information and services?
Visit USA.gov