Feature 109 - Split copy with framed photo overlay

Pro

Two-column layout with outline badge, large heading, muted paragraph, and primary button opposite a rounded photo that carries a gradient wash, avatar chip, headline, and chevron text link on top.

Shadcn Feature 109 block

Component Data

  • ID:feature109
  • Access:pro
  • Created:Sep 9, 2024
  • Type:block

Feature 109 block design & features

Feature109 is a two-column feature band built with shadcn/ui that contrasts typography on the left with a tall photographic frame on the right. The text column stacks an outline badge, a display-sized heading, a muted long-form paragraph, and a large primary button trailing a menu icon. The media column uses a rounded rectangle photo spanning tall aspect ratios on wide layouts with a linear gradient overlay rising from primary tone to transparent across the image.

Along the top-right of the photo sits a frosted pill housing a small circular avatar and supporting label text; the bottom holds another heading and a text link with chevron in light-on-gradient treatment. Depth comes from the layered overlay rather than drop shadows on the section shell.

The aesthetic leans editorial spotlight: half essay, half cinematic still with UI chrome baked into the picture. It is moderately complex because you coordinate hero photography, overlay copy, and left-column messaging together.

Layout centers both halves within the grid gap before stacking on narrow breakpoints so the button and image remain full width.