# Pricing Cards

> Render responsive pricing cards for plans or packages.

Canonical HTML: https://press.varavel.com/docs/shortcodes/pricing-cards/
Markdown: https://press.varavel.com/docs/shortcodes/pricing-cards/index.md

`pricing_cards` renders up to three plan cards with price, description, CTA, features, badges, and featured state.

## When to Use

Use it on product pages where visitors need to compare packages. Keep plan names clear and feature lists short.

## Usage

```markdown
{{/* pricing_cards(
plan_1_name="Starter",
plan_1_price="$19",
plan_1_period="/month",
plan_1_cta_text="Start"
) */}}
```

## Live Example

{{ pricing_cards(
container="md",
title="Simple pricing",
plan_1_name="Starter",
plan_1_price="$19",
  plan_1_period="/month",
  plan_1_cta_text="Start",
  plan_1_feat_1="Landing sections",
  plan_1_feat_2="Docs layout",
  plan_2_name="Pro",
  plan_2_price="$49",
plan_2_period="/month",
plan_2_badge="Popular",
plan_2_featured="true",
plan_2_cta_text="Upgrade",
plan_2_cta_variant="solid",
plan_2_feat_1="Everything in Starter",
plan_2_feat_2="Priority workflows"
) }}

## Parameters

| Parameter            | Description                                                         |
| -------------------- | ------------------------------------------------------------------- |
| `container`          | Inner content width for the pricing section.                        |
| `eyebrow`            | Small uppercase label above the heading.                            |
| `title`              | Section heading.                                                    |
| `description`        | Supporting copy below the heading.                                  |
| `plan_N_name`        | Plan name for card `N`. Supports `plan_1` through `plan_3`.         |
| `plan_N_price`       | Price text for plan `N`, such as `$19`.                             |
| `plan_N_period`      | Billing period text for plan `N`, such as `/month`.                 |
| `plan_N_desc`        | Short description for plan `N`.                                     |
| `plan_N_badge`       | Optional badge text for plan `N`.                                   |
| `plan_N_featured`    | Set to `true` to highlight plan `N`.                                |
| `plan_N_cta_text`    | CTA label for plan `N`.                                             |
| `plan_N_cta_url`     | CTA URL for plan `N`.                                               |
| `plan_N_cta_variant` | CTA style for plan `N`.                                             |
| `plan_N_cta_color`   | CTA color token for plan `N`.                                       |
| `plan_N_feat_1`      | First feature for plan `N`. Supports feature slots `1` through `5`. |
| `plan_N_footnote`    | Optional small note below the price.                                |
| `bg`                 | Full-width section background token.                                |
| `class`              | Additional CSS classes on the outer section.                        |