COMPONENTS

Person

Person provides a way of presenting information about an individual.

Person

Person offers the ability to show a variety information about a person in a compact visual presenation. It can include an avatar, name, position, location and action buttons for contact details.

Person
  1. Avatar
  2. Name
  3. Details
  4. Action buttons
  5. Separator

There are three key variations of person — name only, with details and with action buttons.

Person

Person includes the Avatar component and can take on any of the properties and behaviors of that component including image and icon types shown as well as status.

Person

Person is available in four sizes — large, medium, small, and extra small. The size property also controls the amount of information that is shown. Small has only one line available for contact details and extra small does not allow contact details. Action buttons for email, phone and chat are available at all sizes.

Person
Person guidance

DO: Only use one primary styled button when several buttons are adjacent to each other in the same container.