Profile Header
Profile header band with avatar, name, role, bio, fact chips, and Message and Edit profile actions.
Profile header band with avatar, name, role, bio, fact chips, and Message and Edit profile actions.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the internal workspace profile. Other header shapes:
Tip: the chip array is the right place for facts that would clutter the bio but are worth showing at a glance.