Alert

<div class="alert alert-danger" role="alert">
  <p class="alert-title">We could not save your changes</p>
  <p class="alert-text">The server rejected the request. Nothing was lost — try again.</p>
</div>

<div class="alert alert-warning" role="alert">
  <p class="alert-title">Your session expires in one minute</p>
  <p class="alert-text">Save anything unsaved, or sign in again to continue.</p>
  <div class="alert-actions">
    <button class="btn btn-sm btn-primary" type="button">Stay signed in</button>
    <button class="btn btn-sm btn-outline" type="button">Sign out</button>
  </div>
</div>

<div class="alert alert-success" role="status">
  <p class="alert-text">Your changes are saved.</p>
  <button class="btn btn-sm btn-quiet btn-icon alert-close" type="button">
    <svg class="icon" aria-hidden="true"><use href="#icon-x"></use></svg>
    <span class="sr-only">Dismiss this message</span>
  </button>
</div>

<div class="alert alert-info">
  <p class="alert-title">Your trial ends on Friday</p>
  <p class="alert-text">Nothing is deleted; the workspace becomes read-only until you choose a plan.</p>
</div>

<div class="alert alert-success" role="status">
  <p class="alert-title">Invoice sent</p>
  <p class="alert-text">A copy is on its way to accounts@acme.example.</p>
</div>

<div class="alert alert-warning" role="alert">
  <p class="alert-title">Two invoices are overdue</p>
  <p class="alert-text">Access is suspended after thirty days.</p>
</div>

<div class="alert alert-danger" role="alert">
  <p class="alert-title">The import failed on row 412</p>
  <p class="alert-text">Nothing was written. Fix the row and try again.</p>
</div>

<div class="alert alert-plain">
  <p class="alert-title">No mark, no rail</p>
  <p class="alert-text">For a message whose meaning is carried entirely by its words. The room reserved outside the box goes with them.</p>
</div>

<div class="alert alert-info alert-banner">
  <p class="alert-title">Scheduled maintenance on Sunday, 02:00–04:00 UTC</p>
  <p class="alert-text">Exports queued during the window run afterwards.</p>
</div>

<p class="alert alert-warning alert-note">A note in prose: <code>.alert-note</code> puts the
  title at the size of the copy around it, and an alert used this way carries
  <strong>no role at all</strong> — a live role on a paragraph that has been on the page
  since load either says nothing or interrupts a reader mid-sentence.</p>