Persona

Represents a person, complete with a profile image and additional details. Where a profile image is not available, the user's initials can be shown instead.

Variants

Circle (default)

Six sizes are available: tiny, extraSmall, small, default, large, and extraLarge

Alton Lafferty
Alton Lafferty
Alton Lafferty
Accountant
Alton Lafferty
Accountant
Alton Lafferty
Accountant
In a meeting
Alton Lafferty
Accountant
In a meeting
Available at 4:00pm

Square

For every size, you can apply the .ms-Persona--square class to change it to a square.

Alton Lafferty
Alton Lafferty
Alton Lafferty
Accountant
Alton Lafferty
Accountant
Alton Lafferty
Accountant
In a meeting
Alton Lafferty
Accountant
In a meeting
Available at 4:00pm

Initials

Don't have a profile image for the user? Provide the person's initials as an alternative.

AL
Alton Lafferty

Presence indicators

A persona can have one of seven presences: available, away, blocked, busy, do not disturb, and offline.

Alton Lafferty
Accountant
Alton Lafferty
Accountant
Alton Lafferty
Accountant
Alton Lafferty
Accountant
Alton Lafferty
Accountant
Alton Lafferty
Accountant

Token

Gerrad Matteu
Gerrad Matteu
Gerrad Matteu

FacePile

AL
AL
Alton Lafferty
Accountant
In a meeting
Available at 4:00pm
  • View profile
Details
Personal: 555.206.2443
Work: 555.929.8240
Manager
Staff
AL
AL
Alton Lafferty
Accountant
In a meeting
Available at 4:00pm
  • View profile
Details
Personal: 555.206.2443
Work: 555.929.8240
Manager
Staff
AL
AL
Alton Lafferty
Accountant
In a meeting
Available at 4:00pm
  • View profile
Details
Personal: 555.206.2443
Work: 555.929.8240
Manager
Staff

Using this component

  1. Confirm that you have references to Fabric's CSS on your page:
     <head>
         <link rel="stylesheet" href="fabric.min.css">
         <link rel="stylesheet" href="fabric.components.min.css">
     </head>
    
  2. Copy the HTML from one of the samples above into your page.
  3. Replace the sample HTML content (such as the name within .ms-Persona-primaryText) with your content.

Dependencies

This component has no dependencies.