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.

Vue
Shadcn Feature 93 block

Component Data

  • ID:feature93
  • Access:pro
  • Created:Oct 9, 2024
  • Type:block

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.