Pricing 74 block design & features
Built with shadcn/ui, this pricing block uses a floating pill badge to highlight the recommended plan. The badge is absolutely positioned at the top center of the second card, translated upward so it sits half inside and half outside the card border. A primary-colored background with contrasting foreground text makes the “Popular” label immediately visible without competing with the card content below it.
A Switch control paired with a “Billed annually” label lets visitors toggle between monthly and yearly pricing. The layout uses a two-column grid with generous top margin so the floating pill has room to breathe above the card edge. Each card displays the plan name, large price, description, a feature checklist with Check icons, and a full-width button.
The recommended card picks up a thicker primary border to reinforce the pill badge, while the standard card uses a single-weight border and an outline button. This combination of border weight, badge, and button variant creates a clear visual hierarchy across only two options, adapting the popular pill pattern from three-plan layouts into a simpler two-plan format.