Search blocks by description or jump to a page.
A wide pricing row that lays plans side by side in a single band. Fits narrow page slots and pages where you want plans visible without much scrolling.
Horizontal Pricing is a two-part layout that presents three plans side by side above a scrollable feature comparison table. A centered heading and subheading introduce the section. On wider screens, a four-column grid lines up a "Features" label with three plan cards, each showing the plan name, monthly price, a short description, and a call-to-action button. The popular plan card carries a distinct border to draw attention. Below the plan row, a full-width bordered table lists every feature as a row and maps each plan to a check icon, a dash, or a text value in its column. On narrow screens the table is replaced by individual stacked cards, one per plan, each listing all features inline.
All copy in the heading, plan names, prices, descriptions, and the feature list is straightforward to replace. You can add or remove plans and feature rows as long as each new plan key matches its column. The popular flag on any one plan can be moved or removed without affecting the rest.
Reach for this block when your developer tools product has a small number of well-defined tiers and you want buyers to read a precise feature matrix rather than scan bullet summaries. The side-by-side plan cards let engineers compare API access limits and storage quotas at a glance, and the scrollable table handles a long feature list without breaking the layout. It is a stronger choice than the simple or minimalist variants when the feature differences across tiers are the main reason a buyer upgrades.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block separates plan identity from feature data, so you can tune either side independently:
Tip: keep the feature list to eight to ten rows so the table stays readable on a 13-inch laptop without requiring a long scroll.