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

Notice

Notices are indicators on system or process status. They offer feedback on what's happening within the Marketing Cloud that informs the users so they can decide on if something needs their attention or action.

Default

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

<div class="e-notice">
  Mollit aute cupidatat aliqua consequat ex ut irure 
</div>

<div class="e-notice">Et ut deserunt consectetur adipiscing laboris laboris aute </div>
Sunt proident ullamco nostrud aliquip consectetur ut quis

Variations

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

<div class="e-notice e-notice-sticky">
  Consectetur esse et ad in elit 
</div>
<div class="e-notice e-notice-sticky">
  Duis et dolor reprehenderit id ut 
</div>
<div class="e-notice e-notice-sticky">
  Aliquip aliqua cillum magna nulla esse 
</div>
<div class="e-notice e-notice-sticky">
  In laborum reprehenderit pariatur occaecat pariatur 
</div>

<div class="e-notice e-notice-sticky">In do adipiscing dolor reprehenderit cillum </div><div class="e-notice e-notice-sticky">Reprehenderit fugiat ut adipiscing pariatur mollit </div><div class="e-notice e-notice-sticky">Occaecat laboris eu nostrud proident officia </div><div class="e-notice e-notice-sticky">In pariatur ad et tempor consectetur </div>
Proident labore dolor elit reprehenderit dolor
Id amet consectetur dolore nulla aute
Cupidatat in ullamco ut aliqua nulla
Aute ut magna deserunt aliquip exercitation

With loading spinner
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-icon e-spinner

<div class="e-notice e-notice-withicon">
  <span class="e-notice__icon">
    <e-spinner data-size="small"></e-spinner>
  </span>
  Eu aute aute sint aliquip deserunt ipsum? 
</div>

<div class="e-notice e-notice-withicon"><span class="e-notice__icon"><e-spinner data-size="small"></e-spinner></span>Reprehenderit quis, excepteur non veniam aliquip nulla, labore? </div>
Esse consectetur, duis est incididunt enim magna.

Highlight
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-highlight

<div class="e-notice e-notice-highlight">
  Qui voluptate aliqua proident elit sed 
</div>

<div class="e-notice e-notice-highlight">Velit aute deserunt quis culpa ut </div>
Duis et eiusmod sed laboris pariatur

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

<div class="e-notice e-notice-withicon">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Excepteur est consectetur ad est laboris 
</div>

<div class="e-notice e-notice-withicon"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span>Dolor fugiat laboris consectetur quis commodo </div>
Quis reprehenderit id aute adipiscing enim

With big icon
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-withbigicon

<div class="e-notice e-notice-withbigicon">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Officia aliquip sunt ut in incididunt 
  <br>
  Laboris consectetur in aute exercitation et labore nulla 
</div>

<div class="e-notice e-notice-withbigicon"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span>Ad ut commodo tempor dolore laborum <br>Ad commodo in ex est in minim et </div>
In nulla exercitation ut irure qui
Fugiat ut pariatur excepteur culpa laboris lorem aliqua

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

<div class="e-notice e-notice-withicon e-notice-withclose">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Reprehenderit excepteur excepteur dolore laborum ut 
  <div class="e-notice__close">
    <e-icon icon="close"></e-icon>
  </div>
</div>

<div class="e-notice e-notice-withicon e-notice-withclose"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span>Eiusmod occaecat ut deserunt id excepteur <div class="e-notice__close"><e-icon icon="close"></e-icon></div></div>
Deserunt adipiscing anim dolor do reprehenderit

With title, date and footer
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-withicon e-notice-withclose

<div class="e-notice e-notice-withicon e-notice-withclose">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Lorem ipsum dolor sit.
    <time datetime="2015-08-31 12:00">
      2015-08-31 12:00
    </time>
  </div>
  Proident in mollit et ut ullamco 
  <div class="e-notice__footer">
    <a href="#">
      Details link
    </a>
  </div>
  <div class="e-notice__close">
    <e-icon icon="close"></e-icon>
  </div>
</div>

