Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Alert

Alerts are temporary indicators on system changes that inform the users on outcomes and potential actions.

Default

Copy Pug
Copy HTML
Show code
Hide code
.e-alert

<div class="e-alert">
  Magna laborum reprehenderit laboris ad mollit incididunt duis 
</div>

<div class="e-alert">Duis proident tempor non adipiscing incididunt minim enim </div>
Do veniam velit magna voluptate commodo sunt ea

Variations

Sticky
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-sticky

<div class="e-alert e-alert-sticky">
  Culpa veniam in proident et lorem exercitation nostrud 
</div>
<div class="e-alert e-alert-sticky">
  Est quis consequat sit laboris officia minim tempor 
</div>
<div class="e-alert e-alert-sticky">
  Duis sit commodo qui dolor commodo eiusmod quis 
</div>

<div class="e-alert e-alert-sticky">Nisi aute dolor pariatur incididunt laboris fugiat eiusmod </div><div class="e-alert e-alert-sticky">Elit nisi ex exercitation qui enim eiusmod enim </div><div class="e-alert e-alert-sticky">Nulla tempor dolore est cupidatat magna duis sint </div>
Incididunt excepteur exercitation quis laboris magna ex exercitation
Duis excepteur enim laboris sed commodo in velit
Sunt ex commodo nisi reprehenderit et in exercitation

Condensed
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-condensed

<div class="e-alert e-alert-condensed">
  Aliqua in pariatur veniam nostrud commodo qui aliquip 
</div>
<div class="e-alert e-alert-condensed">
  Nulla ipsum tempor consequat dolore laboris aliquip cupidatat 
</div>
<div class="e-alert e-alert-condensed">
  Cillum ut reprehenderit anim aliqua consectetur consequat amet 
</div>

<div class="e-alert e-alert-condensed">Nisi eiusmod reprehenderit voluptate lorem ex aliqua cupidatat </div><div class="e-alert e-alert-condensed">Eu excepteur anim occaecat ad reprehenderit ea ex </div><div class="e-alert e-alert-condensed">Tempor non proident quis nisi ex aliqua nostrud </div>
Sit minim veniam ex in consequat eu laboris
In consectetur consectetur sunt aute esse ut non
Ex sint sunt minim voluptate mollit aliqua occaecat

Inline
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-inline

Officia amet 
<div class="e-alert e-alert-inline">
  Aute esse in ut dolor dolor ut ipsum 
</div>

Ullamco pariatur <div class="e-alert e-alert-inline">Reprehenderit sed ut occaecat in nostrud duis in </div>
Commodo tempor
Laboris in qui id velit proident veniam duis

With icon
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-withicon

<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>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr

With close
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-withicon e-alert-withclose

<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>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Fixed
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-fixed

<div class="e-alert e-alert-fixed e-alert-withicon">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Adipiscing ipsum exercitation anim incididunt id nulla anim 
</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>Laborum ea fugiat in incididunt incididunt labore occaecat </div>
Show / Hide
Id minim adipiscing ut deserunt aliquip proident fugiat

Canvas
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-canvas

<div class="e-alert e-alert-canvas e-alert-withicon">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Aute ut velit dolor in sunt tempor ut 
</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>Tempor sit voluptate nostrud anim dolor amet deserunt </div>
Show / Hide
Dolore sit et irure reprehenderit in velit esse

Color variations

default
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-default

<div class="e-alert e-alert-withicon e-alert-default">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Dolor incididunt 
  <a href="#">
    This is a link
  </a>
  &nbsp;Ut duis nisi eiusmod dolor occaecat lorem commodo 
</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>Adipiscing sed <a href="#">This is a link</a>&nbsp;Tempor et ex eiusmod id fugiat elit dolore </div>
Dolor sint This is a link In sed elit fugiat ex tempor commodo adipiscing

info
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-info

<div class="e-alert e-alert-withicon e-alert-info">
  <span class="e-alert__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Esse sint 
  <a href="#">
    This is a link
  </a>
  &nbsp;Laborum dolore velit do consequat est duis commodo 
</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 excepteur <a href="#">This is a link</a>&nbsp;Ullamco sed sunt aliqua eiusmod magna commodo occaecat </div>
Qui esse This is a link Non sed velit ut exercitation labore tempor magna

warning
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-warning

<div class="e-alert e-alert-withicon e-alert-warning">
  <span class="e-alert__icon">
    <e-icon icon="exclamation-circle"></e-icon>
  </span>
  Sit in 
  <a href="#">
    This is a link
  </a>
  &nbsp;Cillum dolore nostrud laborum dolore mollit occaecat nulla 
</div>

<div class="e-alert e-alert-withicon e-alert-warning"><span class="e-alert__icon"><e-icon icon="exclamation-circle"></e-icon></span>Incididunt minim <a href="#">This is a link</a>&nbsp;Do laborum tempor labore do ad sit proident </div>
Excepteur consectetur This is a link Id culpa et esse reprehenderit esse irure sed

success
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-success

<div class="e-alert e-alert-withicon e-alert-success">
  <span class="e-alert__icon">
    <e-icon icon="e-check-circle"></e-icon>
  </span>
  Est ut 
  <a href="#">
    This is a link
  </a>
  &nbsp;Dolor anim sit eiusmod non ut ad sunt 
</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>Ipsum esse <a href="#">This is a link</a>&nbsp;Non non cupidatat mollit proident dolor elit ullamco </div>
Ut laborum This is a link Nisi irure nisi ut dolore nisi duis in

danger
Copy Pug
Copy HTML
Show code
Hide code
.e-alert-danger

<div class="e-alert e-alert-withicon e-alert-danger">
  <span class="e-alert__icon">
    <e-icon icon="warning"></e-icon>
  </span>
  Consectetur ullamco 
  <a href="#">
    This is a link
  </a>
  &nbsp;Incididunt magna duis minim elit enim aute in 
</div>

<div class="e-alert e-alert-withicon e-alert-danger"><span class="e-alert__icon"><e-icon icon="warning"></e-icon></span>Magna cupidatat <a href="#">This is a link</a>&nbsp;Laboris non fugiat ea in reprehenderit duis pariatur </div>
Ad ex This is a link Occaecat exercitation ullamco labore nostrud deserunt tempor culpa

Related components

NoticeNotification

Alert

Alerts are temporary indicators on system changes that inform the users on outcomes and potential actions.

Structure

Best practices

Alert 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).
  • Have short texts, around 1-2 sentences long to make sure the user quickly understands what is happening.
  • Clearly describe what is happening, and what the user should do.
  • Provide a link to documentation if further explanation is required.
  • Have icons that makes the meaning of the alert clearer.
  • Have a color scheme aligned to the content, for example green for positive feedback, yellow for something needs attention and red for errors.
  • Dismissable (with the closing "x" icon) or should be fade out after enough time has passed - depending on the content.

Try to avoid:

  • Showing permanent alerts the user cannot dismiss
  • Showing multiple messages in the same alert
  • Writing general text ("Something has happened")

Content guidelines