Banner

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Banner
  text="Announcement"
  href="href"
  actionLabel="Learn more"
  variant="brand"
/>

Legacy mount name: data-component="Banner".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Banner.wrn

component Banner {
  props {
    class = ""
    text = "Announcement"
    href = ""
    actionLabel = "Learn more"
    variant = "brand"
  }
  view {
        <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}">
        <span>{text}</span>
        <a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a>
        </aside>
    }
}