Link copied!

Illustrated Message Examples

<e-illustrated-message>
  <e-icon icon="picture-o" size="large" color="inherit" slot="icon"></e-icon>
  <div slot="title">Title Goes Here</div>
  <div slot="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.</div>
  <button class="e-btn e-btn-highlight" slot="actions">Primary Action</button>
  <button class="e-btn" slot="actions">Secondary Action</button>
  <button class="e-btn e-btn-link" slot="helperlink">
    <e-icon icon="e-helperlink"></e-icon>Learn More
  </button>
</e-illustrated-message>
<e-illustrated-message layout="horizontal">
  <e-icon icon="picture-o" size="large" color="inherit" slot="icon"></e-icon>
  <div slot="title">Title Goes Here</div>
  <div slot="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.</div>
  <button class="e-btn e-btn-highlight" slot="actions">Primary Action</button>
  <button class="e-btn" slot="actions">Secondary Action</button>
</e-illustrated-message>
<div class="e-grid e-grid-medium e-grid-wrap">
  <e-illustrated-message type="faint">
    <e-icon icon="search" size="large" color="inherit" slot="icon"></e-icon>
    <div slot="title">No Search Results</div>
    <div slot="description">Could not find anything for this keyword, try refining your search.</div>
  </e-illustrated-message>

  <e-illustrated-message type="success">
    <e-icon icon="e-celebrate" size="large" color="inherit" slot="icon"></e-icon>
    <div slot="title">Campaign Scheduled</div>
    <div slot="description">The campaign will be sent on 2022-12-24 at 23:45. Awesome!</div>
    <button class="e-btn e-btn-highlight" slot="actions">Back to Overview</button>
  </e-illustrated-message>

  <e-illustrated-message type="error">
    <e-icon icon="e-error" size="large" color="inherit" slot="icon"></e-icon>
    <div slot="title">Couldn't Load Items</div>
    <div slot="description">We couldn’t load the items at this time, please try again.</div>
    <button class="e-btn e-btn-highlight" slot="actions">Reload</button>
  </e-illustrated-message>

  <e-illustrated-message type="warning">
    <e-icon icon="warning" size="large" color="inherit" slot="icon"></e-icon>
    <div slot="title">Run Script?</div>
    <div slot="description">Please make sure the script contains no harmful elements.</div>
    <button class="e-btn e-btn-highlight" slot="actions">Run Script</button>
  </e-illustrated-message>

  <e-illustrated-message type="ai">
    <e-icon icon="ai" size="large" color="inherit" slot="icon"></e-icon>
    <div slot="title">New AI Feature</div>
    <div slot="description">If you want to use the new AI feature, please accept the terms and conditions.</div>
    <button class="e-btn e-btn-highlight" slot="actions">Review Document</button>
  </e-illustrated-message>
</div>
<div class="e-grid e-grid-medium e-grid-wrap">
  <e-illustrated-message>
    <e-icon icon="search" size="large" color="inherit" slot="icon"></e-icon>
    <div slot="title">Large Icon Size</div>
    <div slot="description">Could not find anything for this keyword, try refining your search.</div>
  </e-illustrated-message>

  <e-illustrated-message>
    <e-icon icon="e-celebrate" size="default" color="inherit" slot="icon"></e-icon>
    <div slot="title">Default icon size</div>
    <div slot="description">The campaign will be sent on 2022-12-24 at 23:45. Awesome!</div>
  </e-illustrated-message>
</div>