Description of the Pricing 44 block design & features
A centered heading sits above a Shadcn UI ToggleGroup switching between monthly and yearly billing. On large screens, three plan cards span the full container width in a three-column grid without an inner max-width cap. Each card displays plan name, large price, period note, description, full-width CTA button, a labeled feature separator, and a bulleted feature list with badge-check icons. The highlighted plan uses a light muted background wash rather than a heavier border. Below the large-screen breakpoint, a carousel presents plans one at a time with edge masking and centered navigation controls.
All cards share a uniform one-pixel theme border with no thick outlines or shadow variations. The highlighted tier reads as recommended through the subtle background fill. The toggle group uses pill-shaped items inside a muted background bar. Feature separators have a small “FEATURES” label centered between two horizontal lines. Prices are large and tight-tracked while feature text stays small and muted.
This is a wider variation of pricing34 that uses more horizontal space. The uniform card treatment gives it a flatter, more even appearance since no single card frame dominates visually. The feel is clean and structured without strong emphasis tricks. Moderate complexity: billing-cycle state and carousel management.
On mobile the carousel starts centered on the highlighted plan index so the recommended tier appears first. Navigation arrows sit below the carousel track.