Alert

Default
.e-alert

Magna lorem qui nisi occaecat dolore in laboris 
<div class="e-alert">
  Ea lorem ut dolor ea nulla commodo occaecat 
</div>


                        <div class="e-alert">Nulla dolor eu exercitation duis esse lorem do 
                        </div>

Variations

Sticky
.e-alert-sticky

Laborum minim minim nulla magna culpa dolor in
Minim magna anim ipsum anim sunt cillum minim
Consequat et id nostrud sit fugiat esse esse 
<div class="e-alert e-alert-sticky">
  Ut sint laborum non sunt ut pariatur labore 
</div>
<div class="e-alert e-alert-sticky">
  Duis irure proident nulla nisi irure aliqua do 
</div>
<div class="e-alert e-alert-sticky">
  Dolor eiusmod excepteur excepteur et elit enim ea 
</div>


                          <div class="e-alert e-alert-sticky">In culpa dolor reprehenderit non aliquip ut ipsum 
                          </div>
                          <div class="e-alert e-alert-sticky">Amet veniam ad adipiscing duis dolore voluptate ea 
                          </div>
                          <div class="e-alert e-alert-sticky">Voluptate eu pariatur ad in esse voluptate adipiscing 
                          </div>

Inline
.e-alert-inline

Id ullamco
Nisi duis ea ipsum do esse aute esse 
Et laboris 
<div class="e-alert e-alert-inline">
  Dolor in in aliquip in nulla quis laboris 
</div>

Non lorem 
                          <div class="e-alert e-alert-inline">Aute enim deserunt consequat proident consectetur ad dolore 
                          </div>

With icon
.e-alert-withicon

Lorem ipsum dolor sit amet, consetetur sadipscing elitr 
<div class="e-alert e-alert-withicon">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>


                          <div class="e-alert e-alert-withicon"><span class="e-alert__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                          </div>

With close
.e-alert-withicon e-alert-withclose

Lorem ipsum dolor sit amet, consetetur sadipscing elitr 
<div class="e-alert e-alert-withicon e-alert-withclose">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  <div class="e-alert__close">
    <e-icon icon="close"></e-icon>
  </div>
</div>


                          <div class="e-alert e-alert-withicon e-alert-withclose"><span class="e-alert__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                            <div class="e-alert__close">
                              <e-icon icon="close"></e-icon>
                            </div>
                          </div>

Fixed
.e-alert-fixed

Show / Hide
Commodo ipsum in enim sit sed enim anim 
<div class="e-alert e-alert-fixed e-alert-withicon">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Quis cupidatat mollit excepteur occaecat officia voluptate eiusmod 
</div>


                          <div class="e-alert e-alert-fixed e-alert-withicon"><span class="e-alert__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Exercitation ut voluptate velit mollit elit adipiscing in 
                          </div>

Canvas
.e-alert-canvas

Show / Hide
Ullamco laboris cillum ex irure dolor consectetur excepteur 
<div class="e-alert e-alert-canvas e-alert-withicon">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Exercitation aliquip sed ex laborum do ut excepteur 
</div>


                          <div class="e-alert e-alert-canvas e-alert-withicon"><span class="e-alert__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Nostrud ea ex aliqua dolor eu sed veniam 
                          </div>

Color variations

default
.e-alert-default

Ex exercitation This is a link Voluptate sit est exercitation elit id ad eiusmod 
<div class="e-alert e-alert-withicon e-alert-default">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Aliquip sint 
  <a href="#">
    This is a link
  </a>
  &nbsp;Aliquip ullamco tempor consectetur minim consectetur esse fugiat 
</div>


                          <div class="e-alert e-alert-withicon e-alert-default"><span class="e-alert__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Sed exercitation <a href="#">This is a link</a>&nbsp;Cillum in do ut exercitation id cupidatat sit 
                          </div>

info
.e-alert-info

Excepteur ad This is a link Cupidatat occaecat adipiscing eu exercitation in enim laborum 
<div class="e-alert e-alert-withicon e-alert-info">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Ex proident 
  <a href="#">
    This is a link
  </a>
  &nbsp;Nostrud do sunt exercitation ut voluptate est lorem 
</div>


                          <div class="e-alert e-alert-withicon e-alert-info"><span class="e-alert__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Ut aliqua <a href="#">This is a link</a>&nbsp;Sunt nisi magna nostrud laborum id enim veniam 
                          </div>

warning
.e-alert-warning

Irure proident This is a link Tempor fugiat in lorem velit consectetur laborum consectetur 
<div class="e-alert e-alert-withicon e-alert-warning">
  <span class="e-alert__icon">
    <e-icon icon="exclamation-circle"></e-icon>
  </span>
  Sed nulla 
  <a href="#">
    This is a link
  </a>
  &nbsp;Qui cupidatat aliqua velit sint do tempor consectetur 
</div>


                          <div class="e-alert e-alert-withicon e-alert-warning"><span class="e-alert__icon">
                              <e-icon icon="exclamation-circle"></e-icon></span>Enim aliquip <a href="#">This is a link</a>&nbsp;Labore tempor et reprehenderit aute reprehenderit proident et 
                          </div>

success
.e-alert-success

Fugiat do This is a link Anim minim cillum commodo esse consequat elit consequat 
<div class="e-alert e-alert-withicon e-alert-success">
  <span class="e-alert__icon">
    <e-icon icon="e-check-circle"></e-icon>
  </span>
  Mollit ut 
  <a href="#">
    This is a link
  </a>
  &nbsp;In nostrud fugiat deserunt voluptate ut consequat lorem 
</div>


                          <div class="e-alert e-alert-withicon e-alert-success"><span class="e-alert__icon">
                              <e-icon icon="e-check-circle"></e-icon></span>Reprehenderit qui <a href="#">This is a link</a>&nbsp;Sit et laborum ut in culpa ut nulla 
                          </div>

danger
.e-alert-danger

Dolor nulla This is a link Ut eiusmod ipsum officia sint occaecat ex excepteur 
<div class="e-alert e-alert-withicon e-alert-danger">
  <span class="e-alert__icon">
    <e-icon icon="warning"></e-icon>
  </span>
  Ut nostrud 
  <a href="#">
    This is a link
  </a>
  &nbsp;Mollit elit nostrud ex sunt proident aliquip enim 
</div>


                          <div class="e-alert e-alert-withicon e-alert-danger"><span class="e-alert__icon">
                              <e-icon icon="warning"></e-icon></span>Dolore laborum <a href="#">This is a link</a>&nbsp;Sit cupidatat tempor lorem ex ipsum nostrud sunt 
                          </div>

Related components

Notice

Alert

When to use alert?

Alerts are temporary indicators on system changes that inform the users on outcomes and potential actions. They should show page, feature or system level status changes that either require an action from the user (like a warning or danger), or give feedback to the user to continue with their task (success).

Guidelines

  1. Alert text should be around 1-2 sentences long to make sure the user quickly understand what is happening.
  2. The text should clearly describe what is happening, and what the user should do.
  3. Alerts may provide a link to documentation if further explanation is required.
  4. Depending on the content, the icon should be changed if it makes the alert clearer.
  5. The color scheme of the alert should be aligned with the the content, so for example use green for positive feedback, yellow for something needs attention and red for errors.
  6. Alerts can be dismissable (with the closing "x" icon) or should be fade out after enough time has passed - depending on the content.

Last update

Message doc(alert): remove wrong character
Date:
()
Committer: rudywaltz
Component history