Public pages

OfferCard

One thing you can buy: a plan, an add-on, a pack.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`title`Required	`React.ReactNode`
`price`Required	`React.ReactNode`
`period`	`React.ReactNode`
`detail`	`React.ReactNode`
`points`	`React.ReactNode[]`
`icon`	`IconName`
`current`	`boolean`
`currentLabel`	`string`
`badge`	`React.ReactNode`
`featured`	`boolean`	The one to suggest (with a badge like "Best value"): a thin accent ring.
`headingLevel`	`number`
`label`	`string`
`className`	`string`
`children`	`React.ReactNode`

Guidelines

One thing you can buy: a plan, an add-on, a pack. Settings, Billing lays them side by side so what you can buy and what you have read at a glance.

Provide: title and price. Optional period ("a month"), detail, points, icon, current, currentLabel (default "Yours"), badge, headingLevel (default 3), and the action as children.

Put several in a .gv-offers grid; they wrap to one column on phones.
current marks the one you have: the selected style, a green outline and a "Yours" badge with a check, so status is never color alone. Its action is usually Manage.
badge is a short note for the others, like "Best value", in an accent pill. Pair it with featured for a thin accent ring. Never more than one per group.
points are what it includes, three at most, short.
The action spans the card's width at the bottom; cards in a row keep one height.
One primary button per card at most. Prices and periods are words, not abbreviations: "$15" and "a month".
Solid surface only, never glass, and no gradients.

Show one card per thing you can buy, not one per billing period: put a Monthly or Yearly SegmentedControl above the cards and change the price on the card.
Cards keep a set width and don't stretch across wide panels.