BlazorFluentUI V5.6.1.0
View BlazorFluentUI GitHub repo

Persona

Overview

A persona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status.

The persona control is used in the PeoplePicker and Facepile controls.

The complete control inclues an individual's avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and online status.

Usage

Persona in various sizes
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
Annie Lindqvist
Got no job
Found on the internet
Don't worry about this guy
<Stack Horizontal="false" Tokens="@(new StackTokens() { ChildrenGap = new [] {10d}})">
    <Checkbox DefaultChecked="true" Label="Include persona details" @bind-Checked=ShowDetails />

    <Label>Size 8 Persona, with no presence</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Size=@PersonaSize.Size8
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />
    <Label>Size 8 Persona, with presence</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Offline
             Size=@PersonaSize.Size8
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 24 Persona</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Online
             Size=@PersonaSize.Size24
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 32 Persona</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Online
             Size=@PersonaSize.Size32
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 40 Persona</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Away
             Size=@PersonaSize.Size40
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 48 Persona (default)</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Busy
             Size=@PersonaSize.Size48
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 56 Persona (default)</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Online
             Size=@PersonaSize.Size56
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 72 Persona</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.DND
             Size=@PersonaSize.Size72
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 100 Persona</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Blocked
             Size=@PersonaSize.Size100
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />

    <Label>Size 120 Persona</Label>
    <Persona Text="Annie Lindqvist"
             SecondaryText="Got no job"
             TertiaryText="Found on the internet"
             OptionalText="Don't worry about this guy"
             ImageUrl="personFace.jpg"
             Presence=@PersonaPresenceStatus.Away
             Size=@PersonaSize.Size120
             ShowInitialsUntilImageLoads="true"
             HidePersonaDetails="!ShowDetails" />
</Stack>
Persona with initials
Kat Larrson
Designer
In a meeting
Available at 4:00pm
Annie
Designer
In a meeting
Available at 4:00pm
Annie Lind
Designer
In a meeting
Available at 4:00pm
Annie Boyl Lind
Designer
In a meeting
Available at 4:00pm
David (The man) Goff
Designer
In a meeting
Available at 4:00pm
David Goff [The man]
Designer
In a meeting
Available at 4:00pm
Annie Boyl Carrie Lindqvist
Designer
In a meeting
Available at 4:00pm
+1 (111) 123-4567 X4567
Designer
In a meeting
Available at 4:00pm
+1 (555) 123-4567 X4567
Designer
In a meeting
Available at 4:00pm
宋智洋
Designer
In a meeting
Available at 4:00pm
남궁 성종
Designer
In a meeting
Available at 4:00pm
خسرو رحیمی
Designer
In a meeting
Available at 4:00pm
Maor Sharett
Designer
In a meeting
Maor Sharett
Designer
In a meeting
Maor Sharett
Designer
In a meeting
<Stack Horizontal="false" Tokens="@(new StackTokens() { ChildrenGap = new [] {10d}})">
    <Persona Text="Kat Larrson" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size24 />
    <Persona Text="Annie" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size24 />
    <Persona Text="Annie Lind" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size32 />
    <Persona Text="Annie Boyl Lind" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size32 />
    <Persona Text="David (The man) Goff" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size32 />
    <Persona Text="David Goff [The man]" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size32 />
    <Persona Text="Annie Boyl Carrie Lindqvist" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size40 />
    <Persona Text="+1 (111) 123-4567 X4567" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size40 />
    <Persona Text="+1 (555) 123-4567 X4567" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size48 AllowPhoneInitials=true />
    <Persona Text="宋智洋" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size48 />
    <Persona Text="남궁 성종" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size56 />
    <Persona Text="خسرو رحیمی" SecondaryText="Designer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size=@PersonaSize.Size56 />
    <Persona Text="Maor Sharett" ImageInitials="MS" SecondaryText="Designer" TertiaryText="In a meeting" InitialsColor=@PersonaInitialsColor.LightBlue Size=@PersonaSize.Size72 />
    <Persona Text="Maor Sharett" ImageInitials="MS" SecondaryText="Designer" TertiaryText="In a meeting" InitialsColor=@PersonaInitialsColor.Magenta Size=@PersonaSize.Size100 />
    <Persona Text="Maor Sharett" ImageInitials="MS" SecondaryText="Designer" TertiaryText="In a meeting" InitialsColor=@PersonaInitialsColor.Teal CoinSize=150 />
