Alert • Natura11y
Jump to main contentJump to website footer
Grey owl in a tree

Photo by Zdeněk Macháček

Alert

Introduction

Alerts help draw attention to important messages, like confirmations or warnings, that visitors should not miss while browsing the page.

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.


        <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>
Figure 1
Line #Details
2-5

The parent .alert class is required.

The .alert--{x} class sets the alert's color, where x can be confirm, attention, or warn.

The aria-labelledby attribute should match the alert title's id.

The aria-describedby attribute should match the alert description's id.

Include role="alert" for urgent information.

8-13

The .alert__title class is required. It contains the alert's title and icon.

The .alert__title__text class holds the alert title text and must match the aria-labelledby attribute.

15-19

The .alert__description class is optional. It contains the alert description and should match the aria-describedby attribute.

All links (<a> tags) within the <p> tags will automatically inherit the alert's text color.

Inverse Color Modifier

For a bolder look, add --inverse to the alert--confirm or alert--warn classes.


        <div class="alert alert--confirm--inverse">
            ...
        </div>
        
        <div class="alert alert--warn--inverse">
            ...
        </div>
Figure 2

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>
Figure 3

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.


        <div class="alert alert--confirm alert--dismissable">
            ...
        </div>
Figure 4

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.


        <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>
Figure 5