UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

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(search): new tags and hidden components --skip-ci
Committer: Tamás Bíró
Version history

Default

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

<div class="e-alert">
  Ullamco duis consectetur aliqua ullamco pariatur laboris adipiscing 
</div>


                                <div class="e-alert">Qui irure in ea ex veniam incididunt pariatur 
                                </div>
Aliqua lorem nostrud quis in et dolor cupidatat

Variations

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

<div class="e-alert e-alert-sticky">
  Lorem cillum do eiusmod ullamco adipiscing lorem sint 
</div>
<div class="e-alert e-alert-sticky">
  Ut id qui ea aute nostrud esse commodo 
</div>
<div class="e-alert e-alert-sticky">
  Magna proident laborum anim duis adipiscing dolor ipsum 
</div>


                                  <div class="e-alert e-alert-sticky">Deserunt aliquip ipsum in ullamco eu aliqua sit 
                                  </div>
                                  <div class="e-alert e-alert-sticky">Ut fugiat pariatur nulla nisi dolor incididunt aliqua 
                                  </div>
                                  <div class="e-alert e-alert-sticky">Ipsum aliqua eu exercitation non esse aliqua anim 
                                  </div>
Sunt anim ut sit sint adipiscing ut nostrud
Sit deserunt dolor veniam ut cupidatat ipsum ad
Proident labore ea ut ut aliquip ut fugiat

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

<div class="e-alert e-alert-condensed">
  Consequat nostrud magna deserunt sint qui esse laboris 
</div>
<div class="e-alert e-alert-condensed">
  Mollit dolore excepteur ut laboris dolore lorem officia 
</div>
<div class="e-alert e-alert-condensed">
  Occaecat non esse anim incididunt do ad ut 
</div>


                                  <div class="e-alert e-alert-condensed">Ea elit culpa est laborum nulla eu ex 
                                  </div>
                                  <div class="e-alert e-alert-condensed">Commodo amet ea consectetur in excepteur laborum id 
                                  </div>
                                  <div class="e-alert e-alert-condensed">Nisi dolore enim sed ad commodo dolore ex 
                                  </div>
Ad in ipsum eu enim do do dolore
Nulla velit aute nulla do sit in aliqua
Nostrud aliquip ullamco irure nisi ullamco commodo velit

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

Id ex 
<div class="e-alert e-alert-inline">
  Sed magna sint elit dolore labore aute excepteur 
</div>

Labore amet 
                                  <div class="e-alert e-alert-inline">Dolore aliqua amet est ut excepteur est voluptate 
                                  </div>
Consectetur proident
Et incididunt do adipiscing velit dolore commodo sit

With icon
Copy Jade
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 Jade
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 Jade
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 ut veniam sit ipsum laboris duis 
</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>Sit non nisi pariatur nulla dolor consectetur exercitation 
                                  </div>
Show / Hide
Veniam eiusmod consequat aliquip pariatur lorem laborum deserunt

Canvas
Copy Jade
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>
  Irure ut lorem eu aute sint in duis 
</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>Irure nostrud ea occaecat nostrud sunt in ut 
                                  </div>
Show / Hide
Aliquip in amet excepteur non adipiscing officia non

Color variations

default
Copy Jade
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>
  Magna in 
  <a href="#">
    This is a link
  </a>
  &nbsp;Ut aliquip pariatur est proident ut ex do 
</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>Tempor cupidatat <a href="#">This is a link</a>&nbsp;Dolor amet in dolor ad exercitation ex enim 
                                  </div>
Dolor est This is a link Ex minim fugiat minim qui proident sit in

info
Copy Jade
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>
  Elit ex 
  <a href="#">
    This is a link
  </a>
  &nbsp;Aliquip anim anim sunt nulla labore eiusmod duis 
</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>Eu ut <a href="#">This is a link</a>&nbsp;Tempor reprehenderit non laborum ex aliqua ex enim 
                                  </div>
Ullamco ea This is a link In eu pariatur id ut laboris officia nostrud

warning
Copy Jade
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>
  Irure aute 
  <a href="#">
    This is a link
  </a>
  &nbsp;Anim occaecat et qui irure incididunt et sed 
</div>


                                  <div class="e-alert e-alert-withicon e-alert-warning"><span class="e-alert__icon">
                                      <e-icon icon="exclamation-circle"></e-icon></span>Ea in <a href="#">This is a link</a>&nbsp;Excepteur sint enim aute adipiscing aliqua elit ut 
                                  </div>
Do veniam This is a link Aliquip labore mollit ipsum duis sit in officia

success
Copy Jade
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>
  Veniam sed 
  <a href="#">
    This is a link
  </a>
  &nbsp;Eu occaecat id in fugiat ut amet ad 
</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>Anim cupidatat <a href="#">This is a link</a>&nbsp;Anim esse proident enim dolor ad fugiat incididunt 
                                  </div>
Eiusmod qui This is a link Pariatur in mollit est veniam consequat in consequat

danger
Copy Jade
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>
  Non exercitation 
  <a href="#">
    This is a link
  </a>
  &nbsp;Amet minim reprehenderit irure fugiat aliqua ut reprehenderit 
</div>


                                  <div class="e-alert e-alert-withicon e-alert-danger"><span class="e-alert__icon">
                                      <e-icon icon="warning"></e-icon></span>Lorem et <a href="#">This is a link</a>&nbsp;Reprehenderit qui mollit nisi excepteur nulla cillum nisi 
                                  </div>
Do cillum This is a link Eu aute cupidatat irure nisi ullamco ut non

Related components

Notice