Feature 194 - Icon feature cards with learn-more buttons

Pro

A centered mono label, heading, and supporting line introduce a grid of up to four shadcn Cards showing an icon, short description, and full-width outline learn-more link with chevron affordance.

Shadcn Feature 194 block

Component data

ID
feature194
Access
pro
Created
Jan 23, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Feature 194 block design & features

This section is built with shadcn/ui Card and Button. The header typographic stack is centered: eyebrow in monospace tracking, large semibold title, then a medium-weight muted subline to frame the grid.

Cards arrange in two columns on small screens and four on large ones with tight gaps so the set reads as a uniform ribbon. Inside each card, an icon sits above a single descriptive sentence in foreground color; the footer pins a full-width outline button linking to a URL with "Learn more" copy and a chevron that nudges on hover.

The visual language is clean and modular: bordered buttons, even card padding, and icon-first scanning. There is little ornament beyond spacing and type scale, so icons and microcopy carry personality.

Complexity is low to moderate: you cap at four visible features in code, so curate the strongest quartet and supply icon components, blurbs, and href values per card.