content component

PricingPlanCard

Reusable pricing plan card component.

@wrnexus/ui 0.3.49 props1 slots0 events

Usage

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

<PricingPlanCard
  name="Starter"
  description="description"
  price="₹0"
  period="/month"
  featured="false"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`name`	`string`	Optional	`"Starter"`
`description`	`string`	Optional	`""`
`price`	`string`	Optional	`"₹0"`
`period`	`string`	Optional	`"/month"`
`featured`	`boolean`	Optional	`false`
`badgeLabel`	`string`	Optional	`"Most popular"`
`ctaLabel`	`string`	Optional	`"Choose plan"`
`ctaHref`	`string`	Optional	`"#"`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingPlanCard.wrn

component PricingPlanCard {
  props {
    class = ""
    name = "Starter"
    description = ""
    price = "₹0"
    period = "/month"
    featured = false
    badgeLabel = "Most popular"
    ctaLabel = "Choose plan"
    ctaHref = "#"
  }

  view {
        <article class="relative flex h-full min-w-0 flex-col rounded-3xl border bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm)] transition duration-200 sm:p-7 {class}">
      {#if featured}
        <div class="mb-5">
        <Badge label="{badgeLabel}" variant="brand" />
        </div>
      {/if}

      <h3 class="text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
        {name}
      </h3>

      {#if description}
        <p class="mt-2 min-h-14 text-sm leading-6 text-[var(--wire-color-text-muted)]">
          {description}
        </p>
      {/if}

      <div class="mt-6 flex flex-wrap items-end gap-x-1.5 gap-y-1">
        <span class="text-4xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text)]">
          {price}
        </span>
        {#if period}
          <span class="pb-1 text-sm text-[var(--wire-color-text-muted)]">
            {period}
          </span>
        {/if}
      </div>
        <div class="mt-6 flex-1 border-t border-[var(--wire-color-border)] pt-6">
        <slot />
        </div>

      {#if featured}
        <a
          href="{ctaHref}"
          class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast)] no-underline shadow-[var(--wire-shadow-sm)] transition duration-200 hover:bg-[var(--wire-color-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
        >
          {ctaLabel}
        </a>
      {:else}
        <a
          href="{ctaHref}"
          class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-[var(--wire-color-border-strong)] bg-[var(--wire-color-surface)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text)] no-underline transition duration-200 hover:border-[var(--wire-color-primary)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--wire-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
        >
          {ctaLabel}
        </a>
      {/if}
    </article>
    }
}