Introduction
Alerts help draw attention to important messages, like confirmations or warnings, that visitors should not miss while browsing the page.
When changing alert colors, ensure your colors meet a sufficient contrast ratio.
Do not rely on color alone to convey meaning. Include a visual icon for those who experience colors differently.
Use an appropriate alert role for assistive technology.
Confirm and Warn
Natura11y provides two types of alerts: Confirm in green and Warn in red.
Each alert should include an icon to help convey its meaning. Use icons from the Natura11y Icons library.
Thank you for your feedback. A confirmation message has been sent to your email. Return to our homepage.
Your feedback was not sent. Complete all required fields below and submit the form again.
<div
class="alert alert--confirm"
aria-labelledby="alert-label"
aria-describedby="alert-description"
role="alert"
>
<div class="alert__title h5">
<span class="icon icon-confirm" aria-hidden="true"></span>
<span class="alert__title__text" id="alert-label">
Alert Confirm
</span>
</div>
<div class="alert__description" id="alert-description">
<p>
Thank you for your feedback. A confirmation message has been sent to your email. Return to our <a href="#1">homepage</a>.
</p>
</div>
</div>
Line # | Details |
---|---|
2-5 | The parent The The The Include |
8-13 | The The |
15-19 | The All links ( |
Inverse Color Modifier
For a bolder look, add --inverse
to the alert--confirm
or alert--warn
classes.
Thank you for your feedback. A confirmation message has been sent to your email. Return to our homepage.
Your feedback was not sent. Complete all required fields below and submit the form again.
<div class="alert alert--confirm--inverse">
...
</div>
<div class="alert alert--warn--inverse">
...
</div>
Title Only Alert
You can create a title-only alert by omitting the .alert__description
class.
<div
class="alert alert--confirm--inverse margin-y-3"
aria-labelledby="alert-title-only-label">
<div class="alert__title h5">
<span class="icon icon-confirm" aria-hidden="true"></span>
<span class="alert__title__text" id="alert-title-only-label">
Alert Confirm
</span>
</div>
</div>
Dismissable Alerts
To make an alert dismissable, add the .alert--dismissable
class. This will add a close button to the alert.
When the close button is pressed, the alert will be removed from the page.
Thank you for your feedback. A confirmation message has been sent to your email. Return to our homepage.
Your feedback was not sent. Complete all required fields below and submit the form again.
<div class="alert alert--confirm alert--dismissable">
...
</div>
More Style Variations
For additional alert styles, you can exclude the .alert--confirm
or .alert--warn
classes. Instead, use color utilities or border utilities for different styles.
You have (4) unread messages waiting in your account dashboard.
<div class="alert text-color-link border-left" role="alert">
<div class="alert__title h5">
<span class="icon icon-mail" aria-hidden="true"></span>
<span class="alert__title__text">
You have new mail
</span>
</div>
<div class="alert__description">
<p>
You have <strong>(4)</strong> unread messages waiting in
<a href='#1'>your account dashboard</a>.
</p>
</div>
</div>