Link copied!

Notification Examples

<e-notification>
  <e-notification-title>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </e-notification-content>
  <e-notification-footer>
    <div class="e-grid e-grid-xsmall e-grid-wrap e-grid-vertical_center">
      <div class="e-cell e-cell-xsmall">
        <button class="e-btn e-btn-primary">
          Primary Button
        </button>
      </div>
      <div class="e-cell e-cell-xsmall">
        <button class="e-btn">
          Button Label
        </button>
      </div>
    </div>
  </e-notification-footer>
</e-notification>
<e-notification icon="e-smile">
  <e-notification-title>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </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 icon="e-bullhorn" color="purple-500">
  <e-notification-title>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </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 closable>
  <e-notification-title>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </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>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </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>
Copy Javascript
Copied to clipboard! 
document.querySelector('#restore-closable').addEventListener('click', function() {
  localStorage.removeItem('ui:notification:ui:documentation:closable');
  location.reload(false);
});
<e-notification closable>
  <e-notification-title>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-subtitle>
    <e-time datetime="2020-07-06T14:12:15.087"></e-time>, from Email Channel
  </e-notification-subtitle>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </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">
  <e-notification-title>
    Notification Default Type
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </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>

<div class="e-margin-l"></div>

<e-notification type="info">
  <e-notification-title>
    Notification Info Type
  </e-notification-title>
  <e-notification-content>
    Et aliquip ex esse, do, aute laborum in est? Cillum aute nulla culpa.
  </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>

<div class="e-margin-l"></div>

<e-notification type="success">
  <e-notification-title>
    Notification Success Type
  </e-notification-title>
  <e-notification-content>
    Dolore enim ut ut? Qui ut lorem in cupidatat.
  </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>

<div class="e-margin-l"></div>

<e-notification type="warning">
  <e-notification-title>
    Notification Warning Type
  </e-notification-title>
  <e-notification-content>
    Esse excepteur, culpa aute fugiat, qui aliquip quis, reprehenderit lorem 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>

<div class="e-margin-l"></div>

<e-notification type="error">
  <e-notification-title>
    Notification Error Type
  </e-notification-title>
  <e-notification-content>
    Tempor consequat, aliqua adipiscing ullamco adipiscing sed ullamco. Ut, veniam, ex dolore ut anim eiusmod ut in occaecat cupidatat.
  </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="loading">
  <e-notification-title>
    Notification Title Goes Here
  </e-notification-title>
  <e-notification-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
  </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>
<div class="e-buttongroup">
  <a class="e-btn open-notification-button" id="showFeedbackButton" href="#0" data-placement="top">
    Open Feedback Notification
  </a>
</div>
Copy Javascript
Copied to clipboard! 
function showFeedback() {
  window.e.utils.openNotification({
    title: 'Email Not Sent',
    type: 'error',
    content: 'We encountered an error and couldn\'t send the email. Please try again.',
    placement: 'top'
  });
};

document.getElementById('showFeedbackButton').addEventListener('click', event => {
  showFeedback();
});

showFeedback();
<div class="e-buttongroup">
  <a class="e-btn open-notification-button" id="showAutocloseButton" href="#0" data-placement="top">
    Open Autoclose Notification
  </a>
</div>
Copy Javascript
Copied to clipboard! 
function showAutocloseNotification() {
  window.e.utils.openNotification({
    title: 'Email Not Sent',
    type: 'info',
    content: 'We encountered an error and couldn\'t send the email. Please try again.',
    placement: 'top',
    autoClose: true
  });
};

document.getElementById('showAutocloseButton').addEventListener('click', event => {
  showAutocloseNotification();
});

showAutocloseNotification();
<div class="e-buttongroup">
  <a class="e-btn open-notification-button" id="openNotificationOnTopButton" href="#0" data-placement="top">
    Open Top Notification
  </a>
  <a class="e-btn open-notification-button" id="openNotificationOnBottomRightButton" href="#0" data-placement="bottom-right">
    Open Bottom-Right Notification
  </a>
</div>
Copy Javascript
Copied to clipboard! 
let count = 1;

document.getElementById('openNotificationOnTopButton').addEventListener('click', event => {
  window.e.utils.openNotification({
    title: `Notification Title Goes Here #${count++}`,
    content: 'Lorem ipsum dolor sit amet.',
    buttons: [
      {
        text: 'Button Label',
        icon: 'pencil',
        primary: true,
        onClick: () => console.log('button clicked')
      }
    ],
    placement: 'top'
  });
});

document.getElementById('openNotificationOnBottomRightButton').addEventListener('click', event => {
  window.e.utils.openNotification({
    title: `Notification Title Goes Here #${count++}`,
    content: 'Lorem ipsum dolor sit amet.',
    buttons: [
      {
        text: 'Button Label',
        icon: 'pencil',
        primary: true,
        onClick: () => console.log('button clicked')
      }
    ],
    placement: 'bottom-right'
  });
});
<e-notification icon="e-bullhorn" color="purple-500" closable id="productnews1" key="ui:documentation:productnews1">
  <e-notification-title>
    New Program Statuses
  </e-notification-title>
  <e-notification-content>
    We've updated the program statuses to make them easier to understand and use.
  </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>
Copy Javascript
Copied to clipboard! 
document.querySelector('#restore-closable').addEventListener('click', function() {
  localStorage.removeItem('ui:notification:ui:documentation:productnews1');
  location.reload(false);
});