Pricing 99 block design & features
Pricing99 is a four-tier pricing section built with shadcn/ui that separates plan cards from their feature lists into two distinct visual zones. A centered heading, optional description, and a scaled-up billing toggle sit at the top. Below, four bordered cards each show the plan name, large price figure, contextual description that updates with the billing mode, and a full-width CTA link button. The highlighted plan receives a primary-colored border and solid button variant.
Underneath the card row, a separate four-column grid presents each plan’s features as a checklist with dashed separators between items. Each feature row pairs a small primary-tinted check icon with muted descriptive text. This detached layout lets the price comparison zone stay compact while the feature details expand independently without stretching the cards.
The overall style is restrained and close to a shadcn default aesthetic. Rounded corners on the cards, light borders, and generous vertical spacing between the two zones keep the section airy. No decorative gradients or shadows beyond the card outlines. The two-zone separation is the distinctive structural choice, making this a clean adaptation of the classic three-plan detached layout extended to four columns.
On smaller viewports the cards stack into a single column with a two-column step at medium breakpoints. The feature grid is hidden below the large breakpoint to avoid a cramped four-column comparison on narrow screens.