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

Notification

Default

Copy Pug
Copy HTML
Show code
Hide code

<e-notification key="ui:documentation:default">
  <e-notification-title>
    Lorem ullamco ad officia 
  </e-notification-title>
  <e-notification-content>
    Excepteur ut amet esse id culpa, duis pariatur. In, id tempor ad laboris ad officia ullamco, ad. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification key="ui:documentation:default"><e-notification-title>Ipsum nisi duis lorem </e-notification-title><e-notification-content>Ex cillum consectetur, qui mollit enim sint aliqua in ut aliqua eiusmod, exercitation cillum. Proident magna quis culpa sunt lorem pariatur, est eu, laboris culpa consequat. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Reprehenderit voluptate aliquip voluptate Fugiat lorem officia tempor officia ullamco? Labore cillum id ut lorem elit laboris magna velit elit. Learn more

Variations

[closable]
Copy Pug
Copy HTML
Show code
Hide code

<e-notification id="closable" closable key="ui:documentation:closable">
  <e-notification-title>
    Incididunt veniam ea sunt 
  </e-notification-title>
  <e-notification-content>
    Nulla sit dolore pariatur nulla irure, elit, mollit incididunt. Dolor ut, incididunt aliquip amet nulla in dolor aliqua fugiat do. Mollit, ut occaecat dolor ullamco mollit ut reprehenderit eu, exercitation? Magna laborum, qui, deserunt laboris, commodo reprehenderit, pariatur dolore, ex consectetur esse. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification id="closable" closable key="ui:documentation:closable"><e-notification-title>Dolore consequat ipsum lorem </e-notification-title><e-notification-content>Adipiscing pariatur magna, sunt deserunt, dolor sed commodo. Ut velit, voluptate tempor sit laboris deserunt dolor, laboris. Reprehenderit, consectetur do duis, do eiusmod aute. Minim mollit aliquip, ad lorem, lorem cillum, qui et adipiscing nulla? </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Velit consectetur cupidatat aliquip Ullamco, occaecat incididunt nisi culpa sunt non ut dolore laboris ea consectetur exercitation esse. Ut, nisi nostrud sint laboris, cillum nostrud, dolor non, sint in qui velit. Anim in qui, nostrud dolore dolore qui, anim ut velit. Deserunt enim aute consequat ut cillum, velit minim elit elit, velit, non mollit sunt. Learn more

[borderless]
Copy Pug
Copy HTML
Show code
Hide code

<e-notification borderless key="ui:documentation:closable">
  <e-notification-title>
    Cupidatat sit qui incididunt 
  </e-notification-title>
  <e-notification-content>
    Nulla, id, amet dolor in dolore enim. Veniam laboris in magna do ipsum id. Reprehenderit excepteur consectetur excepteur dolor lorem excepteur dolore exercitation laboris duis? Sed dolor, reprehenderit, pariatur, exercitation, dolore nulla adipiscing dolor. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification borderless key="ui:documentation:closable"><e-notification-title>Dolore culpa consectetur dolor </e-notification-title><e-notification-content>In labore in, in consequat consequat, sint lorem id id incididunt duis. Consequat dolor eu lorem tempor? Cupidatat et, nisi in in commodo? Incididunt ut ullamco mollit deserunt aliqua. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Dolor dolore pariatur eu Dolor voluptate, laboris irure exercitation aute cupidatat laboris aliqua, in. Dolore proident labore ut cillum in do cillum, do in consequat ullamco? Ex aliquip cillum sit in ex eiusmod adipiscing irure. Exercitation eiusmod enim, culpa ad quis dolor, minim in consectetur duis ea. Learn more

on overlay
Copy Pug
Copy HTML
Show code
Hide code

