Moody's CRE

Alert

Examples

We have four main UI alerts: success, info, warning, and danger. When there is a form error, it's a good idea to include both a general error message with one of these alerts, and a field-specific one. We also use purple and orange alerts for specific use cases on the apps. Alerts should have an icon.

Well done! You've successfully submitted the form. We'll be in touch soon.
Note: Here's some additional info.
Masked: These changes are only visible to you.
Oops! Something's wrong. Please check the form for errors, correct them, then submit again.
Edited: Your request is still being reviewed by our researchers.
Warning! Watch out for these potential problems. 
<div class="alert alert--success mb2">
    <i class="i i-circle-check-filled text--green-700 mrs"></i>
    <span class="bold">Well done!</span> You've successfully submitted the form. We'll be in touch soon.
</div>

<div class="alert alert--info mb2">
    <i class="i i-info-circle-filled text--blue-700 mrs"></i>
    <span class="bold">Note:</span> Here's some additional info.
</div>

<div class="alert alert--purple mb2">
    <i class="i i-alert-circle-filled text--purple-700 mrs"></i>
    <span class="bold">Masked:</span> These changes are only visible to you.
</div>

<div class="alert alert--danger mb2">
    <i class="i i-circle-x-filled text--red-700 mrs"></i>
    <span class="bold">Oops!</span> Something's wrong. Please check the form for errors, correct them, then submit again.
</div>

<div class="alert alert--orange mb2">
    <i class="i i-edit text--orange-700 mrs"></i>
    <span class="bold">Edited:</span> Your request is still being reviewed by our researchers.
</div>

<div class="alert alert--warning">
    <i class="i i-alert-triangle-filled text--yellow-700 mrs"></i>
    <span class="bold">Warning!</span> Watch out for these potential problems.
</div>

See also