<div class="notice notice--error js-notice">
<div class="notice__msg">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
<button class="btn btn--close js-btn-close">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
</div>
<div class="notice notice--{{modifier}} js-notice">
<div class="notice__msg">
{{msg}}
</div>
{{render '@buttons--close'}}
</div>
{
"modifier": "error",
"msg": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. "
}
.notice {
position: relative;
}
.notice--neutral {
background: $color-gray-lightest;
}
.notice--error {
background: $color-error;
color: $color-white;
}
.notice--success {
background: $color-success;
color: $color-white;
}
.notice__msg {
padding: 1rem 3rem;
line-height: 1.5;
text-align: center;
}
.btn--close {
.notice & {
position: absolute;
top: 0.81rem;
right: 0.81rem;
}
}
.icon--close {
.notice--error &,
.notice--success & {
stroke: $color-white;
}
}
Notices would be placed at the top of the page, above all content. Its use is to communicate states to the user such as a successful email submission or general notice to all users.