Stacking Banner

Description

The stacking banner is used to display one or more persistent alert messages at the top of a page. Unlike dismissible alerts, stacking banners remain visible for the duration of the user's session and cannot be closed. Banners stack vertically and span the full width of the page with no vertical space between them.

On smaller screens, banners are automatically grouped inside a collapsible accordion to reduce vertical space usage.

Definition

Each banner is built using Mosaic's Alert component.

All banners are wrapped in a .stacking-banner container using Mosaic's accordion markup. On large screens, the accordion chrome (toggle buttons, borders, and collapse behavior) is hidden via CSS and the banners render as a flat stack. On small screens, the full accordion interaction is presented to reduce vertical space usage. No JavaScript or conditional rendering is required.

Examples

Single stacking banner

<div class="stacking-banner accordion" id="stackingBannerSingle">
  <div class="accordion-item">
    <div class="accordion-header" id="stackingBannerSingleHeading">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#stackingBannerSingleCollapse"
        type="button"
        aria-expanded="false"
        aria-controls="stackingBannerSingleCollapse">
        <span class="title"
          ><svg
            class="icon-inline"
            data-prefix="fas"
            data-icon="circle-info"
            role="img"
            aria-hidden="true"
            focusable="false"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512">
            <path
              fill="#ffbd00"
              d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
          </svg>
          Alerts</span
        >
      </button>
    </div>
    <div class="accordion-collapse collapse" id="stackingBannerSingleCollapse">
      <div class="accordion-body">
        <div
          class="alert alert-warning d-flex mb-0"
          role="region"
          aria-label="Site notice">
          <div class="align-self-start">
            <svg
              class="svg-inline--fa fa-circle-info fa-2x"
              data-prefix="fas"
              data-icon="circle-info"
              role="img"
              aria-hidden="true"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512">
              <path
                fill="currentColor"
                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
            </svg>
          </div>
          <div class="align-self-center">
            Only completed applications are displayed here. For drafts go to
            your <a href="#">dashboard</a>. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Aenean justo tortor, mollis nec felis
            sed, ultrices dapibus mi. Sed efficitur suscipit lectus in bibendum.
          </div>
        </div>

        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#stackingBannerSingleCollapse"
          type="button"
          aria-expanded="false"
          aria-controls="stackingBannerSingleCollapse">
          Hide
        </button>
      </div>
    </div>
  </div>
</div>

Hide

Multiple stacking banners

Alerts (3)

Only completed applications are displayed here. For drafts go to your dashboard. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean justo tortor, mollis nec felis sed, ultrices dapibus mi.

This site is currently in beta. Some features may be incomplete or subject to change. Please submit feedback if you encounter any issues.

Scheduled maintenance is planned for Saturday, June 14 from 10:00 PM to 2:00 AM. The system will be unavailable during this window. Learn more.

Hide

<div class="stacking-banner accordion" id="stackingBannerMultiple">
  <div class="accordion-item">
    <div class="accordion-header" id="stackingBannerMultipleHeading">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#stackingBannerMultipleCollapse"
        type="button"
        aria-expanded="false"
        aria-controls="stackingBannerMultipleCollapse">
        <span class="title">
          <svg
            class="icon-inline"
            data-prefix="fas"
            data-icon="circle-info"
            role="img"
            aria-hidden="true"
            focusable="false"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512">
            <path
              fill="#ffbd00"
              d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
          </svg>
          Alerts (3)</span
        >
      </button>
    </div>
    <div
      class="accordion-collapse collapse"
      id="stackingBannerMultipleCollapse">
      <div class="accordion-body">
        <div
          class="alert alert-warning d-flex mb-0"
          role="region"
          aria-label="Site notice">
          <div class="align-self-start">
            <svg
              class="svg-inline--fa fa-circle-info fa-2x"
              data-prefix="fas"
              data-icon="circle-info"
              role="img"
              aria-hidden="true"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512">
              <path
                fill="currentColor"
                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
            </svg>
          </div>
          <div class="align-self-center">
            Only completed applications are displayed here. For drafts go to
            your <a href="#">dashboard</a>. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Aenean justo tortor, mollis nec felis
            sed, ultrices dapibus mi.
          </div>
        </div>

        <div
          class="alert alert-warning d-flex mb-0"
          role="region"
          aria-label="Site notice">
          <div class="align-self-start">
            <svg
              class="svg-inline--fa fa-circle-info fa-2x"
              data-prefix="fas"
              data-icon="circle-info"
              role="img"
              aria-hidden="true"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512">
              <path
                fill="currentColor"
                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
            </svg>
          </div>
          <div class="align-self-center">
            This site is currently in beta. Some features may be incomplete or
            subject to change. Please <a href="#">submit feedback</a> if you
            encounter any issues.
          </div>
        </div>

        <div
          class="alert alert-warning d-flex mb-0"
          role="region"
          aria-label="Site notice">
          <div class="align-self-start">
            <svg
              class="svg-inline--fa fa-circle-info fa-2x"
              data-prefix="fas"
              data-icon="circle-info"
              role="img"
              aria-hidden="true"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512">
              <path
                fill="currentColor"
                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
            </svg>
          </div>
          <div class="align-self-center">
            Scheduled maintenance is planned for Saturday, June 14 from
            10:00&nbsp;PM to 2:00&nbsp;AM. The system will be unavailable during
            this window. <a href="#">Learn more</a>.
          </div>
        </div>

        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#stackingBannerMultipleCollapse"
          type="button"
          aria-expanded="false"
          aria-controls="stackingBannerMultipleCollapse">
          Hide
        </button>
      </div>
    </div>
  </div>
</div>

Hide

Accessibility

Each banner uses aria-label="Site notice" to provide a description of the element to assistive technology. Icons within the banner use aria-hidden="true" and focusable="false" to prevent redundant announcements, as the icon is decorative and the text content conveys the full meaning. When the accordion is visible on small screens, Bootstrap's collapse plugin manages the aria-expanded attribute on each toggle button automatically.

Guidelines

Banners span the full width of the page.
When multiple banners are present, they stack vertically in the order they appear in the markup with no vertical space between them.
Banners are not anchored (sticky) to the top of the viewport. They scroll with the page content.
There is no dismiss variant. Banners remain visible as long as the back-end condition that triggers them persists.
Content and text wrap as screen size decreases. Text is never truncated, as banners convey important messaging.
Links within banner content are inline and styled using the standard anchor element.
On small screens, banners collapse into an accordion automatically. The same markup is used at all breakpoints.

Stacking Banner

Description

Definition

Examples

Single stacking banner

Stacking Banner - Single

Multiple stacking banners

Stacking Banner - Multiple

Accessibility

Guidelines