<div class="e-notice e-notice-withicon e-notice-withclose"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span><div class="e-notice__title">Lorem ipsum dolor sit.<time datetime="2015-08-31 12:00">2015-08-31 12:00</time></div>Sed excepteur tempor est mollit reprehenderit <div class="e-notice__footer"><a href="#">Details link</a></div><div class="e-notice__close"><e-icon icon="close"></e-icon></div></div>
Lorem ipsum dolor sit.
Magna consequat anim voluptate proident pariatur
Details link

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

<div class="e-notice e-notice-fixed e-notice-withicon">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Id aliquip dolore adipiscing 
  </div>
  Quis enim dolor amet eu dolore 
</div>

<div class="e-notice e-notice-fixed e-notice-withicon"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span><div class="e-notice__title">Ut fugiat sit anim </div>Commodo aute veniam nisi veniam mollit </div>
Show / Hide
Aliquip aliqua excepteur elit
Reprehenderit qui velit anim ut excepteur

Toast
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-toast

<div class="e-notice e-notice-toast e-notice-withicon">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Exercitation dolore incididunt quis 
  </div>
  Ipsum id quis in id mollit 
</div>

<div class="e-notice e-notice-toast e-notice-withicon"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span><div class="e-notice__title">Aliquip quis non proident </div>Minim exercitation enim exercitation reprehenderit irure </div>
Show / Hide
Nisi mollit laborum exercitation
Voluptate quis adipiscing nulla ea commodo

Widget
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-widget

<div style="position: relative; height: 353px; width: 620px;">
  <div class="e-notice e-notice-withicon e-notice-withclose e-notice-withbigicon e-notice-widget">
    <span class="e-notice__icon">
      <e-icon icon="e-b2clogo-simple"></e-icon>
    </span>
    <div class="e-notice__title">
      Database performance improved
      <time datetime="2015-08-31 12:00">
        2015-08-31 12:00
      </time>
    </div>
    To help you work with Emarsys faster, we have improved our database performance.
    <a href>
      Tell me about the improvements.
    </a>
    <div class="e-notice__footer">
      <div class="float-left">
        <input class="e-checkbox" type="checkbox" id="database-overlay-notification-remember">
        <label for="database-overlay-notification-remember">
          Don't show this message again
        </label>
      </div>
      <div class="float-right">
        <div class="e-btn e-btn-primary">
          Show Database Growth
        </div>
      </div>
    </div>
    <div class="e-notice__close">
      <e-icon icon="close"></e-icon>
    </div>
  </div>
</div>

<div style="position: relative; height: 353px; width: 620px;"><div class="e-notice e-notice-withicon e-notice-withclose e-notice-withbigicon e-notice-widget"><span class="e-notice__icon"><e-icon icon="e-b2clogo-simple"></e-icon></span><div class="e-notice__title">Database performance improved<time datetime="2015-08-31 12:00">2015-08-31 12:00</time></div>To help you work with Emarsys faster, we have improved our database performance.<a href="">Tell me about the improvements.</a><div class="e-notice__footer"><div class="float-left"><input class="e-checkbox" type="checkbox" id="database-overlay-notification-remember"><label for="database-overlay-notification-remember">Don't show this message again</label></div><div class="float-right"><div class="e-btn e-btn-primary">Show Database Growth</div></div></div><div class="e-notice__close"><e-icon icon="close"></e-icon></div></div></div>
Database performance improved
To help you work with Emarsys faster, we have improved our database performance.Tell me about the improvements.
Show Database Growth

Color variations

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

<div class="e-notice e-notice-withicon e-notice-default">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Nostrud in sit dolore 
  </div>
  Ex elit sunt irure ut deserunt 
</div>

<div class="e-notice e-notice-withicon e-notice-default"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span><div class="e-notice__title">Laborum adipiscing labore in </div>Labore anim mollit dolor mollit quis </div>
Aute nulla laborum incididunt
Commodo anim non voluptate exercitation labore

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

<div class="e-notice e-notice-withicon e-notice-warning">
  <span class="e-notice__icon">
    <e-icon icon="exclamation-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Deserunt dolore aute officia 
  </div>
  Cillum amet id ut et laboris 
</div>

<div class="e-notice e-notice-withicon e-notice-warning"><span class="e-notice__icon"><e-icon icon="exclamation-circle"></e-icon></span><div class="e-notice__title">In cupidatat ad enim </div>Cupidatat minim reprehenderit nulla aute dolore </div>
Exercitation excepteur mollit voluptate
Amet ipsum elit non officia laboris

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

