Skip to main content

Overview

Banners display prominent, viewport-wide announcement notices at the top or bottom of a page, complete with action links and dismissal controls.

Sticky Top Announcement Bar

Full-width top bar using .banner and .banner-primary:

<div class="banner banner-primary banner-sticky-top" data-boodoo-banner>
  <div class="banner-content">
    <span class="banner-icon"><span>🚀</span></span>
    <p class="banner-text mb-0"><span>boodoo v1.1.0 is now live!</span></p>
  </div>
  <div class="banner-actions">
    <a href="#" class="banner-link"><span>Learn more</span></a>
    <button type="button" class="btn-close" data-boodoo-dismiss="banner" aria-label="Close"></button>
  </div>
</div>

Floating Announcement Pill

Elevated floating capsule banner using .banner-floating:

<div class="banner banner-success banner-floating" data-boodoo-banner>
  <div class="banner-content">
    <span class="banner-icon"><span>🎉</span></span>
    <p class="banner-text mb-0"><span>System upgrade completed successfully.</span></p>
  </div>
  <div class="banner-actions">
    <button type="button" class="btn-close" data-boodoo-dismiss="banner" aria-label="Dismiss"></button>
  </div>
</div>