Feature 133 - Asymmetric bento with tall visual column

Pro

A wide feature layout with a primary card that pairs copy with a square image, plus two stacked cards for secondary points, using icons and bordered surfaces.

Shadcn Feature 133 block

Component data

ID
feature133
Access
pro
Created
Oct 17, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Feature 133 block design & features

Feature133 is a marketing stripe built with Shadcn UI layout pieces and simple line icons. A page-width heading leads into a two-column split on medium screens and up: one tall card carries a feature title, supporting paragraph, and a square image that anchors the column; the other column stacks two shorter bordered cards, each with its own icon, headline, and body text.

Surfaces are light card backgrounds with hairline borders and a soft shadow on the large panel. Corner radii are consistent and rounded. Icons sit above the smaller headings as simple line glyphs. The tall card’s photo sits inside a framed, bordered preview with a heavier shadow so it reads as the visual hero of the cluster.

Overall the layout feels modern and product-marketing oriented, with clear bento-style asymmetry rather than a uniform grid. The mix of one image-forward panel and two text-first panels adds moderate complexity without many moving parts. Most of the polish comes from spacing, borders, and the single strong photograph slot.

At narrow widths the stack orders naturally: the hero card content and image still read as one unit, with the two smaller cards following beneath.