logo Atlas Design

Banner

Banner component allows adding a full width message block to notify user about something that’s not directly related to the page content.

This page is best viewed with the content section full screened because banners are intended to be full width elements. Go full screen by clicking the button in the top right corner.

Usage

Here is an example of a standard usage of banner component.

HTML 
<div class="banner">
    <div class="banner-content">
        <p>A banner about something happening in the world <a href="#">Link</a></p>
    </div>
</div>

Loading banner

Ensure the user knows they need to wait for some event in order to interact with a banner.

HTML 
<div class="banner is-loading">
    <div class="banner-content">
        <p>Loading banner.</p>
    </div>
</div>

Dismissing banner

Banner can be made dismissable with the dismiss component.

HTML 
<div
    class="banner banner-dismissable"
    id="example-banner-id"
    data-dismissable
    data-dismiss-animation="slide-up"
>
    <div class="banner-content">
        <p>Dismissable banner.</p>
    </div>
    <button type="button" class="banner-dismiss" data-bi-name="close" data-dismiss>
        <span class="visually-hidden">Dismiss banner</span>
        <span class="icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" class="fill-current-color">
                <path
                    d="M269.254 224l137.373 137.373-45.254 45.254L224 269.254 86.627 406.627l-45.255-45.254L178.746 224 41.373 86.627l45.255-45.255L224 178.746 361.373 41.373l45.254 45.255L269.254 224z"
                />
            </svg>
        </span>
    </button>
</div>

Figma