Figma marketing website pricing sections

A pricing section is the one block on a marketing page where the visitor does arithmetic. They count seats, guess at usage, and hold two columns against each other, and every ambiguity in the layout turns into a reason to close the tab.

These components cover both the pricing block that sits partway down a homepage and the tier row on a dedicated pricing page. The difference between those two is mostly how much explanation you wrap around them.

The tier card is the atom

Everything here is assembled from one tier card, 360px wide on desktop and 343px on mobile, with ten types that map to decisions you actually make. Icon and icon offset for a plain plan. Badge and badge group for a "Most popular" flag or a row of feature chips. Banner and call out for a discount strip or a note about how billing works.

Dual action for plans that need both a self-serve button and a route to sales. Dual check items, which widens to 576px so a long feature list runs in two columns instead of pushing the buttons below the fold. Primary card simple and primary card icon for the one plan you want chosen.

Emphasise exactly one of them: the highlighted card becomes the reference point every other price is judged against, which is the anchoring principle doing quiet work on your behalf. Highlighting two just relocates the indecision.

The billing toggle and its honesty problem

Monthly and annual pricing needs a control, usually sitting just above the tier row. Two rules keep it from irritating people.

First, the label must not change meaning when the state changes, which is the core guidance in the W3C switch pattern: a persistent "Billed annually" label beside a switch beats a two-ended toggle whose ends are unlabelled the moment someone tabs to it. Second, put the discount and the commitment in the same sentence.

A per-month figure that only exists if you pay twelve months upfront is the number people feel tricked by at checkout, and the trust you lose there costs more than the conversion you bought. Build the control from the kit's toggle or button group components depending on whether you want a switch or a segmented pair.

Comparison tables, one cell at a time

Below the cards, most pricing pages put a feature matrix, and these files break it down to the cell. A table cell is 304px by 64px on desktop and full width by 56px on mobile, holding a check, a minus, or plain text, aligned left or centered, with or without a text label alongside the icon.

Row headers and column headers are separate types, and two full-size table layouts sit in the pricing page header component if you would rather not assemble one row at a time.

Use the minus rather than an empty cell. A blank reads as an oversight; a minus reads as a decision. Keep the text-and-icon variant for the rows where "included" really means "included, up to 5GB", because that is the row support tickets come from.

Section first, then page

A pricing section is one block. A pricing page is that block plus every objection it raises.

The pricing page examples show the full arrangement, with FAQ sections, testimonials, and a closing CTA section around the tiers, while the landing page examples use the shorter three-card version partway down. Both are built from these same components, so a change to your tier card propagates instead of drifting apart page by page. Everything is drawn at 1,440px and 375px, in light and dark, and the pricing page header component adds twelve ready-made openers for the heading above the tiers.

The tiers exist in code as well. Untitled UI React pricing sections are open source, built with Tailwind CSS and React Aria, with the billing switch and the responsive card behaviour already handled.