layout component

CenteredHero

Reusable centered hero component.

@wrnexus/ui 0.2.675 props1 slots0 events

Usage

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

<CenteredHero
  eyebrow="eyebrow"
  title="title"
  description="description"
  align="start"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`eyebrow`	`string`	Optional	`""`
`title`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`align`	`string`	Optional	`"start"`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CenteredHero.wrn

component CenteredHero {
  props {
    eyebrow = ""
    title = ""
    description = ""
    align = "start"
    class = ""
  }
  view {
        <section class="wire-catalog-section wire-text--{align} {class}">
        <header data-show="eyebrow || title || description">
        <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
        <h2 data-show="title">{title}</h2>
        <p data-show="description" class="wire-muted">{description}</p>
        </header>
        <slot />
        </section>
    }
}