</Stack>
PersonaCoin colors
green10
darkGreen20
teal10
cyan30
lightBlue30
blue20
darkBlue10
violet10
purple10
magenta10
lightPink10
pink10
pinkRed10
red10
darkRed20
orange10
orange30
orangeYellow20
gray30
gray20
<Stack Horizontal="true" Wrap="true">
    <Persona InitialsColor=@PersonaInitialsColor.Green
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="green10"
             ImageAlt="Green circle with the letter G in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.DarkGreen
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="darkGreen20"
             ImageAlt="Dark green circle with the letter D in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Teal
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="teal10"
             ImageAlt="Teal circle with the letter T in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Cyan
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="cyan30"
             ImageAlt="Cyan circle with the letter C in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.LightBlue
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="lightBlue30"
             ImageAlt="Light blue circle with the letter L in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Blue
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="blue20"
             ImageAlt="Blue circle with the letter B in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.DarkBlue
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="darkBlue10"
             ImageAlt="Dark blue circle with the letter D in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Violet
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="violet10"
             ImageAlt="Violet circle with the letter V in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Purple
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="purple10"
             ImageAlt="Purple circle with the letter P in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Magenta
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="magenta10"
             ImageAlt="Magenta circle with the letter M in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.LightPink
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="lightPink10"
             ImageAlt="Light pink circle with the letter L in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Pink
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="pink10"
             ImageAlt="Pink circle with the letter P in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Burgundy
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="pinkRed10"
             ImageAlt="Pink red (burgundy) circle with the letter P in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.LightRed
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="red10"
             ImageAlt="Red circle with the letter R in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.DarkRed
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="darkRed20"
             ImageAlt="Dark red circle with the letter D in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Orange
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="orange10"
             ImageAlt="Orange circle with the letter O in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Rust
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="orange30"
             ImageAlt="Rusty orange circle with the letter O in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.Gold
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="orangeYellow20"
             ImageAlt="Orange yellow circle with the letter O in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.WarmGray
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="gray30"
             ImageAlt="Warm gray circle with the letter G in white text at the center" />
    <Persona InitialsColor=@PersonaInitialsColor.CoolGray
             Size=@PersonaSize.Size100
             Style="width:300px;margin: 5px"
             Text="gray20"
             ImageAlt="Cool gray circle with the letter G in white text at the center" />
