Skip to main content
Logo USWDS + Tailwind

Alert

An alert keeps users informed of important and sometimes time-sensitive changes.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Informative status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Warning status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Success status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Twig 
<div class="space-y-4">


  <div role="status" class="@container bg-cyan-5 border-l-8 border-l-cyan-30v">
    <div class="py-4 pl-12 pr-4 @desktop:px-16 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6 top-3">
        <div class="icon-[material-symbols--info] size-8"></div>
      </div>
      <h4 class="text-2xl font-bold mb-2 leading-none">Informative status</h4>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="status" class="@container bg-yellow-5 border-l-8 border-l-gold-20v">
    <div class="py-4 pl-12 pr-4 @desktop:px-16 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6 top-3">
        <div class="icon-[material-symbols--warning] size-8"></div>
      </div>
      <h4 class="text-2xl font-bold mb-2 leading-none">Warning status</h4>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="status" class="@container bg-green-cool-5 border-l-8 border-l-green-cool-40v">
    <div class="py-4 pl-12 pr-4 @desktop:px-16 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6 top-3">
        <div class="icon-[material-symbols--check-circle] size-8"></div>
      </div>
      <h4 class="text-2xl font-bold mb-2 leading-none">Success status</h4>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="alert" class="@container bg-red-warm-10 border-l-8 border-l-red-warm-50v">
    <div class="py-4 pl-12 pr-4 @desktop:px-16 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6 top-3">
        <div class="icon-[material-symbols--error] size-8"></div>
      </div>
      <h4 class="text-2xl font-bold mb-2 leading-none">Error status</h4>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="alert" class="@container bg-red-warm-60v border-l-8 border-l-red-warm-60v text-white">
    <div class="py-4 pl-12 pr-4 @desktop:px-16 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6 top-3">
        <div class="icon-[material-symbols--error] size-8"></div>
      </div>
      <h4 class="text-2xl font-bold mb-2 leading-none">Emergency status</h4>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-gray-10 underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


</div>

Slim

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Twig 
<div class="space-y-4">


  <div role="status" class="@container bg-cyan-5 border-l-8 border-l-cyan-30v">
    <div class="py-2 pl-12 pr-4 @desktop:px-14 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6">
        <div class="icon-[material-symbols--info] size-6"></div>
      </div>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="status" class="@container bg-yellow-5 border-l-8 border-l-gold-20v">
    <div class="py-2 pl-12 pr-4 @desktop:px-14 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6">
        <div class="icon-[material-symbols--warning] size-6"></div>
      </div>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="status" class="@container bg-green-cool-5 border-l-8 border-l-green-cool-40v">
    <div class="py-2 pl-12 pr-4 @desktop:px-14 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6">
        <div class="icon-[material-symbols--check-circle] size-6"></div>
      </div>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="alert" class="@container bg-red-warm-10 border-l-8 border-l-red-warm-50v">
    <div class="py-2 pl-12 pr-4 @desktop:px-14 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6">
        <div class="icon-[material-symbols--error] size-6"></div>
      </div>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="alert" class="@container bg-red-warm-60v border-l-8 border-red-warm-60v text-white">
    <div class="py-2 pl-12 pr-4 @desktop:px-14 relative max-w-5xl mx-auto">
      <div class="absolute left-2 @desktop:left-6">
        <div class="icon-[material-symbols--error] size-6"></div>
      </div>
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-gray-10 underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


</div>

No Icon

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Twig 
<div class="space-y-4">


  <div role="status" class="@container bg-cyan-5 border-l-8 border-l-cyan-30v">
    <div class="py-4 pl-2 pr-4 @desktop:pl-8 @desktop:pr-16 relative max-w-5xl mx-auto">
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="status" class="@container bg-yellow-5 border-l-8 border-l-gold-20v">
    <div class="py-4 pl-2 pr-4 @desktop:pl-8 @desktop:pr-16 relative max-w-5xl mx-auto">
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="status" class="@container bg-green-cool-5 border-l-8 border-l-green-cool-40v">
    <div class="py-4 pl-2 pr-4 @desktop:pl-8 @desktop:pr-16 relative max-w-5xl mx-auto">
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="alert" class="@container bg-red-warm-10 border-l-8 border-l-red-warm-50v">
    <div class="py-4 pl-2 pr-4 @desktop:pl-8 @desktop:pr-16 relative max-w-5xl mx-auto">
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-blue-60v underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


  <div role="alert" class="@container bg-red-warm-60v border-l-8 border-l-red-warm-60v text-white">
    <div class="py-4 pl-2 pr-4 @desktop:pl-8 @desktop:pr-16 relative max-w-5xl mx-auto">
      <p class="leading-normal">Lorem ipsum dolor sit amet, <a href="#" class="text-gray-10 underline">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>


</div>

Accessibility

  • The role attribute can notify assistive technologies of time-sensitive and important messages.

    For messages that demand users’ immediate attention, like in cases when using the error or emergency alerts documented above, use role="alert". Otherwise, use role="status" to provide advisory information.