Pricing Section With Nested Feature Lists
ProFour serif plan cards with a gliding monthly or annual toggle, three highlight rows, and a nested extras list under each card.
When to use Pricing Section With Nested Feature Lists
Use this when the plan is a ladder and the extras are the real decision. The card only holds the name, the price, three highlights, and the action. The longer list sits under the card in the same column, so the visitor can scan the seat first and then read what stacks on. Annual glides on a pill and knocks twenty percent off the monthly figure. Estate stays custom and keeps the accent action.
Skip it when every plan shares one matrix, or when price is metered. A nested list that repeats the same three lines is wasted height. The shipped copy is a fictional interview archive called Quarry, so replace the names, the rates, the highlight icons, and the extras before this goes to production. The section follows light and dark. The cream surface becomes a warm black, and the orange contact button stays the same.
Block details
- Category
- Pricing Sections
- Renders
- JavaScript animation. Paints first, then animates
- Theme
- Follows the site theme in light and dark
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxframer-motiontailwind-merge- Source
- 441 lines, 15 KB in one file
- Install
wensity add pricing-section-with-nested-feature-lists --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, serif, tiers, saas
- Last updated

