Overview
Provide contextual feedback messages for typical user actions or important notifications.
Examples
Success variation
Success! This is the alert for success. This is a link
<section class="alert alert--success" data-alert-id="alert-success" data-alert-days="7" data-myob-alert data-closable>
<div class="alert__body">
<div class="alert__icon-area" >
<svg aria-hidden="true" role="img" class="icon icon--success icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#success"></use>
</svg>
</div>
<div class="alert__copy"><p>Success! This is the alert for success. <a href="">This is a link</a></p></div>
<button class="close" aria-label="Close alert" type="button" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
</section>
Information variation
Information! This is the alert for information. This is a link
<section class="alert alert--info" data-alert-id="alert-info" data-alert-days="7" data-myob-alert data-closable>
<div class="alert__body">
<div class="alert__icon-area">
<svg aria-hidden="true" role="img" class="icon icon--info icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#info"></use>
</svg>
</div>
<div class="alert__copy"><p>Information! This is the alert for information. <a href="">This is a link</a></p></div>
<button type="button" aria-label="Dismiss alert" class="close" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
</section>
Warning variation
Warning! This is the alert for warning. This is a link
<section class="alert alert--warning" data-alert-id="alert-warning" data-alert-days="7" data-myob-alert data-closable>
<div class="alert__body">
<div class="alert__icon-area">
<svg aria-hidden="true" role="img" class="icon icon--warning icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#warning"></use>
</svg>
</div>
<div class="alert__copy"><p>Warning! This is the alert for warning. <a href="">This is a link</a></p></div>
<button type="button" aria-label="Dismiss alert" class="close" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
</section>
Danger variation
Danger! This is the alert for danger. This is a link
<section class="alert alert--danger" data-alert-id="alert-danger" data-alert-days="7" data-myob-alert data-closable>
<div class="alert__body">
<div class="alert__icon-area">
<svg aria-hidden="true" role="img" class="icon icon--danger icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#danger"></use>
</svg>
</div>
<div class="alert__copy"><p>Danger! This is the alert for danger. <a href="">This is a link</a></p></div>
<button type="button" aria-label="Dismiss alert" class="close" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
</section>
Usage guidelines
| Dos | Donts |
|---|---|
 Do ensure messages are clear and concise.
|
 Don’t use overly long messages that flow over 1 line.
|
|
Do ensure messages clearly inform the user what is happening.
|
Don’t create messages that are too technical or uninformative.
|
Implementation guidelines
| Name | Attribute | Description |
|---|---|---|
| ID |
data-alert-id
|
The identifier required for dismissible action. |
| Dismiss period |
data-alert-days
|
Length of time (in days) until the Alert reappears. |