</Stack>
Persona Presence
Annie Lindqvist, status is online.
Annie Lindqvist, status is online.
Annie Lindqvist, status is online.
Annie Lindqvist, status is online and out of office.
Annie Lindqvist, status is online and out of office.
Annie Lindqvist, status is online and out of office.
Annie Lindqvist, status is away.
Annie Lindqvist, status is away.
Annie Lindqvist, status is away.
Annie Lindqvist, status is away and out of office.
Annie Lindqvist, status is away and out of office.
Annie Lindqvist, status is away and out of office.
Annie Lindqvist, status is busy
Annie Lindqvist, status is busy
Annie Lindqvist, status is busy
Annie Lindqvist, status is busy and out of office
Annie Lindqvist, status is busy and out of office
Annie Lindqvist, status is busy and out of office
Annie Lindqvist, status is do not disturb
Annie Lindqvist, status is do not disturb
Annie Lindqvist, status is do not disturb
Annie Lindqvist, status is do not disturb and out of office
Annie Lindqvist, status is do not disturb and out of office
Annie Lindqvist, status is do not disturb and out of office
Annie Lindqvist, status is blocked
Annie Lindqvist, status is blocked
Annie Lindqvist, status is blocked
Annie Lindqvist, status is offline
Annie Lindqvist, status is offline
Annie Lindqvist, status is offline
Annie Lindqvist, status is offline and out of office
Annie Lindqvist, status is offline and out of office
Annie Lindqvist, status is offline and out of office
<Stack ClassName="persona-presence">
    <Stack Horizontal="true">
        <Stack>
            <Label>Online</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         ImageAlt="Annie Lindqvist, status is online." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         ImageAlt="Annie Lindqvist, status is online." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         ImageAlt="Annie Lindqvist, status is online." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         ImageAlt="Annie Lindqvist, status is online." />
            </Stack>
        </Stack>

        <Stack>
            <Label>Online + Out of Office</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is online and out of office." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is online and out of office." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is online and out of office." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Online
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is online and out of office." />
            </Stack>
        </Stack>
    </Stack>

    <Stack Horizontal="true">
        <Stack>
            <Label>Away</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         ImageAlt="Annie Lindqvist, status is away." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         ImageAlt="Annie Lindqvist, status is away." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         ImageAlt="Annie Lindqvist, status is away." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         ImageAlt="Annie Lindqvist, status is away." />
            </Stack>
        </Stack>

        <Stack>
            <Label>Away + Out of Office</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is away and out of office." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is away and out of office." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is away and out of office." />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Away
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is away and out of office." />
            </Stack>
        </Stack>
    </Stack>

    <Stack Horizontal="true">
        <Stack>
            <Label>Busy</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         ImageAlt="Annie Lindqvist, status is busy" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         ImageAlt="Annie Lindqvist, status is busy" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         ImageAlt="Annie Lindqvist, status is busy" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         ImageAlt="Annie Lindqvist, status is busy" />
            </Stack>
        </Stack>

        <Stack>
            <Label>Busy + Out of Office</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is busy and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is busy and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is busy and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Busy
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is busy and out of office" />
            </Stack>
        </Stack>
    </Stack>

    <Stack Horizontal="true">
        <Stack>
            <Label>Do not Disturb</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         ImageAlt="Annie Lindqvist, status is do not disturb" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         ImageAlt="Annie Lindqvist, status is do not disturb" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         ImageAlt="Annie Lindqvist, status is do not disturb" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         ImageAlt="Annie Lindqvist, status is do not disturb" />
            </Stack>
        </Stack>

        <Stack>
            <Label>Do not Disturb + Out of Office</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is do not disturb and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is do not disturb and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is do not disturb and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.DND
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is do not disturb and out of office" />
            </Stack>
        </Stack>
    </Stack>

    <Label>Blocked</Label>
    <Stack Horizontal="true">
        <Persona Text=""
 Size=@PersonaSize.Size8
 HidePersonaDetails="true"
 Presence=@PersonaPresenceStatus.Blocked
 ImageAlt="Annie Lindqvist, status is blocked" />
        <Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
 ImageInitials="AL"
 Text="Annie Lindqvist"
 SecondaryText="Software Engineer"
 TertiaryText="In a meeting"
 OptionalText="Available at 4:00pm"
 Size=@PersonaSize.Size24
 HidePersonaDetails="true"
 Presence=@PersonaPresenceStatus.Blocked
 ImageAlt="Annie Lindqvist, status is blocked" />
        <Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
 ImageInitials="AL"
 Text="Annie Lindqvist"
 SecondaryText="Software Engineer"
 TertiaryText="In a meeting"
 OptionalText="Available at 4:00pm"
 HidePersonaDetails="true"
 Presence=@PersonaPresenceStatus.Blocked
 ImageAlt="Annie Lindqvist, status is blocked" />
        <Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
 ImageInitials="AL"
 Text="Annie Lindqvist"
 SecondaryText="Software Engineer"
 TertiaryText="In a meeting"
 OptionalText="Available at 4:00pm"
 Size=@PersonaSize.Size72
 HidePersonaDetails="true"
 Presence=@PersonaPresenceStatus.Blocked
 ImageAlt="Annie Lindqvist, status is blocked" />
    </Stack>

    <Stack Horizontal="true">
        <Stack>
            <Label>Offline</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         ImageAlt="Annie Lindqvist, status is offline" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         ImageAlt="Annie Lindqvist, status is offline" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         ImageAlt="Annie Lindqvist, status is offline" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         ImageAlt="Annie Lindqvist, status is offline" />
            </Stack>
        </Stack>

        <Stack>
            <Label>Offline + Out of Office</Label>
            <Stack Horizontal="true">
<Persona Text=""
         Size=@PersonaSize.Size8
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is offline and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size24
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is offline and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is offline and out of office" />
<Persona ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         ImageInitials="AL"
         Text="Annie Lindqvist"
         SecondaryText="Software Engineer"
         TertiaryText="In a meeting"
         OptionalText="Available at 4:00pm"
         Size=@PersonaSize.Size72
         HidePersonaDetails="true"
         Presence=@PersonaPresenceStatus.Offline
         IsOutOfOffice="true"
         ImageAlt="Annie Lindqvist, status is offline and out of office" />
            </Stack>
        </Stack>
    </Stack>
</Stack>