SectionHeader

Usage

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

<SectionHeader
  eyebrow="eyebrow"
  title="Section title"
  description="description"
  align="left"
/>

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

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SectionHeader.wrn

component SectionHeader {
  props {
    class = ""
    eyebrow = ""
    title = "Section title"
    description = ""
    align = "left"
  }
  view {
        <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''} {class}">
        <p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p>
        <h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2>
        <p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p>
        <div class="mt-6">
        <slot />
        </div>
        </header>
    }
}