Notice

Default
.e-notice

Elit minim magna exercitation dolore nostrud voluptate ipsum 
<div class="e-notice">
  Nostrud labore irure voluptate elit pariatur commodo ipsum 
</div>


                        <div class="e-notice">Non ipsum dolor ullamco nulla ex ut eu 
                        </div>

Variations

Sticky
.e-notice-sticky

Occaecat aliqua labore laboris labore esse
Ut dolor ad excepteur occaecat commodo
Reprehenderit consectetur ullamco in culpa non
Nulla duis sint sed duis sed 
<div class="e-notice e-notice-sticky">
  Id incididunt amet dolor velit deserunt 
</div>
<div class="e-notice e-notice-sticky">
  Adipiscing et nostrud amet dolore ex 
</div>
<div class="e-notice e-notice-sticky">
  Ut in nulla ipsum exercitation est 
</div>
<div class="e-notice e-notice-sticky">
  Sint pariatur cupidatat ipsum qui laborum 
</div>


                          <div class="e-notice e-notice-sticky">Reprehenderit veniam est in ut ad 
                          </div>
                          <div class="e-notice e-notice-sticky">Officia do eu dolor nisi dolore 
                          </div>
                          <div class="e-notice e-notice-sticky">Consectetur incididunt proident velit id dolor 
                          </div>
                          <div class="e-notice e-notice-sticky">Cupidatat reprehenderit sunt in laborum laborum 
                          </div>

With loading spinner
.e-notice-icon e-spinner

Consectetur aliqua, occaecat et ut ut elit dolor ipsum reprehenderit. 
<div class="e-notice e-notice-withicon">
  <span class="e-notice__icon">
    <e-spinner data-size="small"></e-spinner>
  </span>
  Excepteur ex sed lorem in ut incididunt exercitation, quis laborum, laborum, dolore duis. 
</div>


                          <div class="e-notice e-notice-withicon"><span class="e-notice__icon">
                              <e-spinner data-size="small"></e-spinner></span>Lorem voluptate velit ad elit exercitation aliquip ea irure. 
                          </div>

Highlight
.e-notice-highlight

Commodo occaecat ipsum aute amet sint 
<div class="e-notice e-notice-highlight">
  Cupidatat quis deserunt tempor occaecat sit 
</div>


                          <div class="e-notice e-notice-highlight">Sit commodo anim nostrud dolor ex 
                          </div>

With icon
.e-notice-withicon

Dolore nostrud adipiscing dolore lorem qui 
<div class="e-notice e-notice-withicon">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Ipsum sit incididunt deserunt elit commodo 
</div>


                          <div class="e-notice e-notice-withicon"><span class="e-notice__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Magna est amet id id cupidatat 
                          </div>

With big icon
.e-notice-withbigicon

Officia tempor cupidatat deserunt laboris ad
Culpa enim dolore dolor cupidatat in consectetur amet 
<div class="e-notice e-notice-withbigicon">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Nulla ipsum esse in ut dolore 
  <br>
  Officia ex eu ad occaecat voluptate consequat ex 
</div>


                          <div class="e-notice e-notice-withbigicon"><span class="e-notice__icon">
                              <e-icon icon="e-info-circle"></e-icon></span>Elit eiusmod ipsum fugiat fugiat ad <br>Duis ut ea reprehenderit mollit laborum culpa dolore 
                          </div>

With close
.e-notice-withicon e-notice-withclose

Minim dolor labore dolor culpa amet 
<div class="e-notice e-notice-withicon e-notice-withclose">
  <span class="e-notice__icon">
    <e-icon icon="e-info-circle"></e-icon>
  </span>
  Consectetur cupidatat dolore magna id amet 
  <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>Quis mollit in ullamco ea in 
                            <div class="e-notice__close">
                              <e-icon icon="close"></e-icon>
                            </div>
                          </div>

With title, date and footer
.e-notice-withicon e-notice-withclose

Lorem ipsum dolor sit.
Ipsum fugiat cillum consequat minim laboris
Details link
<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>
  Culpa exercitation reprehenderit excepteur ut aliqua 
  <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>Qui incididunt sint nulla minim aliqua 
                            <div class="e-notice__footer"><a href="#">Details link</a></div>
                            <div class="e-notice__close">
                              <e-icon icon="close"></e-icon>
                            </div>
                          </div>

Fixed
.e-notice-fixed

Show / Hide
Laboris dolore sed adipiscing
Amet exercitation sit duis est ad 
<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">
    Qui occaecat in laboris 
  </div>
  Sed ea reprehenderit veniam adipiscing dolor 
</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">Labore enim dolor aliquip 
                            </div>Fugiat pariatur consectetur velit anim eu 
                          </div>

Toast
.e-notice-toast

Show / Hide
Ex nostrud in anim
Enim esse sunt commodo nulla est 
<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">
    Veniam aute quis lorem 
  </div>
  Consectetur dolore ad ad proident eu 
</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">Lorem ipsum tempor non 
                            </div>Veniam magna lorem ut ipsum eu 
                          </div>

Widget
.e-notice-widget

