content component

FeatureIconCard

Reusable feature icon card component.

@wrnexus/ui 0.2.678 props1 slots0 events

Usage

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

<FeatureIconCard
  eyebrow="eyebrow"
  title="title"
  description="description"
  href="href"
  actionLabel="Learn more"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`eyebrow`	`string`	Optional	`""`
`title`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`href`	`string`	Optional	`""`
`actionLabel`	`string`	Optional	`"Learn more"`
`image`	`string`	Optional	`""`
`alt`	`string`	Optional	`""`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureIconCard.wrn

component FeatureIconCard {
  props {
    eyebrow = ""
    title = ""
    description = ""
    href = ""
    actionLabel = "Learn more"
    image = ""
    alt = ""
    class = ""
  }
  view {
        <article class="wire-card wire-catalog-card {class}">
        <img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" />
        <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
        <h3 data-show="title">{title}</h3>
        <p data-show="description">{description}</p>
        <slot />
        <a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>
        </article>
    }
}