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
- Notices should be placed in way that they appear when the user needs the information within their workflow.
- 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.
- 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.
- The color of the notice should be generally aligned to the message: blue - neutral, green - ok, yellow - warning, etc.
- 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(notice): vce notice |
| Committer: | rudywaltz |
| Version history | |
Default
<div class="e-notice">
Ut et in do dolor ullamco ut mollit
</div>
<div class="e-notice">Cupidatat mollit do excepteur sint sed quis in
</div>Consectetur velit sed proident tempor sunt commodo qui
Variations
Sticky
<div class="e-notice e-notice-sticky">
Esse dolor sunt fugiat irure ex
</div>
<div class="e-notice e-notice-sticky">
Sed velit cillum eiusmod cillum dolor
</div>
<div class="e-notice e-notice-sticky">
Est fugiat in dolor labore veniam
</div>
<div class="e-notice e-notice-sticky">
Occaecat velit laboris tempor eu exercitation
</div>
<div class="e-notice e-notice-sticky">Esse eu nulla occaecat duis exercitation
</div>
<div class="e-notice e-notice-sticky">Exercitation sed in labore ut lorem
</div>
<div class="e-notice e-notice-sticky">Deserunt laborum nulla proident ad sunt
</div>
<div class="e-notice e-notice-sticky">Ut laboris qui sunt aliqua adipiscing
</div>Laboris elit ut aliqua commodo consectetur
Sit incididunt sint magna qui ex
Ut mollit ut mollit tempor reprehenderit
Laboris nulla et exercitation sed cillum
With loading spinner
<div class="e-notice e-notice-withicon">
<span class="e-notice__icon">
<e-spinner data-size="small"></e-spinner>
</span>
Deserunt incididunt deserunt, elit, incididunt cupidatat ut, officia.
</div>
<div class="e-notice e-notice-withicon"><span class="e-notice__icon">
<e-spinner data-size="small"></e-spinner></span>Elit ea culpa amet nulla sit id consectetur sint commodo, veniam ea cupidatat cillum ea in.
</div>Highlight
<div class="e-notice e-notice-highlight">
Dolore in sed voluptate et ut
</div>
<div class="e-notice e-notice-highlight">In dolor tempor in minim labore
</div>Amet qui duis quis labore enim
With icon
<div class="e-notice e-notice-withicon">
<span class="e-notice__icon">
<e-icon icon="e-info-circle"></e-icon>
</span>
Anim sunt dolor dolor ut ut
</div>
<div class="e-notice e-notice-withicon"><span class="e-notice__icon">
<e-icon icon="e-info-circle"></e-icon></span>Aute excepteur occaecat velit anim ut
</div>With big icon
<div class="e-notice e-notice-withbigicon">
<span class="e-notice__icon">
<e-icon icon="e-info-circle"></e-icon>
</span>
Occaecat culpa consequat sit consequat lorem
<br>
In duis non adipiscing ad nulla officia fugiat
</div>
<div class="e-notice e-notice-withbigicon"><span class="e-notice__icon">
<e-icon icon="e-info-circle"></e-icon></span>Ea nisi anim do enim occaecat <br>Consequat officia pariatur consequat nulla proident exercitation aliquip
</div>Ut consectetur laborum ipsum aliqua ex incididunt labore
With close
<div class="e-notice e-notice-withicon e-notice-withclose">
<span class="e-notice__icon">
<e-icon icon="e-info-circle"></e-icon>
</span>
Qui irure adipiscing lorem dolor aliquip
<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>Laboris aute ea in ut in
<div class="e-notice__close">
<e-icon icon="close"></e-icon>
</div>
</div>With title, date and footer
<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>
Laboris in ipsum ut in dolore
<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>In consectetur qui duis amet sed
<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.
Pariatur excepteur sit consectetur cillum cillum
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">
Non dolor laborum consequat
</div>
Officia laborum lorem do laborum ipsum
</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">Et qui dolor ut
</div>Dolor ea esse proident ut reprehenderit
</div>Show / Hide
Veniam consequat proident ex
Eu deserunt ad in ea in
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">
Anim esse esse laborum
</div>
Dolor sunt qui dolore eiusmod in
</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">Eu in proident anim
</div>Consectetur laborum incididunt ut incididunt labore
</div>Show / Hide
Id fugiat commodo do
Et excepteur excepteur irure aliqua mollit
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 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
<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">
Ex aliqua veniam ut
</div>
Consequat laborum sint laboris in cupidatat
</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">Sed sint in proident
</div>Ipsum ex do laborum adipiscing eu
</div>Culpa ipsum cillum cillum
Quis officia excepteur commodo velit duis
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">
Velit deserunt irure ut
</div>
Occaecat proident sint amet commodo irure
</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">Duis non amet minim
</div>Exercitation ullamco laborum nostrud consequat ea
</div>Excepteur eu incididunt eiusmod
Non proident ullamco lorem velit irure
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">
Adipiscing tempor aliqua officia
</div>
Ex sed in et non ut
</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">Mollit eu do nostrud
</div>Ut proident aliquip cillum nisi sunt
</div>Aliqua sit incididunt veniam
In cupidatat velit ipsum eu laborum
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">
Esse in nostrud ipsum
</div>
Est velit adipiscing tempor laboris nulla
</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">Aute dolor pariatur in
</div>Nostrud mollit incididunt cillum ut aliquip
</div>Labore pariatur do id
Irure nulla excepteur aute ex nulla
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">
Ad elit excepteur irure
</div>
Minim non laborum nulla aliqua reprehenderit
</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">Ut in adipiscing tempor
</div>Ut velit proident ea eu dolore
</div>Magna ut duis esse
Nostrud laboris sint incididunt ea ea
Service specific variations
Notification center color variations
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">
Laboris elit ut sit
</div>
Velit cillum duis magna adipiscing ea
</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">Dolor enim sit incididunt
</div>Veniam cupidatat duis adipiscing tempor laboris
</div>Enim labore ipsum anim
Laboris pariatur amet non est dolor
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">
Dolor aute exercitation adipiscing
</div>
Ut enim aliquip non in dolor
</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">Esse id in sint
</div>Id est laborum adipiscing excepteur sit
</div>Voluptate voluptate in sed
Quis magna laboris veniam ut duis
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">
Cupidatat officia ut dolor
</div>
Eu do et tempor incididunt in
</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">Quis proident ea ut
</div>Cillum ut quis sint in ad
</div>Duis ut qui velit
Ut anim ullamco consectetur proident sit
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">
Exercitation duis dolore anim
</div>
Fugiat laboris culpa irure mollit et
</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">Dolore sunt qui sit
</div>Dolor labore in ipsum ipsum cupidatat
</div>Ut pariatur ad et
Commodo voluptate officia tempor est laborum
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">
Ullamco nostrud do reprehenderit
</div>
Mollit pariatur esse in do cupidatat
</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">Deserunt fugiat eiusmod duis
</div>Enim sint minim voluptate excepteur commodo
</div>Est aute duis non
Ut incididunt cillum ut ullamco cillum
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">
Qui magna excepteur officia
</div>
Nisi excepteur enim exercitation do fugiat
</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">Sunt aliquip qui magna
</div>Reprehenderit et officia ea tempor tempor
</div>Dolore ullamco occaecat sint
Occaecat nisi proident officia dolore do
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">
Officia mollit labore dolor
</div>
Laborum elit sunt elit ea laborum
</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">Sunt nisi ut nisi
</div>Dolor ullamco ex aute duis cupidatat
</div>Consectetur dolor commodo sit
Non excepteur nulla reprehenderit lorem in
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">
Sint officia culpa ut
</div>
Lorem excepteur ex ex consectetur consequat
</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">Veniam elit esse dolor
</div>Incididunt qui sint duis consequat eiusmod
</div>Quis nostrud laboris ut
Id nostrud consequat non est excepteur