Profile Header

Intro

The profile header gives a quick intro of a person to the user. It also includes methods to contact that person quickly without needing to access a different area of the profile page.

Profile header on mobile (left) and on tablet (right)

Usage

Use the profile header on a user profile or an object detail page.

Don't

Do not include lengthy information. It should be a short summary for that person.

Anatomy

The profile header can accommodate different types of content depending on what information is provided. The types of content are one image, name, title, description, and action buttons (one to five). The name is required, but all other content types are optional, although it’s strongly recommended to include them to provide more information.

A. App Bar
Since the profile header will appear on what is considered a detail page, the app bar should have a navigation icon to either take the user back to the previous screen or if this profile behaves more like a full-screen dialog, then use a close icon. After the navigation icon, the profile title can describe the general page that encompasses all profiles of a similar kind, like an internal employee, a client, a member, a particular team, and so on. At the end, if there are extra functions such as downloading contact information or sharing, then it can live in a menu that is accessed by the menu icon. For more information about menus, see the menu guidelines.

B. Image (optional)
It’s recommended to use an image so that the user can quickly identify and see the person the profile is about. Images of people should always be in a circle.

C. Name
The name must include the first and last name of the person.

D. Subheading (optional)
The subheading is optional and can be secondary information about the person, like their job title or location.

E. Description (optional)
The description may include three-lines of text. If it requires more than three lines of text, please consider moving it to the top of the content area below the profile header.

F. Action Buttons (optional)
There can be one to five action items in the profile header. If there is only one action button, there is the option to put it in the top app bar. However, due to space limitations, it’s recommended that the action items use an icon button rather than text button. If it must be a text button, then it is recommended to have only up to 2 text buttons. Due to these limitations, only use frequently used actions in the context of the current screen.

These actions are buttons so it must follow the same behaviors and interactions as buttons, which means that they must have different states. For more details on how buttons are designed and how they behave, take a look at the button guidelines.

If a certain action is not available, the action should use the disabled state, which is set to 50% opacity.

Profile header anatomy

Behavior and Interaction

Scrolling

Due to the nature of the prominent app bar, if the user scrolls down the screen, the profile header gets condensed to the app bar in which it only shows the navigation icon, object title, and any other button in the app bar. If the user scrolls back up, then the full object header slides out again. This behavior occurs on all devices.