CSS-Only

Banner

Full-width announcement bars with semantic variants, positioning options, and dismissible functionality. Perfect for system messages, cookie consent, and important notifications.

Example

System maintenance scheduled for tonight at 10 PM EST.
Your session will expire in 5 minutes. 
<div class="omni-banner" data-variant="info" role="status">
  <div class="omni-banner-content">
    System maintenance scheduled for tonight at 10 PM EST.
  </div>
</div>

<div class="omni-banner" data-variant="warning" role="status">
  <div class="omni-banner-content">
    Your session will expire in 5 minutes.
  </div>
</div>

<div class="omni-banner" data-variant="danger" role="alert">
  <div class="omni-banner-content">
    Critical security update required.
  </div>
</div>

Variants

Semantic Variants

Use data-variant to convey meaning through color:

New features available in the latest version. Check the changelog.
Your changes have been saved successfully.
You are using an outdated browser. Please upgrade for the best experience. 
<div class="omni-banner" data-variant="info" role="status">
  <div class="omni-banner-content">
    <svg>...</svg>
    New features available in the latest version.
  </div>
</div>

Sizes

Use data-size to adjust banner padding:

Small banner - compact for subtle announcements
Medium banner - default size for most use cases
Large banner - prominent for important announcements 
<div class="omni-banner" data-variant="info" data-size="sm" role="status">...</div>
<div class="omni-banner" data-variant="info" role="status">...</div>
<div class="omni-banner" data-variant="info" data-size="lg" role="status">...</div>

Dismissible

Add data-dismissible="true" to include a close button. Requires JS to handle dismissal:

This banner can be dismissed. Click the close button to remove it. 
<div class="omni-banner" data-variant="warning" data-dismissible="true" role="status">
  <div class="omni-banner-content">
    This banner can be dismissed.
  </div>
  <button class="omni-close" aria-label="Dismiss announcement"></button>
</div>

Positioning

Static (default)

Standard document flow positioning:

Static banner - follows normal document flow

Sticky

Use data-position="sticky" to stick to the top when scrolling:

<div class="omni-banner" data-variant="info" data-position="sticky" role="status">
  <div class="omni-banner-content">
    This banner sticks to the top when scrolling
  </div>
</div>

Fixed

Use data-position="fixed" to fix to the top of the viewport:

<div class="omni-banner" data-variant="warning" data-position="fixed" role="status">
  <div class="omni-banner-content">
    This banner is fixed to the top of the viewport
  </div>
</div>

Bottom

Use data-position="bottom" for cookie consent or footer announcements:

<div class="omni-banner" data-variant="info" data-position="bottom" role="status">
  <div class="omni-banner-content">
    We use cookies to improve your experience.
    <a href="#">Learn more</a>
  </div>
  <button class="omni-close" aria-label="Dismiss cookie notice"></button>
</div>

With Actions

Include buttons or links within banner content:

A new version is available.
Setup complete! Ready to start. View dashboard 
<div class="omni-banner" data-variant="info" role="status">
  <div class="omni-banner-content">
    <svg>...</svg>
    <span>A new version is available.</span>
    <button class="omni-button" data-variant="primary" data-size="sm">
      Update Now
    </button>
  </div>
</div>

API Reference

Attribute Values Default Description
data-variant info, success, warning, danger info Semantic color variant
data-size sm, md, lg md Banner padding size
data-position static, sticky, fixed, bottom static Banner positioning behavior
data-dismissible true — Adds space for close button

HTML Structure

<div class="omni-banner" data-variant="[variant]" role="[role]">
  <div class="omni-banner-content">
    <!-- Icon (optional) -->
    <svg>...</svg>

    <!-- Message text -->
    <span>Your message here</span>

    <!-- Actions (optional) -->
    <button class="omni-button">Action</button>
  </div>

  <!-- Close button (optional, if dismissible) -->
  <button class="omni-close" aria-label="Dismiss"></button>
</div>

Accessibility

  • Use appropriate ARIA roles based on urgency:
    • role="alert" for critical/urgent messages (danger) - announces immediately
    • role="status" for advisory messages (info, warning, success) - announces when idle
  • Close buttons require descriptive aria-label (e.g., "Dismiss announcement")
  • Banner content is centered with max-width for readability
  • Color alone is not used to convey meaning - icons and text provide context
  • Links and buttons within banners maintain proper contrast ratios
  • Fixed/sticky positioning respects prefers-reduced-motion
  • Dismissible banners should persist dismissal state (requires JS)

ARIA Role Guidelines

<!-- Critical/urgent: announced immediately -->
<div class="omni-banner" data-variant="danger" role="alert">
  <div class="omni-banner-content">
    Service outage detected. We are investigating.
  </div>
</div>

<!-- Advisory: announced when idle -->
<div class="omni-banner" data-variant="info" role="status">
  <div class="omni-banner-content">
    System maintenance scheduled for tonight.
  </div>
</div>

Best Practices

  • Keep messages concise: Banners should communicate the essential information quickly
  • Use appropriate variants: Match the semantic meaning to the message urgency:
    • info: General announcements, updates, neutral information
    • success: Positive confirmation, successful operations
    • warning: Important notices, non-critical warnings
    • danger: Critical alerts, errors, urgent actions required
  • Limit banner usage: Avoid showing multiple banners simultaneously - prioritize the most important message
  • Make dismissible when appropriate: Allow users to dismiss non-critical announcements
  • Provide clear actions: If action is required, include obvious buttons or links
  • Respect user attention: Don't overuse fixed/sticky positioning - reserve for truly important messages
  • Include icons for clarity: Visual icons help users quickly identify message type

Components Used

Other OmniUI components demonstrated on this page:

Button