Profile Header

About this block

Profile Header is the top band of a user profile page, avatar, name, Member badge, and role line (Senior Product Designer, Design Systems team), a two-sentence bio, then three inline chips: Joined Mar 2024, UTC+1, and 3 teams, each with a matching icon. Message and Edit profile sit flush right, both size sm.

Chips are one short array so adding a location or language takes a line. The role and bio are plain strings so they read at a glance without scanning a grid.

When to use

Reach for this block at the top of any team member profile page, directly below the navigation shell. Wire the Edit profile button to the current user check so visitors see it only on their own profile.

A natural flow around it on an Application Pro page:

Before

• App shell

After

• Activity summary card
• Data table

What you can display

One strong use is the internal workspace profile. Other header shapes:

• External contributor. Drop the Edit button, surface open-source repo count and language chips.
• Customer contact. Swap the bio for company and account tier, pair with a billing link.
• Reviewer header. Role becomes department, chips show review count and avg turnaround.

Tip: the chip array is the right place for facts that would clutter the bio but are worth showing at a glance.