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)
AL
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.
AL
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
- 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>
- Copy the HTML from one of the samples above into your page.
- Replace the sample HTML content (such as the name within
.ms-Persona-primaryText
) with your content.
Dependencies
This component has no dependencies.