Components

Banner (notification)

Banner notifications communicate high-priority information about the state or status of page content. 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">
            
            <div class="m-notification__content">
                <div class="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="a-link a-link--jump" href="#">
                            A link can be added
                        </a>
                    </li>
                    <li class="m-list__item">
                        <a class="a-link a-link--jump" 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">
            
            <div class="m-notification__content">
                <div class="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="a-link a-link--jump" href="#test-link">
                            Links can be added
                        </a>
                    </li>
                    <li class="m-list__item">
                        <a class="a-link a-link--jump" href="#">
                            Visited links appear gray instead of white
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Notifications

Latest Updates

Page last edited:
Show all details
Edit page