Feature 193 - Asymmetric bento cards with mixed layouts

Pro

A mono eyebrow heads a five-column-aware grid of shadcn Cards where titles, multi-paragraph descriptions, and images appear in different arrangements, with large blurred gradient orbs and a faint plus pattern behind the section.

Shadcn Feature 193 block

Component Data

  • ID:feature193
  • Access:pro
  • Created:Jan 23, 2025
  • Type:block

Feature 193 block design & features

Feature193 is a Shadcn UI Card mosaic meant to break a long story into uneven tiles. A small uppercase label precedes the grid. Each card spans different column counts at the medium breakpoint so some tiles read as wide narrative bands while others stay narrow. Titles can include line breaks; descriptions are arrays rendered as separate muted paragraphs.

Images either load above the text inside the header stack or sit in the content region with custom aspect helpers, so some tiles feel like hero cards and others like text-first callouts. Shadows on the cards lift them from the page while remaining soft.

The backdrop adds depth: several huge blurred gradient circles drift behind the content and a subtle tiled cross pattern fades near the top. Overall the mood is premium and editorial, closer to a structured landing narrative than a uniform three-up grid.

This is a more elaborate block: you must plan each tile’s copy length, image crop, and span to avoid awkward gaps. The sample content references VAR transfers; replacing that narrative is expected for reuse.