Banner — Veritheme

Default

A full-width banner with info styling.

html

<div class="vt-banner vt-tone-info">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Banner text.</p>
  <button class="vt-shrink-0 vt-p-1 vt-rounded-lg">...</button>
</div>

Variants

Banners in different semantic colors for various contexts.

html

<div class="vt-banner vt-tone-info">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Info banner text.</p>
</div>

<div class="vt-banner vt-tone-success">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Success banner text.</p>
</div>

<div class="vt-banner vt-tone-warning">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Warning banner text.</p>
</div>

<div class="vt-banner vt-tone-danger">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Danger banner text.</p>
</div>

With Action

Banners with an action button on the right side.

html

<div class="vt-banner vt-tone-warning">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Your trial expires in 3 days.</p>
  <button class="vt-rounded-lg vt-text-xs vt-font-medium vt-h-7 vt-px-3 vt-border vt-border-current">
    Upgrade Now
  </button>
</div>

With Link

Banners with inline link text for more context.

html

<div class="vt-banner vt-tone-info">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">
    We updated our privacy policy.
    <a href="#" class="vt-underline vt-font-medium">Read more</a>.
  </p>
</div>

Compact

Thinner banners with reduced padding and smaller text.

html

<div class="vt-banner vt-py-2 vt-gap-2 vt-tone-info">
  <svg class="vt-w-4 vt-h-4">...</svg>
  <p class="vt-text-xs vt-flex-1">Compact banner text.</p>
</div>

Dismissible

Banners with a dismiss button to close them.

html

<div id="banner-1" class="vt-banner vt-tone-info">
  <svg class="vt-w-5 vt-h-5">...</svg>
  <p class="vt-text-sm vt-flex-1">Dismissible banner text.</p>
  <button onclick="this.parentElement.style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg">
    <svg class="vt-w-4 vt-h-4">...</svg>
  </button>
</div>

API Reference

All utility classes available for the Banner component.

Class	Type	Description
`vt-tone-info`	Variant	Blue tinted background and text for informational banners
`vt-tone-success`	Variant	Green tinted background and text for success banners
`vt-tone-warning`	Variant	Yellow/amber tinted background and text for warning banners
`vt-tone-danger`	Variant	Red tinted background and text for error/danger banners
`vt-rounded-lg`	Base	Rounded corners on the banner container
`vt-py-3 vt-px-4`	Base	Default padding for standard banner size
`vt-py-2 vt-px-4`	Size	Compact padding for smaller banner variant
`vt-flex vt-items-center vt-gap-3`	Layout	Horizontal layout with icon, text, and actions
`vt-text-sm`	Base	Default text size for banner message
`vt-text-xs`	Size	Smaller text for compact banners
`vt-flex-1`	Layout	Text fills remaining space between icon and action
`vt-shrink-0`	Layout	Prevents icon and close button from shrinking

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="banner" for site-wide announcements, role="alert" for urgent messages
Dismissible	Close button should have aria-label="Dismiss banner"
Focus	When banner appears dynamically, manage focus appropriately
Live region	Use aria-live="polite" for non-blocking updates