banner component

Drop-in semantic component. See examples, sizes, variants, and source.

Wide page-level message bar. Apply intent (error, warning, success, info, feature) and an optional style (light, lighter, stroke) to banner. Add dismissible for a close button or data-auto-dismiss="ms" for timed close. Stacking, persistence (data-persist), progress bars, and the Banner.create() / Banner.dismissAll() JS API live in banner.js.

Banner Component

Basic Banner

<div class="stack compact">
  <div class="banner error dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Error!</span>
      <span class="separator"></span>
      <span class="description">Something went wrong. Please try again.</span>
    </div>
    <span class="close"></span>
  </div>

  <div class="banner warning dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Warning!</span>
      <span class="separator"></span>
      <span class="description">Your session will expire in 5 minutes.</span>
    </div>
    <span class="close"></span>
  </div>

  <div class="banner success dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Success!</span>
      <span class="separator"></span>
      <span class="description">Your changes have been saved.</span>
    </div>
    <span class="close"></span>
  </div>

  <div class="banner info dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Information</span>
      <span class="separator"></span>
      <span class="description">New features are now available.</span>
    </div>
    <span class="close"></span>
  </div>

  <div class="banner feature dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">New Feature!</span>
      <span class="separator"></span>
      <span class="description">Try our new dark mode theme.</span>
    </div>
    <span class="close"></span>
  </div>
</div>

<div class="stack compact">
  <div class="banner error dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Error!</span>
      <span class="separator"></span>
      <span class="description">Something went wrong. Please try again.</span>
    </div>
    <span class="close"></span>
  </div>

<div class="banner warning dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Warning!</span>
      <span class="separator"></span>
      <span class="description">Your session will expire in 5 minutes.</span>
    </div>
    <span class="close"></span>
  </div>

<div class="banner success dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Success!</span>
      <span class="separator"></span>
      <span class="description">Your changes have been saved.</span>
    </div>
    <span class="close"></span>
  </div>

<div class="banner info dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Information</span>
      <span class="separator"></span>
      <span class="description">New features are now available.</span>
    </div>
    <span class="close"></span>
  </div>

<div class="banner feature dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">New Feature!</span>
      <span class="separator"></span>
      <span class="description">Try our new dark mode theme.</span>
    </div>
    <span class="close"></span>
  </div>
</div>

Style Variations

<div class="stack compact">
  <!-- Filled Style (Default) -->
  <div class="banner success">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Filled Style</span>
      <span class="description">Default solid background style</span>
    </div>
  </div>

  <!-- Light Style -->
  <div class="banner success light">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Light Style</span>
      <span class="description">Light background with darker text</span>
    </div>
  </div>

  <!-- Lighter Style -->
  <div class="banner success lighter">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Lighter Style</span>
      <span class="description">Very subtle background color</span>
    </div>
  </div>

  <!-- Stroke/Outline Style -->
  <div class="banner success stroke">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Stroke Style</span>
      <span class="description">Border with transparent background</span>
    </div>
  </div>
</div>

<div class="stack compact">
  
  <div class="banner success">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Filled Style</span>
      <span class="description">Default solid background style</span>
    </div>
  </div>

<div class="banner success light">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Light Style</span>
      <span class="description">Light background with darker text</span>
    </div>
  </div>

<div class="banner success lighter">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Lighter Style</span>
      <span class="description">Very subtle background color</span>
    </div>
  </div>

<div class="banner success stroke">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Stroke Style</span>
      <span class="description">Border with transparent background</span>
    </div>
  </div>
</div>

Size Variants

<div class="stack compact">
  <!-- Compact -->
  <div class="banner info compact">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Compact Banner</span>
    </div>
  </div>

  <!-- Default -->
  <div class="banner info">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Default Banner</span>
    </div>
  </div>

  <!-- Large -->
  <div class="banner info xl">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Large Banner</span>
    </div>
  </div>
</div>

With Actions

<div class="stack compact">
  <div class="banner warning dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Server Maintenance</span>
      <span class="separator"></span>
      <span class="description"
        >Our servers will undergo maintenance on November 27, 2023 at 12:00 PM.</span
      >
    </div>
    <div class="actions">
      <a href="#" class="link">Learn more</a>
    </div>
    <span class="close"></span>
  </div>

  <div class="banner error dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Payment Failed</span>
      <span class="description">We couldn't process your payment.</span>
    </div>
    <div class="actions multiple">
      <a href="#" class="link">Retry Payment</a>
      <a href="#" class="link">Contact Support</a>
    </div>
    <span class="close"></span>
  </div>
</div>

Auto-dismiss

<div class="stack compact">
  <!-- Auto-dismiss after 5 seconds -->
  <div class="banner success" data-auto-dismiss="5000">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Saved!</span>
      <span class="description">This will disappear in 5 seconds</span>
    </div>
  </div>

  <!-- With countdown -->
  <div class="banner info dismissible" data-auto-dismiss="10000" data-countdown>
    <div class="content">
      <span class="icon"></span>
      <span class="title">Quick notification</span>
      <span class="description">Auto-dismiss with countdown</span>
    </div>
    <span class="close"></span>
  </div>

  <!-- With progress bar -->
  <div class="banner warning" data-auto-dismiss="8000" data-progress>
    <div class="content">
      <span class="icon"></span>
      <span class="title">Processing...</span>
      <span class="description">Please wait while we complete your request</span>
    </div>
  </div>
</div>

Position Options

<div class="stack compact">
  <!-- Inline examples only - fixed positions would affect page layout -->
  <div class="banner info">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Inline Banner</span>
      <span class="description">Standard inline positioning</span>
    </div>
  </div>

  <div class="banner warning dismissible">
    <div class="content">
      <span class="icon"></span>
      <span class="title">Dismissible Banner</span>
      <span class="description">Can be dismissed by user</span>
    </div>
    <span class="close"></span>
  </div>
</div>

Persistent Banners

<div class="stack compact">
  <!-- Persistent dismissal -->
  <div class="banner feature dismissible" data-banner-id="welcome-2024" data-persist>
    <div class="content">
      <span class="icon"></span>
      <span class="title">Welcome to 2024!</span>
      <span class="description">This banner won't show again after dismissing</span>
    </div>
    <span class="close"></span>
  </div>

  <!-- Reset dismissed banners button -->
  <button class="button" onclick="Banner.clearDismissed(); location.reload();">
    Reset All Dismissed Banners
  </button>
</div>

Container Inheritance

<!-- Multiple banners with inherited styles -->
<div class="banners light">
  <div class="banner error">
    <div class="content">
      <span class="title">First Banner</span>
      <span class="description">Inherits light style from container</span>
    </div>
  </div>
  <div class="banner warning">
    <div class="content">
      <span class="title">Second Banner</span>
      <span class="description">Also inherits light style</span>
    </div>
  </div>
  <div class="banner success">
    <div class="content">
      <span class="title">Third Banner</span>
      <span class="description">All banners have consistent styling</span>
    </div>
  </div>
</div>

Live Demo

<div class="demo-controls" style="display: flex; gap: 1rem; flex-wrap: wrap">
  <button
    class="button primary"
    onclick="
                    Banner.create({
                        type: 'success',
                        title: 'Great job!',
                        description: 'Your action was successful.',
                        dismissible: true,
                        autoDismiss: 5000
                    });
                "
  >
    Show Success
  </button>

  <button
    class="button warning"
    onclick="
                    Banner.create({
                        type: 'warning',
                        title: 'Warning',
                        description: 'This action requires attention.',
                        dismissible: true,
                        countdown: true,
                        autoDismiss: 8000
                    });
                "
  >
    Show Warning
  </button>

  <button
    class="button negative"
    onclick="
                    Banner.create({
                        type: 'error',
                        title: 'Error occurred',
                        description: 'Something went wrong.',
                        dismissible: true,
                        actions: [
                            { text: 'Retry', action: 'retry' },
                            { text: 'Cancel', action: 'cancel' }
                        ]
                    });
                "
  >
    Show Error
  </button>

  <button
    class="button info"
    onclick="
                    Banner.create({
                        type: 'info',
                        style: 'light',
                        title: 'Did you know?',
                        description: 'This banner has a progress bar.',
                        progress: true,
                        autoDismiss: 10000,
                        position: 'bottom'
                    });
                "
  >
    Show with Progress
  </button>

  <button class="button" onclick="Banner.dismissAll();">Dismiss All</button>
