Alert
Colors#
Primary#
This is a primary alert. You should probably pay attention to
it.
<div class="alert alert--primary" role="alert"> <button aria-label="Close" class="clean-btn close" type="button"> <span aria-hidden="true">×</span> </button> This is a <strong>primary</strong> alert. You should probably pay attention to it.</div>Secondary#
This is a secondary alert. It's not too important, you
may ignore it.
<div class="alert alert--secondary" role="alert"> <button aria-label="Close" class="clean-btn close" type="button"> <span aria-hidden="true">×</span> </button> This is a <strong>secondary</strong> alert. It's not too important, you may ignore it.</div>Success#
This is a success alert. Something good must have happened!
<div class="alert alert--success" role="alert"> <button aria-label="Close" class="clean-btn close" type="button"> <span aria-hidden="true">×</span> </button> This is a <strong>success</strong> alert. Something good must have happened!</div>Info#
This is an info alert. For your information only.
<div class="alert alert--info" role="alert"> <button aria-label="Close" class="clean-btn close" type="button"> <span aria-hidden="true">×</span> </button> This is an <strong>info</strong> alert. For your information only.</div>Warning#
This is a warning alert. Be warned, you should pay attention!
<div class="alert alert--warning" role="alert"> <button aria-label="Close" class="clean-btn close" type="button"> <span aria-hidden="true">×</span> </button> This is a <strong>warning</strong> alert. Be warned, you should pay attention!</div>Danger#
This is a danger alert. Something has gone wrong, please
investigate!
<div class="alert alert--danger" role="alert"> <button aria-label="Close" class="clean-btn close" type="button"> <span aria-hidden="true">×</span> </button> This is a <strong>danger</strong> alert. Something has gone wrong, please investigate!</div>