Shadcn UI User Profile Block
UserProfile5 is a team member card optimized for grid layouts on about or team pages. A gradient header banner in purple tones displays the department name. The avatar overlaps the header and card body boundary using negative margin. Below the avatar sits the name and role centered, followed by email and call action buttons.
The card uses a fixed max-width suitable for 3 or 4 column grids. The gradient header adds visual interest without requiring a custom image. The avatar has a thick card-colored border and shadow to lift it from the background. Action buttons use outline variant and split the width evenly.
This pattern works well for company team pages, organization directories, or any context where multiple team members need to be displayed in a grid. The compact height keeps the grid visually balanced while still providing quick contact actions.
On mobile the card maintains its proportions and can stack in a single column. The touch targets for email and call buttons remain accessible.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |