PricingBand
Pricing band: a LandingHeader over a grid of plan cards, each with a price, a checked feature list and an action.
View code
<PricingBand
eyebrow="Pricing"
title="Plans that grow with your pager"
description={
<>
Every plan checks from six regions. Pay for <strong>more monitors and faster checks</strong>,
never for seats.
</>
}
>
<PricingBand.Plan
name="Hobby"
price="$0"
period="/month"
description="For side projects and a personal status page."
features={
<>
<CheckRow>Five monitors</CheckRow>
<CheckRow>Five-minute checks</CheckRow>
<CheckRow>Email alerts</CheckRow>
<CheckRow>One public status page</CheckRow>
</>
}
action={
<LinkButton href="/examples/signup" color="neutral" variant="surface">
Start for free
</LinkButton>
}
/>
<PricingBand.Plan
name="Team"
price="$29"
period="/month"
featured
badge={<Badge color="brand">Most popular</Badge>}
description="For a product team that shares the on-call rotation."
features={
<>
<CheckRow>Fifty monitors</CheckRow>
<CheckRow>Thirty-second checks</CheckRow>
<CheckRow>Slack, SMS and webhook alerts</CheckRow>
<CheckRow>Status pages on your own domain</CheckRow>
<CheckRow>Ninety days of response history</CheckRow>
</>
}
action={
<LinkButton href="/examples/signup?plan=team" color="brand">
Start a 14-day trial
</LinkButton>
}
/>
<PricingBand.Plan
name="Business"
price="$99"
period="/month"
description="For companies with an uptime promise in their contracts."
features={
<>
<CheckRow>Two hundred monitors</CheckRow>
<CheckRow>Ten-second checks</CheckRow>
<CheckRow>Escalation policies and schedules</CheckRow>
<CheckRow>SLA reports every month</CheckRow>
<CheckRow>SAML single sign-on</CheckRow>
</>
}
action={
<LinkButton href="/examples/pricing" color="neutral" variant="surface">
Talk to sales
</LinkButton>
}
/>
</PricingBand>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { PricingBand } from "@sdxc/ui/landing";Renders a pricing band with a chapter header and a plan grid of one column on a phone, an
even count paired from the md container, and columns from lg, evened per plan count
with a short last row centred. Each card pushes its action to the foot, so actions in one row line up.
Composition
The parts the component publishes, each a static property of the host.
PricingBandPricingBand.PlanOne plan card: name and badge, price with its period, a one-line pitch, the checked features, and the action at the foot.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
columns | Columns | No | Plans per row from the lg container. Defaults to DEFAULT_COLUMNS. |
tone | Tone | No | Band fill. Defaults to DEFAULT_TONE. |
eyebrow | RemixNode | No | Optional eyebrow above the title. |
title | RemixNode | Yes | Section title — required, always supplied by the page. |
description | RemixNode | No | Supporting lead under the title. |
children | RemixNode | Yes | One PricingBand.Plan per plan, in reading order for wide layouts. |
parts | PartsProps | No | Per-part styling for title, lead, and plan grid. |
Also accepts everything in Omit<
LandingSection.Props,
"children" | "tone" | "title" | "parts"
>.
PricingBand.Plan
| Prop | Type | Required | Description |
|---|---|---|---|
name | RemixNode | Yes | Plan name, rendered as the card's heading one level below the band title. |
price | RemixNode | Yes | The amount, drawn large in tabular figures ("$29", "Free"). |
period | RemixNode | No | Billing period beside the amount, drawn muted ("/month"). |
description | RemixNode | No | One line on who the plan is for. |
features | RemixNode | No | CheckRow items; the card lays them in a CheckList. |
action | RemixNode | Yes | The plan's call to action, stretched across the card's foot. Its button or link takes the landing CTA radius, weight and edge; leave size at the 40px default. |
featured | boolean | No | Inverts the card, lifts it, and moves it first while plans stack. |
badge | RemixNode | No | A short label beside the name, such as "Most popular". |
Also accepts everything in Omit<TagProps<"div">, "children">.