Pricing 21 block design & features
Pricing21 is a three-plan comparison section built with Shadcn UI, wrapped in decorative top and bottom border strips with inner container side borders. A badge, heading, and subheading introduce the section, followed by a centered monthly/yearly toggle built from two buttons inside a bordered pill. Below the toggle, a plan header row spans four columns with an empty first column and three plan cells showing icons, names, prices in oversized tracked numerals with period suffixes, alternative billing notes, and CTA buttons.
Beneath the plan headers, feature rows are organized into named category sections separated by top borders. Each feature row uses a four-column grid with the feature name in the first column and three centered value cells that display either a check icon for boolean features or bold text for string values. Category headings sit in full-width rows between feature groups.
The visual style uses a newspaper-like grid with border accents and generous spacing, giving it a structured editorial feel. Complexity is moderate because you define plan objects with dual prices and a separate feature matrix with named categories and per-plan values. A bottom decorative border strip with inner container borders closes the section.
On smaller screens the plan header columns stack vertically with dividers between them, and each feature row switches to a two-row layout with the feature name above a three-column value row.