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

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.