← Back to Components

Profile Header

User profile header component with avatar, name, role, and optional action button

Basic Usage

Default profile header with user information and optional action button

Profile Header without Button

Avatar for Cameron Williamson
Cameron WilliamsonUX Lead in Roche

Profile Header with Action Button

Avatar for Cameron Williamson
Cameron WilliamsonUX Lead in Roche

Responsive Viewports

Profile header adapts to different viewport sizes with horizontal and vertical layouts

XXL-L Viewport (Default)

Horizontal layout with standard button sizing

SJ
Sarah JohnsonSenior Product Designer

M Viewport

Horizontal layout with medium button sizing

SJ
Sarah JohnsonSenior Product Designer

S Viewport (Mobile)

Vertical stacked layout optimized for mobile

SJ
Sarah JohnsonSenior Product Designer

Avatar Variants

Profile header supports both profile images and initials fallbacks

With Profile Image

Avatar for Cameron Williamson
Cameron WilliamsonUX Lead in Roche

With Initials Only

AT
Alex ThompsonFrontend Developer

Real-World Examples

Common use cases and practical implementations

User Profile Page Header

Avatar for Cameron Williamson
Cameron WilliamsonUX Lead in Roche

Team Directory Listing

SJ
Sarah JohnsonSenior Product Designer

Contact Card

AT
Alex ThompsonFrontend Developer

Edge Cases

Handling long names, titles, and edge cases gracefully

Long Name and Title

EMR
Dr. Elizabeth Montgomery-RichardsonPrincipal Research Scientist in Computational Biology

Mobile Layout with Long Content

EMR
Dr. Elizabeth Montgomery-RichardsonPrincipal Research Scientist in Computational Biology

Interactive Demo

Test the component interaction and state management

Click Counter Example

ID
Interactive Demo UserTest Subject