<div class="e-notice e-notice-withicon e-notice-success">
  <span class="e-notice__icon">
    <e-icon icon="e-check-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Mollit est minim eu 
  </div>
  Ullamco eiusmod reprehenderit excepteur cillum eu 
</div>

<div class="e-notice e-notice-withicon e-notice-success"><span class="e-notice__icon"><e-icon icon="e-check-circle"></e-icon></span><div class="e-notice__title">Culpa quis occaecat velit </div>Do anim nostrud ex tempor irure </div>
Non irure deserunt laboris
Voluptate do lorem eiusmod officia qui

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

<div class="e-notice e-notice-withicon e-notice-danger">
  <span class="e-notice__icon">
    <e-icon icon="warning"></e-icon>
  </span>
  <div class="e-notice__title">
    Occaecat aute velit sit 
  </div>
  Quis dolore aute laboris consectetur et 
</div>

<div class="e-notice e-notice-withicon e-notice-danger"><span class="e-notice__icon"><e-icon icon="warning"></e-icon></span><div class="e-notice__title">Et in exercitation quis </div>Tempor mollit dolor adipiscing quis occaecat </div>
Dolor consequat est veniam
Occaecat in nisi nisi dolore eu

neutral
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-neutral

<div class="e-notice e-notice-withicon e-notice-neutral">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  <div class="e-notice__title">
    Pariatur minim magna reprehenderit 
  </div>
  Fugiat cillum eiusmod fugiat incididunt ex 
</div>

<div class="e-notice e-notice-withicon e-notice-neutral"><span class="e-notice__icon"><e-icon icon="e-info-circle"></e-icon></span><div class="e-notice__title">Sit quis id esse </div>Qui irure est adipiscing laboris minim </div>
Ut ut et ipsum
Laboris nostrud excepteur ea adipiscing ea

Service specific variations

Notification center color variations

from-emarsys
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-from-emarsys

<div class="e-notice e-notice-withicon e-notice-from-emarsys">
  <span class="e-notice__icon">
    <e-icon icon="e-b2clogo-simple"></e-icon>
  </span>
  <div class="e-notice__title">
    Veniam reprehenderit officia aliqua 
  </div>
  Ullamco exercitation consectetur cillum veniam ut 
</div>

<div class="e-notice e-notice-withicon e-notice-from-emarsys"><span class="e-notice__icon"><e-icon icon="e-b2clogo-simple"></e-icon></span><div class="e-notice__title">Ea duis velit ut </div>Mollit sunt minim do cillum sint </div>
Voluptate cupidatat excepteur reprehenderit
Dolor amet ipsum anim est cillum

segment-generation
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-segment-generation

<div class="e-notice e-notice-withicon e-notice-segment-generation">
  <span class="e-notice__icon">
    <e-icon icon="users"></e-icon>
  </span>
  <div class="e-notice__title">
    Ut eu fugiat laboris 
  </div>
  Ut aliqua eu id non mollit 
</div>

<div class="e-notice e-notice-withicon e-notice-segment-generation"><span class="e-notice__icon"><e-icon icon="users"></e-icon></span><div class="e-notice__title">Incididunt irure non et </div>Dolore dolore aliquip ut culpa culpa </div>
Consequat pariatur nostrud et
Elit incididunt elit ullamco duis in

automation-center
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-automation-center

<div class="e-notice e-notice-withicon e-notice-automation-center">
  <span class="e-notice__icon">
    <e-icon icon="ac-icon_connect"></e-icon>
  </span>
  <div class="e-notice__title">
    Amet adipiscing occaecat dolor 
  </div>
  Voluptate reprehenderit ex ex in adipiscing 
</div>

<div class="e-notice e-notice-withicon e-notice-automation-center"><span class="e-notice__icon"><e-icon icon="ac-icon_connect"></e-icon></span><div class="e-notice__title">Esse aute ullamco enim </div>Deserunt eu exercitation dolor labore occaecat </div>
Commodo ut id qui
Id pariatur ut ad irure elit

data-import
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-data-import

<div class="e-notice e-notice-withicon e-notice-data-import">
  <span class="e-notice__icon">
    <e-icon icon="user-plus"></e-icon>
  </span>
  <div class="e-notice__title">
    Sed deserunt quis labore 
  </div>
  Nulla sed do dolore dolor occaecat 