</div>

<div class="demo-controls" style="display: flex; gap: 1rem; flex-wrap: wrap">
  <button
    class="button primary"
    onclick="
                    Banner.create({
                        type: 'success',
                        title: 'Great job!',
                        description: 'Your action was successful.',
                        dismissible: true,
                        autoDismiss: 5000
                    });
                "
  >
    Show Success
  </button>

<button
    class="button warning"
    onclick="
                    Banner.create({
                        type: 'warning',
                        title: 'Warning',
                        description: 'This action requires attention.',
                        dismissible: true,
                        countdown: true,
                        autoDismiss: 8000
                    });
                "
  >
    Show Warning
  </button>

<button
    class="button negative"
    onclick="
                    Banner.create({
                        type: 'error',
                        title: 'Error occurred',
                        description: 'Something went wrong.',
                        dismissible: true,
                        actions: [
                            { text: 'Retry', action: 'retry' },
                            { text: 'Cancel', action: 'cancel' }
                        ]
                    });
                "
  >
    Show Error
  </button>

<button
    class="button info"
    onclick="
                    Banner.create({
                        type: 'info',
                        style: 'light',
                        title: 'Did you know?',
                        description: 'This banner has a progress bar.',
                        progress: true,
                        autoDismiss: 10000,
                        position: 'bottom'
                    });
                "
  >
    Show with Progress
  </button>

<button class="button" onclick="Banner.dismissAll();">Dismiss All</button>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`banner`	Required base class	Always required
	`banners`	Group container — child banners inherit style	Wrap with `banners light` etc.
	`content`	Inner flex row holding icon + title + description	Inside `banner`
	`title`	Bold leading label	Inside `.content`
	`description`	Body text	Inside `.content`
	`actions`	Trailing link area — accepts `multiple` for spacing	Inside `banner`
Sizes	`compact`	Tight padding, small text	Modifier on `banner`
	(default)	Standard size	No size class needed
	`xl`	Large padding, big title	Modifier on `banner`
Intents	`error`	Red — destructive / failure	Alias: `negative`
	`warning`	Amber — caution	Modifier on `banner`
	`success`	Green — confirmation	Alias: `positive`
	`info`	Blue — informational	Alias: `primary`
	`feature`	Purple — announcement / promo	Modifier on `banner`
Variants	(default)	Filled — solid intent background	Alias: `filled`
	`light`	Tinted background with darker text + border	Modifier on `banner`
	`lighter`	Very subtle 50% tint	Modifier on `banner`
	`stroke`	Transparent background with intent border	Alias: `outline`
Position	`sticky-top`	Sticks to top of scroll container	Modifier on `banner`
	`fixed-top`	Pinned to viewport top, full-width	Modifier on `banner`
	`fixed-bottom`	Pinned to viewport bottom, full-width	Modifier on `banner`
Behaviour	`dismissible`	Shows close button — also reserves right padding	Modifier on `banner`
	`data-auto-dismiss="ms"`	Auto-close after N milliseconds	e.g. `data-auto-dismiss="5000"`
	`data-progress`	Animated progress bar tied to auto-dismiss	HTML attribute
	`data-countdown`	Visible seconds-remaining counter	HTML attribute
	`data-banner-id` + `data-persist`	Remember dismissal in localStorage by id	Reset via `Banner.clearDismissed()`