Pricing Cards

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.

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

$19/month

Start

Landing sections

Docs layout

Popular

$49/month

Upgrade

Everything in Starter

Priority workflows

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.