Pricing 40 block design & features
Pricing40 is an accordion-based service package section built with Shadcn UI. A bold heading sits at the top, followed by a vertical stack of accordion items separated by muted bottom borders. Each accordion trigger shows the package title on the left and the price or contact label on the right, with a chevron icon that rotates on open. When expanded, the accordion content reveals a three-column grid of detail sections, each with a heading and a bulleted list of items rendered in muted foreground text.
Accordion triggers use semibold titles at a comfortable reading size, with prices displayed in muted foreground at a slightly smaller weight. The expanded content sections carry headings like "What I do," "What you get," and "Ideal for," each followed by bullet-pointed lists. The accordion supports multiple open items simultaneously through the "multiple" type setting.
The approach favors vertical scanning over side-by-side card comparison, keeping the section compact when collapsed and revealing depth on demand. Complexity is moderate because each package object includes a title, price string, and an array of content sections each containing a heading and item list.
On smaller screens the three-column detail grid within each expanded accordion collapses to a single column, stacking the content sections vertically.