Feature 93 - Avatar group with three-column icon features

Pro

Staggered avatar cluster and bold heading centered above a three-column grid of icon features with titles and descriptions.

Shadcn Feature 93 block

Component data

ID
feature93
Access
pro
Created
Oct 9, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Feature 93 block design & features

Feature93 is a centered feature section built with Shadcn UI. Three bordered avatar circles are arranged horizontally with the center avatar rendered larger than its neighbors, creating a staggered cluster aligned at the bottom edge. Below the avatars a large bold heading introduces the topic, followed by a three-column grid where each column contains a large Lucide icon, a medium heading, and a muted paragraph.

The avatars use the shadcn Avatar component with bordered circular frames. Icon sizes are set to 48 pixels with a thin stroke weight, keeping them lightweight at large scale. Headings within each column use a consistent medium weight at a uniform size, and descriptive text stays in the muted foreground color. Generous vertical spacing between the avatar group, heading, and feature grid provides visual breathing room.

The aesthetic is people-focused and open, using the portrait cluster to humanize the section before transitioning into structured feature columns. The centered alignment throughout gives a symmetrical, presentation-style feel. Complexity is low since you supply three avatar images and three feature objects with icons.

On smaller screens the three columns collapse to a single centered column, preserving the text-center alignment throughout.