Alerts

Banner notification

Banner notifications communicate high-priority information about the state or status of page content. Banner notifications are positioned at the top of the page and span the full width. When used on a webpage, banner notifications inform users of important information that is not specific to an immediate task.

Types

Warning banner

The warning banner is used to display high-priority system or product level notifications that are not specific to an immediate task.

Warning banner with a notification

An optional paragraph of text can be added to explain the purpose of the warning banner.

HTML code snippet

<div class="o-banner">
    <div class="wrapper wrapper__match-content">
        <div class="m-notification
                    m-notification__visible
                    m-notification__warning">
            {% include icons/warning-round.svg %}
            <div class="m-notification_content">
                <div class="h4 m-notification_message">Warning banner with a notification</div>
                <p class="m-notification_explanation">
                    An optional paragraph of text can be added to explain the purpose of the warning banner.
                </p>
                <ul class="m-list m-list__links">
                    <li class="m-list_item">
                        <a class="m-list_link" href="#">
                            A link can be added
                        </a>
                    </li>
                    <li class="m-list_item">
                        <a class="m-list_link" href="#">
                            Multiple links are supported
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Archived content banner

The archived content banner is used to identify website pages that are outdated and should no longer be referenced for guidance. These pages may have historical value or significance to researchers, historians, and the public.

Archived content banner with notification

An optional paragraph of text can be added to explain the purpose of the archived content banner.

HTML code snippet

<div class="o-banner o-banner__dark">
    <div class="wrapper wrapper__match-content">
        <div class="m-notification
                    m-notification__warning
                    m-notification__visible">
            {% include icons/information-round.svg %}
            <div class="m-notification_content">
                <div class="h4 m-notification_message">
                    Archived content banner with notification
                </div>
                <p class="m-notification_explanation">
                    An optional paragraph of text can be added to explain the purpose of the archived content banner.
                </p>
                <ul class="m-list m-list__links">
                    <li class="m-list_item">
                        <a class="m-list_link" href="#test-link">
                            Links can be added
                        </a>
                    </li>
                    <li class="m-list_item">
                        <a class="m-list_link" href="#">
                            Visited links appear gray instead of white
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Use cases

Use the banner notification to communicate important information about the state or status of page content. Use the banner notification to highlight high-priority system or product level information that is not related to a specific task. Use the inline notification instead when calling out specific page content or when alerting users as to information that is relevant to the immediate task.

Notifications

Edit page