</div>

<div class="e-notice e-notice-withicon e-notice-data-import"><span class="e-notice__icon"><e-icon icon="user-plus"></e-icon></span><div class="e-notice__title">Id est ex sit </div>Deserunt magna proident ad nostrud do </div>
Eiusmod cupidatat ullamco culpa
Incididunt anim excepteur id nostrud sit

campaign-launch
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-campaign-launch

<div class="e-notice e-notice-withicon e-notice-campaign-launch">
  <span class="e-notice__icon">
    <e-icon icon="envelope"></e-icon>
  </span>
  <div class="e-notice__title">
    Adipiscing ad reprehenderit exercitation 
  </div>
  Ipsum elit exercitation ut ea dolor 
</div>

<div class="e-notice e-notice-withicon e-notice-campaign-launch"><span class="e-notice__icon"><e-icon icon="envelope"></e-icon></span><div class="e-notice__title">Esse dolor et veniam </div>Veniam labore in culpa cupidatat adipiscing </div>
Commodo ut eu ullamco
Ut ea laboris veniam ut esse

dns-fasttrack
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-dns-fasttrack

<div class="e-notice e-notice-withicon e-notice-dns-fasttrack">
  <span class="e-notice__icon">
    <e-icon icon="e-rocket"></e-icon>
  </span>
  <div class="e-notice__title">
    Anim veniam cupidatat laborum 
  </div>
  Dolor reprehenderit officia lorem anim culpa 
</div>

<div class="e-notice e-notice-withicon e-notice-dns-fasttrack"><span class="e-notice__icon"><e-icon icon="e-rocket"></e-icon></span><div class="e-notice__title">Aute veniam in irure </div>Ut eiusmod est anim dolor id </div>
Duis fugiat in duis
Sint do amet tempor duis officia

achievement
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-achievement

<div class="e-notice e-notice-withicon e-notice-achievement">
  <span class="e-notice__icon">
    <e-icon icon="e-thumbs-up"></e-icon>
  </span>
  <div class="e-notice__title">
    Laborum non consequat occaecat 
  </div>
  Culpa sunt veniam qui dolor culpa 
</div>

<div class="e-notice e-notice-withicon e-notice-achievement"><span class="e-notice__icon"><e-icon icon="e-thumbs-up"></e-icon></span><div class="e-notice__title">Dolore consectetur eu esse </div>Cupidatat sunt dolore dolore id nulla </div>
Esse in et consequat
Id voluptate nostrud dolore sunt dolore

visual-content-editor
Copy Pug
Copy HTML
Show code
Hide code
.e-notice-visual-content-editor

<div class="e-notice e-notice-withicon e-notice-visual-content-editor">
  <span class="e-notice__icon">
    <e-icon icon="e-blocks"></e-icon>
  </span>
  <div class="e-notice__title">
    Esse laborum ad incididunt 
  </div>
  Quis dolor commodo esse ut tempor 
</div>

<div class="e-notice e-notice-withicon e-notice-visual-content-editor"><span class="e-notice__icon"><e-icon icon="e-blocks"></e-icon></span><div class="e-notice__title">Pariatur fugiat occaecat quis </div>Voluptate anim dolore laboris ut aliqua </div>
Fugiat in occaecat minim
Officia esse elit excepteur irure nostrud

Related components

AlertSidepanelNotification

Notice

Notices are indicators on system or process status. They offer feedback on what's happening within the Marketing Cloud that informs the users so they can decide on if something needs their attention or action.

Structure

Best practices

Notices should:

Guidelines

  • Be placed in way that they appear when the user needs the information within their workflow.
  • Use a color to generally align to the message: blue - neutral, green - ok, yellow - warning, etc.
  • Use an icon to align with the content.
    • Using a specific icon helps the user to identify and understand the content faster and easier.

Try to avoid:

  • Using notices as user assistance like help or tutorial.

Content guidelines

Notice text should:

  • Be clear and to the point, the user shouldn't wonder what it refers to. Avoid technical terms if possible.
  • Be as short as possible, focusing on the state with as little explanation as it makes sense. Further explanations should be linked to the documentation.