Feature 138 - Three alternating split rows with learn links

Pro

A section framed by a title and subtitle, then three muted rounded rows that each pair a half-width image with copy, a thin divider, supporting text, and a text link with trailing arrow.

Shadcn Feature 138 block

Component data

ID
feature138
Access
pro
Created
Nov 15, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Feature 138 block design & features

Feature138 builds a storytelling column with shadcn/ui layout and spacing. A bold heading and slightly softer introductory line sit above three repeating panels. Each panel is a full-width rounded muted container; inside, medium and larger breakpoints use a two-column split where photography occupies half the width and the other half stacks a subheading, a single horizontal rule, body copy, and a “Learn more” style text link with a small arrow icon.

Panels alternate whether the image leads on the left or the right on desktop, which keeps the vertical rhythm from feeling repetitive. Images are wide crops with a fixed maximum height, so the section leans on photography and short essays while a single hairline rule provides the only divider between subheading, body, and link.

The mood is calm and trustworthy, closer to an About or capabilities narrative than a loud promo. Complexity is moderate: three parallel stories with mirrored layout logic. Distinctiveness hinges on the alternating split and the minimalist separators rather than heavy cards or badges.

Mobile stacks each row image-first or text-first according to source order, with padding tightening so paragraphs stay readable inside the muted shells.