Database performance improved
To help you work with Emarsys faster, we have improved our database performance.Tell me about the improvements.
Show Database Growth
<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 type="checkbox" id="database-overlay-notification-remember" class="e-checkbox">
        <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 type="checkbox" id="database-overlay-notification-remember" class="e-checkbox">
                                  <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>

Color variations

default
.e-notice-default

Cillum mollit deserunt excepteur
Ipsum minim ipsum proident duis nulla 
<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">
    Incididunt cillum ut proident 
  </div>
  Dolor ad adipiscing exercitation id id 
</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">Commodo labore proident qui 
                            </div>Voluptate mollit lorem velit qui excepteur 
                          </div>

warning
.e-notice-warning

Aliqua labore lorem adipiscing
Fugiat nisi ut veniam elit aliqua 
<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">
    Cillum id anim dolore 
  </div>
  Anim incididunt nisi deserunt dolore officia 
</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">Aliqua ut eu nisi 
                            </div>Ullamco anim anim fugiat aute aliquip 
                          </div>

success
.e-notice-success

Qui sit laborum lorem
Est esse cupidatat nostrud ipsum in 
<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">
    Ut exercitation pariatur magna 
  </div>
  Dolor culpa ut aute laboris minim 
</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">Id aliqua quis enim 
                            </div>Ea in amet est voluptate nulla 
                          </div>

danger
.e-notice-danger

Consectetur reprehenderit esse id
Adipiscing eu cupidatat lorem consectetur sint 
<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">
    Sit sunt laborum consequat 
  </div>
  Ut voluptate sit sed officia aute 
</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">Occaecat irure ipsum voluptate 
                            </div>Nisi aliqua cupidatat in ad ut 
                          </div>

neutral
.e-notice-neutral

Magna in incididunt ullamco
Incididunt cillum veniam dolore tempor minim 
<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">
    Nulla nostrud do nisi 
  </div>
  Ut in consectetur excepteur ea qui 
</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">Qui irure lorem non 
                            </div>Excepteur ipsum dolor sit fugiat sed 
                          </div>

Service specific variations

Notification center color variations

from-emarsys
.e-notice-from-emarsys

Aute quis in consectetur
Ullamco sunt reprehenderit qui officia dolore 
<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">
    Fugiat ex quis in 
  </div>
  Occaecat id aliqua magna et sed 
</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">Laboris laborum officia cillum 
                            </div>Incididunt culpa occaecat ullamco ut id 
                          </div>

segment-generation
.e-notice-segment-generation

Sed reprehenderit dolore cillum
Dolor culpa fugiat nisi deserunt velit 
<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 magna laborum aliquip 
  </div>
  Sint deserunt fugiat anim est eiusmod 
</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">Excepteur excepteur cillum occaecat 
                            </div>Sed id sunt sit voluptate ea 
                          </div>

automation-center
.e-notice-automation-center

Nulla dolore in proident
Tempor lorem aliqua ipsum culpa incididunt 
<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">
    Eu aute adipiscing irure 
  </div>
  Ipsum adipiscing nisi non esse cupidatat 
</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">Ut non velit ullamco 
                            </div>Mollit irure duis elit pariatur dolor 
                          </div>

data-import
.e-notice-data-import

Magna nostrud fugiat fugiat
Veniam aliqua adipiscing culpa duis ea 
<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">
    Veniam dolor dolor laborum 
  </div>
  Laborum excepteur culpa amet nostrud in 
</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">Sunt occaecat pariatur laboris 
                            </div>Sint in sint mollit sunt ut 
                          </div>

campaign-launch
.e-notice-campaign-launch

Deserunt exercitation non proident
Velit nisi exercitation aliqua ad ut 
<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">
    Eu cupidatat eu do 
  </div>
  Dolor aute aliqua eu deserunt officia 
</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">Aliqua enim exercitation aute 
                            </div>Sunt adipiscing id excepteur reprehenderit ex 
                          </div>

dns-fasttrack
.e-notice-dns-fasttrack

Consequat nulla dolor eu
Lorem dolor magna reprehenderit in eu 
<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">
    In et ex id 
  </div>
  Consequat sint elit irure enim exercitation 
</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">Qui esse consectetur excepteur 
                            </div>Sed sint nisi ex in enim 
                          </div>

achievement
.e-notice-achievement

Adipiscing quis dolore velit
Proident labore voluptate eiusmod quis ut 
<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">
    Exercitation in deserunt aute 
  </div>
  Ut anim dolor do irure lorem 
</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">Eu ex ea anim 
                            </div>Non irure in laboris excepteur veniam 
                          </div>

Related components

AlertSidepanel

Notice

When to use notice?

Notices are permanent 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.

Guidelines

  1. Notices should be placed in way that they appear when the user needs the information within their workflow.
  2. The description inside the notice should be clear and to the point, the user shouldn't wonder what it refers to. Avoid technical terms if possible.
  3. The notice text should 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.
  4. The color of the notice should be generally aligned to the message: blue - neutral, green - ok, yellow - warning, etc.
  5. The icon for the notice should be aligned with the content, using a specific icon helps the user to identify and understand the content faster and easier.

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history