Cards

Website / Cards

ProfileCard

Introduces a person or team member.

Live example

Avery Stone

Avery Stone

Design systems lead

Interactive preview using local sample data. Styling is intentionally left to the consuming project.

Usage

// ProfileCard usage will be documented here.

Adopt to your project

This Website → Cards → ProfileCard component provides a neutral structural starting point. Adapt local visual presentation through documented props and className without changing its semantic purpose.

Accessibility

Use an empty alt only when the person’s name is already adjacent.

API reference

API focus
Image, image alt, name, role, profile destination.

The preview uses safe local sample data. Check the exported TypeScript types before adapting it to project data.

Installation

Full library
pnpm install:project /absolute/path/to/your-project

Planned guided selection
Website → Cards → ProfileCard