Blueprint 04
These three components carry the commercial argument of a page. Each has a small number of viable structures, a well-known failure mode, and a specific rule about what happens when the screen gets narrow.
Tier count drives structure. Two tiers work as side-by-side cards with a clear distinction — usually self-serve versus assisted. Three tiers are the most common arrangement and fit a three-column grid with the middle column raised as the recommended option. Four tiers begin to strain a card layout at tablet width and are often better as a comparison table. Five or more tiers should not be cards at all; use a table with a sticky first column, or split the audience into two pages.
Each tier card holds the same slots in the same order: tier name, one-line positioning, price with billing period, primary action, a short inclusions list, and an optional footnote. Keep the inclusion lists the same length across tiers even if that means writing "not included" rows, because uneven lists make the cards different heights and destroy the horizontal reading line across the row. If your grid stretches cards to equal height automatically, still align the action buttons by pushing them to the bottom with margin-top: auto inside a flex column.
| Format | Works at | Pros | Cons |
|---|---|---|---|
| Tier cards | 2–4 tiers | Scannable, works well on mobile by stacking | Poor for detailed feature comparison |
| Comparison table | 3–8 tiers | Precise; good for procurement audiences | Needs horizontal scroll or row-per-tier reflow on mobile |
| Cards plus expandable table | 3–5 tiers | Fast decision up top, detail on demand | Two components to keep in sync |
| Single price plus calculator | Usage-based products | Honest about variable cost | Requires input validation and a clear default state |
Two structural notes. First, the "recommended" treatment should be carried by more than colour: add a label, a thicker border and a slight size increase, so the emphasis survives a monochrome print or a colour-vision difference. Second, on mobile, reorder so the recommended tier appears first rather than second — a stacked column puts the middle card below the fold otherwise.
There are three structures that cover nearly every feature section, and picking the wrong one is usually a density problem rather than a taste problem.
Structure A
Copy and media swap sides on each row. Handles three to five substantial features that each need a paragraph and a visual. Give every row identical vertical padding, and on mobile always put copy above media regardless of the desktop side, so the reading rhythm stays constant.
Structure B
Three or four columns of icon, short title, two-line description. Ideal for six to twelve small capabilities that do not each deserve a row. Keep descriptions within a strict character limit, or the grid becomes ragged and the eye loses the column.
Structure C
One feature visible at a time with a tab list above. Saves vertical space and suits products with distinct modules. Costs you scannability and search visibility of the hidden panels, and requires proper tab semantics with arrow-key navigation.
The cross-cutting rule is one idea per unit. If a feature row is carrying two ideas, it needs two rows or a sub-heading. Sections that try to compress three arguments into one paragraph are the reason visitors skim past the middle of long pages.
Testimonial components fail in two predictable ways: the quote is longer than the layout expects, and the attribution carries less weight than the quote. Solve the first by designing to your longest real quote, not your shortest, and by capping the visible length with an expandable control rather than an ellipsis that hides the payoff. Solve the second by giving the attribution its own block — name, role, organisation — with 16px above it and a clear typographic distinction from the quote itself.
Never fabricate attributions or invent star ratings to fill the layout. If real quotes are not available yet, build the section with a placeholder structure that is visibly unpublished, or ship the page without it. A testimonial section with unverifiable content is worse than none, both ethically and, once visitors notice, commercially.
Pricing: three columns on desktop, two on tablet with the recommended tier full width above them, single column on mobile with the recommended tier first. Comparison tables get a scrollable wrapper with overflow-x: auto and a visible edge cue — that is a legitimate use of overflow, unlike hiding it. Feature sections: alternating rows become a single stacked column below 768px with 40px between rows; icon grids drop from four columns to two, then to one below 400px. Testimonials: three-up becomes one column, quote type size reduces by one step, and the attribution keeps its 16px separation so the pairing never collapses.