Utility - Profile Cards

Use these blocks wherever a person needs to be shown: a social profile, a team page, a comment thread or an address book. They take typed props with fictional people, such as user, members, profile, contact and followers, with portraits from Pravatar and Unsplash.

Nothing is sent anywhere. Follow buttons and tabs keep their state locally, so connect them to your own API.

Style One

User card with a gradient banner, an overlapping avatar, a verified badge, bio, follower stats and a follow button that updates the follower count.

Style Two

Team member cards with a department filter, portraits, short bios, social links and a button that copies the person's email address.

Style Three

Public profile header with a cover image, verified details, location, website and join date, follow and share actions, and tabs for posts, about and photos.

Style Four

Hover profile cards. Mentions in a comment open a mini profile on hover or keyboard focus, with a follow button and a live follower count.

Style Five

Contact card with phone, email, website and address rows, a copy button on each row, a copy all action and a download as a vCard file.

Style Six

Followers and following list with tabs and counts, a search field, mutual badges, follow and unfollow buttons and a load more button.