Pricing 12 block design & features
Pricing12 is an add-on pricing section wrapped in a single bordered, rounded container. It opens with a heading, a paragraph description, and an optional image on the right, followed by two distinct zones. The upper zone displays featured add-ons as a row of accent-background cards, each containing a title, description, and monthly price. Below a horizontal border divider, the lower zone lists additional add-ons in a vertically divided stack, each row pairing an image and description on the left with a large price and optional footnote on the right.
Featured cards use the accent surface color to stand out from the main container background. Prices in the upper zone render at a moderate size with a smaller period label, while the lower list uses progressively larger price numerals. An optional price footnote appears in small muted text below the amount for items that need qualification.
The two-zone approach creates a clear hierarchy between primary and secondary add-ons within one Shadcn UI container. Complexity is moderate because you define two arrays of add-on objects with titles, descriptions, prices, and optional images and footnotes.
On smaller screens the featured cards stack vertically, and the lower list items shift from a side-by-side row to a stacked column layout with the price below the description.