Skip to main content

Emergency site alert

A site alert communicates urgent sitewide information.

Standard emergency site alert

error

Emergency alert message

Additional context and followup information including an example link.
Example HTML usage: 
<!-- Standard emergency site alert -->
<div class="alert alert-site" aria-label="Site alert">
  <div class="alert-icon">
    <i class="material-icons">error</i>
  </div>
  <div>
    <h4 class="alert-heading">Emergency alert message</h4>
    Additional context and followup information including
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>

Site alert with no header

error
Additional context and followup information including an example link.
Example HTML usage: 
<!-- Site alert with no header -->
<div class="alert alert-site" aria-label="Site alert">
  <div class="alert-icon">
    <i class="material-icons">error</i>
  </div>
  <div>
    Additional context and followup information including
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>

Site alert with list

error

Emergency alert message

  • The primary emergency message and a link for supporting context.
  • Another message, and another link.
  • A final emergency message.
Example HTML usage: 
<!-- Site alert with list -->
<div class="alert alert-site" aria-label="Site alert">
  <div class="alert-icon">
    <i class="material-icons">error</i>
  </div>
  <div>
    <h4 class="alert-heading">Emergency alert message</h4>
    <ul>
      <li>
        The primary emergency message and
        <a class="alert-link" href="javascript:void(0);">a link</a> for
        supporting context.
      </li>
      <li>
        Another message,
        <a class="alert-link" href="javascript:void(0);">and another link</a>.
      </li>
      <li>A final emergency message.</li>
    </ul>
  </div>
</div>

Slim site alert

error
Short alert message. Additional context and followup information including an example link.
Example HTML usage: 
<!-- Slim site alert -->
<div class="alert alert-site alert-sm" aria-label="Site alert">
  <div class="alert-icon">
    <i class="material-icons">error</i>
  </div>
  <div>
    <strong>Short alert message.</strong> Additional context and followup
    information including <a href="#" class="alert-link">an example link</a>.
  </div>
</div>

Site alert with no icon

Additional context and followup information including an example link.
Example HTML usage: 
<!-- Site alert with no icon -->
<div class="alert alert-site" aria-label="Site alert">
  <div>
    Additional context and followup information including
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>