Pricing Card — cinder playground

Overview

Presents a single pricing plan with its name, price, feature list, an optional caveat line, and a call-to-action button, with a selectable/active state.

Usage

<script lang="ts">
  import { PricingCard } from '@lostgradient/cinder/pricing-card';
</script>

Guidance

Use When

Letting users compare and select subscription tiers or product plans.
Highlighting one tier as selected or recommended in a pricing comparison.

Avoid When

Showing generic grouped content without a distinct price or CTA — use card instead.
Displaying a single key metric in isolation — use stat or statistic-group instead.

Live preview

When to use

Use when

Letting users compare and select subscription tiers or product plans.
Highlighting one tier as selected or recommended in a pricing comparison.

Avoid when

Showing generic grouped content without a distinct price or CTA — use card instead.
Displaying a single key metric in isolation — use statistic or statistic-group instead.

Examples

Pricing tiers

Three plan tiles side by side with one pre-selected.

With caveat

A pricing card with a consumer-supplied caveat beneath the feature list, useful for legal disclaimers or billing notes.

Props

Props for pricing-card
Name	Type	Default	Required	Description
`name`	`text`		req	Plan name displayed as the card heading.
`price`	`text`		req	Price string, e.g. "$9/mo" or "Free". Rendered verbatim — include any currency symbol and billing period.
`features`	`string[]`		req	List of feature strings to display. Rendered as a bulleted list.
`cta`	`text`		req	Label for the call-to-action button.
`onSelect`	`() => void`		req	Called when the CTA button is clicked.
`caveat`	`text`			Optional footnote or caveat displayed beneath the features list. Use for legal disclaimers, billing notes, or conditional terms. Rendered in a visually subdued style to distinguish it from the main feature list.
`selected`	`boolean`	`false`		Whether this card represents the currently selected plan. Sets `data-cinder-selected` and `aria-current="true"` on the root element.