Persona

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

Profile image shape

Circle (default)

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

Square

Apply the .ms-Persona--square class to any persona to change it to a square.

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

Initials

Where no profile image is available, you can use the person's initials.

AL
Alton Lafferty
Accountant

Presence indicators

Available

AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant

Away

AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant

Blocked

AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant

Busy

AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant

Do not disturb

AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant

Offline

AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant

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.