A pricing page is a comparison, and `PricingCard` is the thing being compared: one plan's name,
its amount, the features it includes and the action that chooses it. The card is the unit rather
than the table, because a pricing table is a layout decision, one plan per row on a phone, three
across on a desktop, and the page places them in a [Grid](/components/layouts/grid) rather than
having the framework pick a shape for it. One card on its own is legitimate too: the plan a
product sells, stated in the middle of a landing page.

It belongs to the [marketing sections](/concepts/marketing-sections) family, so its heading block
and its configured actions behave the way every other band's do.

```tsx demo="marketing/pricing-card-preview"
```

## Usage

```tsx
import { PricingCard } from "@asheeui/web";

<PricingCard
  name="Growth"
  price="£29"
  period="/month"
  features={[{ label: "25,000 contacts" }]}
  primaryAction={{ label: "Choose Growth", href: "/signup" }}
/>
```

`name` and `price` are required; everything else is a plan stating more about itself. A table is a
grid of these, one child per plan, so the rows line up across the cards and the recommended one is
marked with `highlighted` and a `badge`.

## The amount and the period

`price` and `period` are two props because they are two things: an amount is a figure and a period
is a unit, and the two are typeset differently on one baseline. `price` is a node rather than a
number, `£29`, `Free`, `Custom`, `from £0.02 per email` are all amounts a plan states, and the
component does not parse currency, because a framework that guesses at money will eventually
charge somebody the wrong amount. `period` is optional: a one-off price, a lifetime licence and a
"contact us" plan have no unit to show.

`features` is a list of `PricingFeatureItem`, and a line with `included: false` is drawn as
excluded rather than dropped, so two plans can be read line for line and a reader can see what the
cheaper one does not have. The excluded line also carries the words "(not included)" for assistive
technology, so the cross beside it is not the only thing saying so.

```tsx demo="marketing/pricing-card-features"
```

## The recommended plan

`highlighted` draws a ring in the primary colour and `variant` decides the surface it sits on:
`bordered` for a plan among equals, `elevated` for the one a reader should look at first. Neither
is a substitute for saying so, put the reason in `badge`, above the plan name, so the
recommendation is readable rather than merely coloured, and so it still exists for a reader who
cannot see the ring.

`size` is density: the card's padding and the gaps between its parts, on the same scale as every
other card in the framework. A plan does not grow, centre or lift itself against its neighbours,
that alignment is the [Grid](/components/layouts/grid)'s, which is what keeps a row of plans
reading as one table.

```tsx demo="marketing/pricing-card-highlighted"
```

## Props

```props PricingCard
```

Two options are registered, `variant` `bordered` and `size` `lg`, and resolve from the instance,
then `components.pricingcard`, then the registration. They are the two a product restates, because
they are the plan's dress. `highlighted` is deliberately **not** one of them, and cannot be: a
recommendation is a statement about one plan in one table rather than about the product, so it is an
instance prop, and a `components.pricingcard.highlighted` would mark every plan as the recommended
one.

The card is the framework's [`Card`](/components/data-display/card), which is where its rounding
and its surface come from. Rounding is not a pricing-card option at all: it resolves through the
card's cascade, `components.card.radius`, then the application's `defaultRadius`, which the
framework ships as `xs`, then the card's own `md` fallback, so a product that rounds every
surface states it once and every plan follows. The surface is the treatment `variant` names, drawn
by the card. What the plan does state itself is its content, `name`, `price`, `period`,
`description`, `badge`, `features`, the two actions and `highlighted`, together with `titleAs`,
which is where the plan name's level in the outline comes from.

## Accessibility

- The plan's name is the card's title, and a card's title is a level-three heading by default, so
  a pricing table belongs under a section `h2` and each plan becomes an `h3`. The band forwards
  `titleAs` to the card, so a plan that sits somewhere else in the outline, under a card's `h3`,
  or directly below the page's `h1`, states its own level rather than inheriting one that does
  not fit.
- The amount is not a heading: it renders as a styled span inside the card, so a reader
  navigating by heading hears the plan and its features, not every price read out as a section
  title.
- Each feature is a list item, and an excluded line states "(not included)" in text as well as
  drawing a cross, so the feature list survives a reader who cannot see the marker.
- A configured action becomes a link when it carries `href`, or a router `component`, and a
  `<button>` when it does not. A plan chosen through a handler rather than a destination puts that
  [`Button`](/components/forms/button) in `children`, because a configured action takes no
  `onClick`.

The heading block, the actions as configuration and the data-not-markup body are stated once in
[Marketing sections](/concepts/marketing-sections).

## Related

```related card, grid, cta
```