Mark · Chrome

Alert bar

A full-width announcement strip for the top of a page — a message with an optional icon and link, in an accent or dark tone, optionally dismissible.

Announcement

Full page preview ↗
Fall enrollment is open — classes start Aug 26. Apply now → 
<div class="alert-bar alert-bar--primary" data-bs-theme="dark">
  <div class="container d-flex flex-wrap align-items-center justify-content-center gap-2 py-2 small">
    <i class="bi bi-megaphone-fill"></i>
    <span>Fall enrollment is open — classes start Aug 26.</span>
    <a class="alert-bar__link fw-semibold" href="#">Apply now &rarr;</a>
  </div>
</div>
message: Fall enrollment is open — classes start Aug 26.
icon: bi-megaphone-fill
link_label: Apply now
link_href: #

Dark tone

Full page preview ↗
Scheduled maintenance this Sunday, 2–4am ET. 
<div class="alert-bar alert-bar--dark" data-bs-theme="dark">
  <div class="container d-flex flex-wrap align-items-center justify-content-center gap-2 py-2 small">
    <i class="bi bi-tools"></i>
    <span>Scheduled maintenance this Sunday, 2–4am ET.</span>
  </div>
</div>
message: Scheduled maintenance this Sunday, 2–4am ET.
icon: bi-tools
tone: dark
Fields (7)
FieldTypeNotes
message text required
icon text
link_label text
link_href url
tone text primary or dark
dismissible boolean Adds a close button; the dismissal is remembered per id
id text Unique id — required for dismissible so each bar is remembered separately
On this page