Pricing 87 block design & features
Pricing87 is a four-tier pricing section built with shadcn/ui cards, carousel, separators, and a switch. A centered headline introduces Monthly and Yearly labels flanking a scaled toggle switch. On desktop, four card columns sit side by side. On smaller viewports, the cards become a horizontally swipeable carousel with arrow controls, starting from the highlighted plan.
Each card contains the plan name, a large price, cadence text, a short billing-aware description, a full-width CTA, a “FEATURES” ribbon with horizontal rules, and a checklist. The highlighted tier uses a soft muted background fill rather than just a thick border, giving it a subtler emphasis. Shadows are removed from all cards so the layout reads flat and editorial.
Restrained and functional with a quiet editorial tone. The muted fill highlight is a softer alternative to bold border treatments, and the flat card surfaces keep the grid feeling uniform. Moderate complexity from the billing switch state and the dual carousel-to-grid layout.
Desktop displays all four plans at once; below large breakpoints users swipe between individual plans with previous and next arrows.