content component

ProductCard

Reusable product card component.

@wrnexus/ui 0.2.677 props0 slots0 events

Usage

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

<ProductCard
  eyebrow="Product"
  title="Product name"
  description="description"
  href="#"
  actionLabel="Learn more"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`eyebrow`	`string`	Optional	`"Product"`
`title`	`string`	Optional	`"Product name"`
`description`	`string`	Optional	`""`
`href`	`string`	Optional	`"#"`
`actionLabel`	`string`	Optional	`"Learn more"`
`status`	`string`	Optional	`""`
`class`	`string`	Optional	`""`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProductCard.wrn

component ProductCard {
  props {
    eyebrow = "Product"
    title = "Product name"
    description = ""
    href = "#"
    actionLabel = "Learn more"
    status = ""
    class = ""
  }
  view {
        <article class="wire-product-card {class}">
        <div class="wire-product-card__meta">
        <span class="wire-eyebrow">{eyebrow}</span>
        <span data-show="status" class="wire-badge">{status}</span>
        </div>
        <h3>{title}</h3>
        <p>{description}</p>
        <a href="{href}" class="wire-product-card__link">{actionLabel}<span aria-hidden="true"> →</span>
        </a>
        </article>
    }
}