Alerts Component

Alerts or dialogs inform users about a task, system states and user actions, can contain critical information, require decisions or involve multiple tasks.

With personalization, you add a little emotional weight to the information, from warnings to a critical failure of the system or from the success of an operation to neutral information.



Observations

This section shows how to create an alert of each type, using only one color as an example. If you want to see all the colors then go to the previews of the alerts.

Default


Consectetur adipiscing elit lorem ipsum dolor.
  <div class="e-alert">
    Consectetur lorem ipsum dolor.
  </div>

With any color


Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
  <div class="e-alert primary">
    Consectetur lorem ipsum dolor.
  </div>

  <div class="e-alert purple-gradient">
    Consectetur lorem ipsum dolor.
  </div>
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
  <div class="e-alert success">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  </div>

  <div class="e-alert danger">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  </div>
 

Status


Hi, I'm success.
Hi, I'm warning.
Hi, I'm danger.
Hi, I'm info.
    <div class="e-alert success">
      <i class="fas fa-check e-icon"></i> Hi, I'm success.
    </div>

    <div class="e-alert warning">
      <i class="fas fa-exclamation-circle e-icon"></i> Hi, I'm warning.
    </div>

    <div class="e-alert danger">
      <i class="fas fa-exclamation-triangle e-icon"></i> Hi, I'm danger.
    </div>

    <div class="e-alert sky">
      <i class="fas fa-info-circle e-icon"></i> Hi, I'm info.
    </div>
 

Snack


Hi, I'm success.
Hi, I'm warning.
Consectetur lorem ipsum dolor.
Consectetur lorem ipsum dolor.
    <div class="e-alert snack success">
      <i class="fas fa-check e-icon"></i> Hi, I'm success.
    </div>

    <div class="e-alert snack warning">
      <i class="fas fa-exclamation-circle e-icon"></i> Hi, I'm warning.
    </div>

    <div class="e-alert snack purple-gradient">
      Consectetur adipiscing elit lorem ipsum dolor.
    </div>

    <div class="e-alert snack blue-gradient">
      Consectetur adipiscing elit lorem ipsum dolor.
    </div>
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
  <div class="e-alert snack green-gradient">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  </div>

  <div class="e-alert snack purple-gradient">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  </div>
 

Rounded Alerts


Hi, I'm success.
Hi, I'm warning.
Consectetur lorem ipsum dolor.
Consectetur lorem ipsum dolor.
   <div class="e-alert rounded success">
     <i class="fas fa-check e-icon"></i> Hi, I'm success.
   </div>

   <div class="e-alert rounded warning">
     <i class="fas fa-exclamation-circle e-icon"></i> Hi, I'm warning.
   </div>

   <div class="e-alert rounded danger">
     Consectetur lorem ipsum dolor.
   </div>

   <div class="e-alert rounded purple">
     Consectetur lorem ipsum dolor.
   </div>
 

With buttons


Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
  <div class="e-alert sky">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
    <div class="alert-footer">
      <a class="e-btn inverted sky">Cancel</a>
      <a class="e-btn plane transparent">Accept</a>
    </div>
  </div>

  <div class="e-alert snack danger">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
    <div class="alert-footer">
      <a class="e-btn plane transparent">Read</a>
    </div>
  </div>

  <div class="e-alert snack purple-gradient">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit lorem ipsum dolor.
    <div class="alert-footer">
      <a class="e-btn inverted purple">Cancel</a>
      <a class="e-btn inverted purple">Accept</a>
    </div>
  </div>

  <div class="e-alert white">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit lorem ipsum dolor.
    <div class="alert-footer">
      <a class="e-btn plane fullwidth purple">Accept</a>
    </div>
  </div>
 

With title


Lorem ipsum dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

Lorem ipsum dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
  <div class="e-alert white">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    <h4>Lorem ipsum dolor?</h4>
    Lorem ipsum dolor sit amet, Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
    <div class="alert-footer">
      <a class="e-btn plane inverted purple">Cancel</a>
      <a class="e-btn plane inverted purple">Accept</a>
    </div>
  </div>

  <div class="e-alert blue-gradient">
    <a class="e-delete"><i aria-hidden="true">&times;</i></a>
    <h4>Lorem ipsum dolor?</h4>
    Lorem ipsum dolor sit amet, Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
    <div class="alert-footer">
      <a class="e-btn plane transparent">Ok.</a>
    </div>
  </div>
 
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron