Alert • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Grey owl in a tree

Photo by Zdeněk Macháček

Alert

Introduction

Alerts help draw attention to brief confirmation or warning messages—or any other important information—that shouldn't be overlooked while visitors scan the page.

Confirm and Warn

The Natura11y provides two types of alerts: Confirm implied with green, and Warn implied with red.

Every instance of an alert should include an icon to help convey meaning. Across the Framework Natura11y Icons, our open-source icon library, is used for all icons.


        <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 selector is required.

The .alert--{x} is the modifier class that provides the alert's color, where x equals confirm, attention, or warn.

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

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

Include role="alert" if the alert includes urgent information.

7-12

The .alert__title selector is required.

It holds the alert's title and visual icon.

The .alert__title__text selector holds the alert title's text. It is required. It includes the unique id targeted by the aria-labelledby attribute present on the .alert selector.

14-18

The .alert__description selector is not required.

It holds the alert's description message. It includes the unique id targeted by the aria-describedby attribute present on the .alert selector.

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

Inverse Color Modifier

For a bolder look, chain --inverse to the alert--confirm or alert--warn modifier classes respectively.


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

Title Only Alert

The .alert__description is not required. Leaving it out creates a title only alert.


        <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

For dismissable alerts, add the .alert--dismissable modifier class. Doing so automatically places a close button inside the .alert.

When the close button is pressed, the alert fades out, then the entire .alert selector is removed from the DOM.


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

More Style Variations

Looking for even more alert styles? Exclude the .alert--confirm or .alert--warn modifier classes. Instead, add the color utilities or border utilities for different accents and style variations.


        <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