<div class="doc-field" style="position: relative; height: 400px; background: grey;">
  <e-notification-overlay>
    <e-notification id="overlay" closable key="ui:documentation:overlay">
      <e-notification-title>
        Deserunt in culpa officia 
      </e-notification-title>
      <e-notification-content>
        Sit reprehenderit, id, sunt, nostrud elit minim. Sit sint cillum quis, anim eiusmod voluptate. Sit veniam amet ut lorem duis veniam dolore sed, culpa. In consectetur excepteur dolor cillum nostrud tempor in adipiscing. 
      </e-notification-content>
      <e-notification-footer>
        <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
          <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
          <span class="e-helperlink__text">
            Learn more
          </span>
        </a>
      </e-notification-footer>
    </e-notification>
  </e-notification-overlay>
</div>
<button class="e-btn e-btn-secondary" id="restore-overlay">
  Restore notification
</button>

<div class="doc-field" style="position: relative; height: 400px; background: grey;"><e-notification-overlay><e-notification id="overlay" closable key="ui:documentation:overlay"><e-notification-title>Consectetur proident do ex </e-notification-title><e-notification-content>Lorem veniam consectetur anim id, eiusmod. Eu non velit aliquip veniam mollit non consectetur sint. Dolor aliquip fugiat magna, in officia aliquip, deserunt quis culpa dolor dolore mollit. Deserunt est, consectetur, quis do dolore ea duis et ullamco in, laboris. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification></e-notification-overlay></div><button class="e-btn e-btn-secondary" id="restore-overlay">Restore notification</button>
Dolore non ipsum deserunt Eiusmod, laborum ea cillum nisi laboris dolore culpa dolore ut? Ut tempor ut dolore tempor laboris aliquip culpa sunt dolore est magna. Ut, ut duis veniam cupidatat culpa aute. Proident dolore velit duis laborum reprehenderit tempor cupidatat dolore duis. Learn more

Types

default
Copy Pug
Copy HTML
Show code
Hide code
[type="default"]

<e-notification type="default" key="ui:documentation:typevariations:default">
  <e-notification-title>
    Minim laborum officia ex 
  </e-notification-title>
  <e-notification-content>
    Magna, duis dolor, anim laborum adipiscing voluptate est. Enim, consectetur ullamco eiusmod minim non id, consectetur ea. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification type="default" key="ui:documentation:typevariations:default"><e-notification-title>Ut sed deserunt deserunt </e-notification-title><e-notification-content>Mollit, ut enim in consectetur, incididunt laboris consequat magna in, dolore, in, eiusmod, do aute quis. Voluptate labore velit ad, magna et sunt, et, excepteur in. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Dolore ad adipiscing deserunt Dolor quis, duis elit, dolore ullamco sint do lorem deserunt. Nisi minim labore labore tempor veniam, enim lorem officia qui. Learn more

info
Copy Pug
Copy HTML
Show code
Hide code
[type="info"]

<e-notification type="info" key="ui:documentation:typevariations:info">
  <e-notification-title>
    Deserunt minim esse ut 
  </e-notification-title>
  <e-notification-content>
    Anim dolore commodo et dolore velit mollit? Consectetur, esse commodo elit enim nisi, ipsum ut. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification type="info" key="ui:documentation:typevariations:info"><e-notification-title>Laboris pariatur in ut </e-notification-title><e-notification-content>Reprehenderit, irure cillum et reprehenderit, in, lorem. Eiusmod est consectetur tempor nostrud dolor tempor, voluptate tempor? </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Dolor laborum in lorem Officia pariatur ullamco veniam, velit laborum reprehenderit lorem anim. Cupidatat nostrud ut nostrud do non, cupidatat, commodo velit consectetur? Learn more

warning
Copy Pug
Copy HTML
Show code
Hide code
[type="warning"]

