Pricing Blocks

A pricing section with three tiers and a highlighted plan.

A two-tier pricing layout with a side-by-side split panel: a filled Pro tier on the left and a plain Starter tier on the right, each showing a price, feature checklist, and CTA. No three-column grid, no top heading section.

A single-plan spotlight card centered on the page, featuring a large price display, a full feature checklist, a primary CTA, and a social-proof footnote, designed for one-tier products.

Three-tier pricing section with a monthly/annual segmented toggle and a highlighted most-popular plan

A static feature-comparison matrix: plans as columns with grouped feature rows, check and dash cells, a highlighted recommended column, and a CTA row.

Pro three-tier pricing grid: a hairline-framed layout with corner crosshairs, an animated ToggleGroup billing switch whose pill slides between Monthly and Annual, prices that count up on load and re-roll on switch, and a featured plan lit with corner brackets and a faint corner net. Blur-rise entrance, theme-aware, reduced-motion static.

Pro usage-based pricing configurator: a seat slider drives a live summary where the total springs to its new value, the per-seat rate drops across volume thresholds, and the recommended plan chip slides between tiers; annual/monthly ToggleGroup applies the discount with a running yearly-savings line. Blur-rise entrance, theme-aware, reduced-motion static.

Pro plan comparison matrix: a sticky plan header with count-up prices sits above collapsible feature groups (Accordion), rows reveal on scroll, hovering a plan highlights its whole column, and the featured tier stays emphasized; a monthly/annual ToggleGroup drives the header prices and a real-logo trust strip sits below. Blur-rise entrance, theme-aware, reduced-motion static.

Pro split-layout pricing: a left stack of wide cumulative tier cards ('Everything in the previous plan, plus') with prices top-right, beside a sticky right column holding the heading, a monthly/annual ToggleGroup that counts the prices up, and an Enterprise contact box. Featured plan lit with corner brackets and a faint corner net; blur-rise entrance, theme-aware, reduced-motion static.

Pro single-plan spotlight: one centered card with a soft shadow, corner brackets, and a top-right dot grid, showing a large count-up price, a monthly/annual ToggleGroup, a two-column feature grid that reveals on scroll, and an auto-rotating reassurance line under the CTA. Theme-aware, reduced-motion static.

Pro split-layout pricing: a sticky left column with the heading, a payment reassurance badge, and a checklist sits beside a right-hand stack of horizontal plan rows whose prices count up on scroll. Featured plan emphasized; blur-rise entrance, theme-aware, reduced-motion static.

Pro build-your-plan configurator: a base plan plus toggleable add-ons (Switch) that animate into a live itemized order summary as a running total springs to its new value. A monthly/annual ToggleGroup applies a discount to the whole bill. Blur-rise entrance, theme-aware, reduced-motion static.