Person provides a way of presenting information about an individual.
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.
There are three key variations of person — name only, with details and with action buttons.
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 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.
DO: Only use one primary styled button when several buttons are adjacent to each other in the same container.