Pricing 96 block design & features
Pricing96 is a four-tier pricing section built with Shadcn UI, set against a muted tinted background. A centered headline and optional description sit above a segmented billing toggle with Monthly and Yearly options. Four plan cards arranged in a single row each display the plan name, a large dollar figure with period text, a full-width CTA link, a “No credit card required” note, and a checklist of included features separated by horizontal rules.
The tinted section background gives the cards a lifted, layered feel against the page. Each card uses a white surface with rounded corners, a thin border, and soft shadow. The highlighted plan carries an inline badge with a lightning bolt icon next to the plan name, providing a strong visual anchor. Emerald-green check circles mark each feature row, adding a confident accent to the otherwise neutral palette.
This block sits between minimal and moderate complexity. The tinted background plus badge energy gives it more personality than a plain white-on-white pricing grid, but the layout remains straightforward with no carousel or animation. The four-column arrangement on desktop makes it well suited for products that offer a wider tier spread from free through enterprise.
On smaller viewports the four columns stack vertically, keeping each card full-width for easy scanning on phones and tablets.