PricingPlanCard

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

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
    ctaLabel = "Choose plan"
    ctaHref = "#"
  }
  view {
        <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'} {class}">
        <Badge data-show="featured" label="Most popular" variant="brand" />
        <h3 class="mt-4 text-xl font-bold">{name}</h3>
        <p class="mt-2 text-sm text-slate-500">{description}</p>
        <div class="mt-6">
        <span class="text-4xl font-black">{price}</span>
        <span class="text-slate-500">{period}</span>
        </div>
        <div class="mt-6 flex-1">
        <slot />
        </div>
        <a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a>
        </article>
    }
}