# `PhiaUi.Components.PricingCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/pricing_card.ex#L1)

Pricing plan card for displaying subscription tiers.

Renders a structured pricing card with:
- Plan name and optional promotional badge
- Price display (price + billing period)
- Optional description
- Feature list with checkmark (available) or dash (unavailable) indicators
- A call-to-action button (optionally rendered as an `<a>` link)
- Optional highlighted state for featured / recommended plans

## Feature list syntax

Features are a plain list of strings. Prefix a feature string with `"—"`
(em dash) to mark it as unavailable — it will be displayed with a dash
instead of a checkmark, and in muted foreground colour:

    features={[
      "Unlimited projects",
      "Priority support",
      "—SSO / SAML",        # unavailable — shown muted with dash
      "—Custom domains"     # unavailable
    ]}

## Highlighted state

Set `highlighted={true}` to add a `ring-2 ring-primary` border and a subtle
`bg-primary/5` tint. Use this for the recommended or most popular plan.

## Examples

    <%!-- Basic plan --%>
    <.pricing_card
      plan="Starter"
      price="Free"
      period=""
      features={["1 project", "5 team members", "—Priority support"]}
      cta_label="Get started"
      cta_href="/signup"
    />

    <%!-- Highlighted Pro plan --%>
    <.pricing_card
      plan="Pro"
      price="$29"
      period="/month"
      description="Everything you need for growing teams."
      badge="Most popular"
      features={["Unlimited projects", "50 team members", "Priority support", "—SSO"]}
      highlighted={true}
      cta_label="Start free trial"
      cta_href="/signup?plan=pro"
    />

    <%!-- Three-column pricing section --%>
    <div class="grid gap-6 sm:grid-cols-3">
      <.pricing_card plan="Free"       price="$0"  features={["1 project"]}     cta_href="/signup" />
      <.pricing_card plan="Pro"        price="$29" features={["Unlimited"]}      highlighted cta_href="/signup?plan=pro" badge="Popular" />
      <.pricing_card plan="Enterprise" price="Custom" period="" features={["All features", "SLA"]} cta_label="Contact sales" cta_href="/contact" />
    </div>

# `pricing_card`

Renders a pricing plan card.

## Card layout

The card contains three regions:

1. **Header** — optional promotional badge, plan name, price (with billing
   period), optional description, and any `:header_extra` slot content.
2. **Content** — a `<hr>` separator, feature list, and CTA button.
3. **Footer** — optional `:footer` slot content below the CTA button.

The CTA button is wrapped in an `<a>` link when `cta_href` is provided, so
it works for both LiveView events (`phx-click` via `:rest`) and navigation.

## Examples

    <%!-- Minimal free plan --%>
    <.pricing_card
      plan="Starter"
      price="Free"
      period=""
      features={["1 project", "5 team members", "—Priority support"]}
      cta_label="Get started"
      cta_href="/signup"
    />

    <%!-- Highlighted Pro plan with badge --%>
    <.pricing_card
      plan="Pro"
      price="$29"
      period="/month"
      description="Everything you need for a growing team."
      badge="Most popular"
      features={["Unlimited projects", "50 team members", "Priority support", "—SSO"]}
      highlighted={true}
      cta_label="Start free trial"
      cta_href="/signup?plan=pro"
    />

## Attributes

* `plan` (`:string`) (required) - Plan name (e.g. 'Pro', 'Enterprise').
* `price` (`:string`) (required) - Price string (e.g. '$29').
* `period` (`:string`) - Billing period label. Defaults to `"/month"`.
* `description` (`:string`) - Short plan description. Defaults to `nil`.
* `features` (`:list`) - List of feature strings. Prefix '—' marks unavailable features. Defaults to `[]`.
* `highlighted` (`:boolean`) - Highlight as recommended/featured plan. Defaults to `false`.
* `badge` (`:string`) - Optional badge label above plan name. Defaults to `nil`.
* `cta_label` (`:string`) - Call-to-action button label. Defaults to `"Get started"`.
* `cta_href` (`:string`) - Optional href for CTA button. Defaults to `nil`.
* `disabled` (`:boolean`) - Disable the CTA button. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the card element.
## Slots

* `header_extra` - Extra content rendered below the price.
* `footer` - Content rendered below the CTA button.

---

*Consult [api-reference.md](api-reference.md) for complete listing*