Site Notification

The Site Notification bar can be used as a site-wide or page specific notification bar meant to display important information or a call to action.

Usage

Should be below the main navigation bar. Do not place higher than any global header component.
Do not change the color to emergency banner yellow or blue.

Label

Short summary text.

Optional Button

HTML

<section id="site-notification--1" class="site-notification site-notification--1 position-relative z-index-3" aria-labelledby="site-notification--title--label">

	<div id="collapseSiteNotification--1" class="section-row py-4 collapse show bg-white shadow position-relative z-index-5">
		<!-- .container-fluid -->
		<div class="container-fluid">

			<div class="row justify-content-center align-items-center">
				<div class="col-md-10 col-lg-8 d-flex flex-row justify-content-center align-items-center">
          <div class="notification-text">
            <h2 id="site-notification--title--label" class="h4 mb-0 text-maroon-400">Label</h2>
              <p class="font-size-80 mt-2 mb-0 lh-sm">Short summary text.</p>
          </div>
            <p class="mb-0 ms-4">
              <a href="#" class="btn btn-sm btn-primary text-nowrap">Optional Button</a>
            </p>
				</div>
			</div>

		</div>
		<!-- /.container-fluid -->
	</div>

	<div class="position-absolute z-index-4 w-100">
		<!-- .container-fluid -->
		<div class="container-fluid">

			<div class="row justify-content-center align-items-center">
				<div class="col-md-auto">
					<button class="btn btn-sm btn-gray-200 btn-toggle py-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSiteNotification--1" aria-expanded="true" aria-controls="collapseSiteNotification--1">
						<span class="d-block text-close">Close<span class="ms-2 fas fa-times"></span></span>
						<span class="d-none text-open">Open<span class="ms-2 fas fa-chevron-down"></span></span>
					</button>
				</div>
			</div>

		</div>
	</div>

</section>