<e-notification type="warning" key="ui:documentation:typevariations:warning">
  <e-notification-title>
    Elit et ut dolor 
  </e-notification-title>
  <e-notification-content>
    Voluptate culpa, elit non voluptate, dolor tempor, reprehenderit. Pariatur duis dolore lorem lorem. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification type="warning" key="ui:documentation:typevariations:warning"><e-notification-title>Lorem labore sunt eiusmod </e-notification-title><e-notification-content>Ea qui, occaecat eiusmod consequat, amet exercitation laboris in. Reprehenderit enim ullamco, ex eiusmod, exercitation eu culpa dolore lorem tempor proident. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Cillum quis reprehenderit pariatur In nisi irure aliqua minim dolore sed dolor dolor, adipiscing nulla, laboris. Aliquip eiusmod ex est, amet voluptate sed amet culpa id, voluptate dolor anim incididunt? Learn more

success
Copy Pug
Copy HTML
Show code
Hide code
[type="success"]

<e-notification type="success" key="ui:documentation:typevariations:success">
  <e-notification-title>
    Excepteur aliquip tempor esse 
  </e-notification-title>
  <e-notification-content>
    Adipiscing proident pariatur labore, labore in commodo deserunt est in nostrud commodo. Magna proident, ut, aliqua non deserunt, do velit officia ut consequat? 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification type="success" key="ui:documentation:typevariations:success"><e-notification-title>Sint officia ad nisi </e-notification-title><e-notification-content>Id incididunt esse duis adipiscing ipsum nulla. Tempor voluptate nisi in, aute, nulla, nostrud nisi aute. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Reprehenderit elit in incididunt Cillum, occaecat laboris ea ut ut incididunt eiusmod ad. Et cillum aute, id pariatur, duis, qui nulla enim? Learn more

danger
Copy Pug
Copy HTML
Show code
Hide code
[type="danger"]

<e-notification type="danger" key="ui:documentation:typevariations:danger">
  <e-notification-title>
    Ut dolore voluptate sunt 
  </e-notification-title>
  <e-notification-content>
    Duis, qui voluptate, ut eu, aliquip id ullamco esse. Cupidatat cupidatat dolor in incididunt minim quis nisi labore. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification type="danger" key="ui:documentation:typevariations:danger"><e-notification-title>In exercitation aliquip aute </e-notification-title><e-notification-content>Quis, sit dolore id consequat enim ut culpa, eu. Ut dolore ad sunt nisi nulla, eu, dolore ut deserunt veniam excepteur, incididunt dolor culpa duis. </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Nostrud id in commodo Aliqua commodo pariatur, eiusmod, esse esse quis mollit amet, eu do, fugiat? Enim et do, pariatur amet quis in aliqua sed. Learn more

neutral
Copy Pug
Copy HTML
Show code
Hide code
[type="neutral"]

<e-notification type="neutral" key="ui:documentation:typevariations:neutral">
  <e-notification-title>
    Eiusmod pariatur est id 
  </e-notification-title>
  <e-notification-content>
    Commodo consectetur amet exercitation ipsum culpa dolore? Aliquip ut exercitation ut excepteur? 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>

<e-notification type="neutral" key="ui:documentation:typevariations:neutral"><e-notification-title>Officia sunt consequat ex </e-notification-title><e-notification-content>Ipsum dolor laboris id enim irure proident ea. Reprehenderit nostrud cillum lorem do reprehenderit, nostrud est, exercitation, excepteur? </e-notification-content><e-notification-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-notification-footer></e-notification>
Ut dolor ut dolor Sed ad deserunt magna deserunt sed in magna. Ut sit, consequat proident, commodo, nisi amet adipiscing mollit, cupidatat, ullamco culpa? Learn more

API Reference

Properties

NameDescriptionTypeRequiredDefault value
typeDetermines the color and icon of the notification. It can be default, info, warning, success, danger or neutral.stringdefault
closableMakes the notification closable. Closed notification won't appear anymore.booleanfalse
keyAn identifier for tracking events and storing closed state. It should be unique.string

Method

NameDescription
close()Close the notification.

Events

EventDescriptionReturns
appearFires when the component rendered{ detail: { component: [as object] } }
closeFires on close

Related components

AlertNoticeSidepanel