Pricing Section With Lifetime Highlight

Pro

Four access cards with live prices, an inverted Keep highlight, and a plus rule for stacked includes. Follows light and dark.

When to use Pricing Section With Lifetime Highlight

Reach for this when the catalog is sold as access, not as a seat ladder. Four cards sit on the page. Spark, Season, Keep, and Crew each show a live price. Keep inverts against the others, keeps a Most kept pill, and uses a glass action with a corner arrow. A plus rule then stacks Everything in Season, so the highlight is a superset, not a longer list.

Skip it when price is metered or when three named seats share one matrix. Four access cards with the same ten lines are a brochure. The shipped copy is a fictional field-tape room called Lantern, so replace the rates, the feature lines, and the chat link before this goes to production. The surface follows the page in light and dark. Keep is the inverted card in both.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
340 lines, 11 KB in one file
Install
wensity add pricing-section-with-lifetime-highlight --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, pricing, lifetime, access, saas
Last updated

More pricing sections