Web Pattern Library
 

Alert Styles

Alert classes should be added to a <div> element with the text inside the div tags.

    <div class="alert">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque 
    </div>

Standard Alert

class="alert"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque reprehenderit eligendi ducimus velit, consequuntur dolore ratione. Aliquid iste distinctio eveniet voluptate illum, repellat adipisci laudantium incidunt debitis perferendis quod.

Success Alert

class="alert alert-success"

Voluptatem ut nisi magnam dolorem dolore quo, accusamus sequi voluptatibus amet laborum adipisci ipsa architecto? In, sunt molestiae nihil accusamus explicabo animi maxime molestias autem fuga, adipisci deleniti. Illo, nemo!

Danger Alert

class="alert alert-danger"

Dolorem eligendi voluptate nulla, recusandae quod molestiae, omnis veritatis tempora cum fuga et nemo molestias, minima? Nemo voluptatibus, cumque. Ducimus at, delectus, enim repellat veniam culpa iure placeat eos quos.

Danger Alert Alt

class="alert-danger-alt"

If you are in danger, dial 911

Info Alert

class="alert alert-info"

Aspernatur dolorum fuga optio? Cumque laboriosam, officiis quae voluptas. Odit quam veritatis ipsum iure assumenda voluptates obcaecati consequuntur porro, delectus sunt ipsa blanditiis atque nihil eius, voluptatibus quos et. Deserunt!

Dismissable Alert

Can be used with any of the alert styles, except the Danger Alert Alt.

SUU Emergency Notification

This is a test of the SUU Emergency Notification System. In the event of an actual emergency, further details would be provided here.

The HTML for a dismissable alert:

    <div class="alert">
      <a aria-hidden="true" class="close alert-close fas fa-times fa-2x">
<span class="sr-only">Close modal</span>
</a> <h1>SUU Emergency Notification</h1> <p>This is a test of the SUU Emergency Notification System. In the event of an actua
emergency, further details would be provided here.</p> </div>