role="alert"
to notify assistive technology of time-sensitive information.Further Reading
<figure class="alert alert--primary" role="alert">
<figcaption>A simple primary alert-check it out!</figcaption>
</figure>
<figure class="alert alert--primary inline-block" role="alert">
<figcaption>A simple primary alert-check it out!</figcaption>
</figure>
<figure class="alert alert--secondary" role="alert">
<figcaption>A simple secondary alert-check it out!</figcaption>
</figure>
<figure class="alert alert--secondary inline-block" role="alert">
<figcaption>A simple secondary alert-check it out!</figcaption>
</figure>
<figure class="alert alert--success" role="alert">
<figcaption>A simple success alert-check it out!</figcaption>
</figure>
<figure class="alert alert--success inline-block" role="alert">
<figcaption>A simple success alert-check it out!</figcaption>
</figure>
<figure class="alert alert--error" role="alert">
<figcaption>A simple error alert-check it out!</figcaption>
</figure>
<figure class="alert alert--error inline-block" role="alert">
<figcaption>A simple error alert-check it out!</figcaption>
</figure>
<figure class="alert alert--warning" role="alert">
<figcaption>A simple warning alert-check it out!</figcaption>
</figure>
<figure class="alert alert--warning inline-block" role="alert">
<figcaption>A simple warning alert-check it out!</figcaption>
</figure>