Pricing 88 block design & features
Pricing88 is a four-tier pricing strip built with Shadcn UI buttons and a toggle group. Rather than individual cards, all four tiers share one continuous bordered container divided by vertical hairlines on desktop. The top section left-aligns the heading, optional description, and a square-cornered billing toggle with two equal segments for Monthly and Yearly.
Each column opens with a small icon beside the plan name, followed by a dominant price figure with a short cadence suffix. A “Features Included” subheading introduces a checklist with muted text. The highlighted tier uses a primary-colored button while standard tiers get a secondary variant, providing clear visual hierarchy at the base of each column.
The shared outer border and vertical dividers give this a newspaper-style rate table feel rather than a typical marketing card row. Moderate complexity, with the editorial strip layout being the main distinguishing element. Typography is headline-forward with restrained body text.
Below large breakpoints the four columns stack vertically with horizontal dividers replacing the side-by-side hairlines, preserving the internal section order within each plan.