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.
<div class="e-alert">
Consectetur lorem ipsum dolor.
</div> <div class="e-alert primary">
Consectetur lorem ipsum dolor.
</div>
<div class="e-alert purple-gradient">
Consectetur lorem ipsum dolor.
</div>
<div class="e-alert success">
<a class="e-delete"><i aria-hidden="true">×</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">×</i></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
</div>
<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>
<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>
<div class="e-alert snack green-gradient">
<a class="e-delete"><i aria-hidden="true">×</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">×</i></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
</div>
<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>
<div class="e-alert sky">
<a class="e-delete"><i aria-hidden="true">×</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">×</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">×</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">×</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>
<div class="e-alert white">
<a class="e-delete"><i aria-hidden="true">×</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">×</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>
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.
