Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UIĀ Fabric React as your front-end framework.
Overview
Displays multiple Persona components in groups with headers in order to show the hierarchy of an organization or team.
Using this Component
-
Confirm that you have references to Fabric's CSS on your page:
<link rel="stylesheet" href="fabric.min.css" /> <link rel="stylesheet" href="fabric.components.min.css" />
-
Copy the HTML from one of the samples below into your page. For example:
<div class="ms-OrgChart"> <div class="ms-OrgChart-group"> <ul class="ms-OrgChart-list"> <li class="ms-OrgChart-listItem"> <button class="ms-OrgChart-listItemBtn" tabindex="1"> <div class="ms-Persona"> <div class="ms-Persona-imageArea"> <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div> <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png"> </div> <div class="ms-Persona-presence"> </div> <div class="ms-Persona-details"> <div class="ms-Persona-primaryText">Russel Miller</div> <div class="ms-Persona-secondaryText">Sales</div> </div> </div> </button> </li> <li class="ms-OrgChart-listItem"> <button class="ms-OrgChart-listItemBtn" tabindex="1"> <div class="ms-Persona"> <div class="ms-Persona-imageArea"> <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div> <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png"> </div> <div class="ms-Persona-presence"> </div> <div class="ms-Persona-details"> <div class="ms-Persona-primaryText">Douglas Fielder</div> <div class="ms-Persona-secondaryText">Public Relations</div> </div> </div> </button> </li> </ul> </div> <div class="ms-OrgChart-group"> <div class="ms-OrgChart-groupTitle">Manager</div> <ul class="ms-OrgChart-list"> <li class="ms-OrgChart-listItem"> <button class="ms-OrgChart-listItemBtn" tabindex="1"> <div class="ms-Persona"> <div class="ms-Persona-imageArea"> <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div> <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png"> </div> <div class="ms-Persona-presence"> </div> <div class="ms-Persona-details"> <div class="ms-Persona-primaryText">Grant Steel</div> <div class="ms-Persona-secondaryText">Sales</div> </div> </div> </button> </li> </ul> </div> <div class="ms-OrgChart-group"> <div class="ms-OrgChart-groupTitle">Staff</div> <ul class="ms-OrgChart-list"> <li class="ms-OrgChart-listItem"> <button class="ms-OrgChart-listItemBtn" tabindex="1"> <div class="ms-Persona"> <div class="ms-Persona-imageArea"> <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div> <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png"> </div> <div class="ms-Persona-presence"> </div> <div class="ms-Persona-details"> <div class="ms-Persona-primaryText">Harvey Wallin</div> <div class="ms-Persona-secondaryText">Public Relations</div> </div> </div> </button> </li> </ul> </div> </div>
-
Replace the sample HTML content with your content.
Variants
Default OrgChart
<div class="ms-OrgChart">
<div class="ms-OrgChart-group">
<ul class="ms-OrgChart-list">
<li class="ms-OrgChart-listItem">
<button class="ms-OrgChart-listItemBtn" tabindex="1">
<div class="ms-Persona">
<div class="ms-Persona-imageArea">
<div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
<img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
</div>
<div class="ms-Persona-presence">
</div>
<div class="ms-Persona-details">
<div class="ms-Persona-primaryText">Russel Miller</div>
<div class="ms-Persona-secondaryText">Sales</div>
</div>
</div>
</button>
</li>
<li class="ms-OrgChart-listItem">
<button class="ms-OrgChart-listItemBtn" tabindex="1">
<div class="ms-Persona">
<div class="ms-Persona-imageArea">
<div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
<img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
</div>
<div class="ms-Persona-presence">
</div>
<div class="ms-Persona-details">
<div class="ms-Persona-primaryText">Douglas Fielder</div>
<div class="ms-Persona-secondaryText">Public Relations</div>
</div>
</div>
</button>
</li>
</ul>
</div>
<div class="ms-OrgChart-group">
<div class="ms-OrgChart-groupTitle">Manager</div>
<ul class="ms-OrgChart-list">
<li class="ms-OrgChart-listItem">
<button class="ms-OrgChart-listItemBtn" tabindex="1">
<div class="ms-Persona">
<div class="ms-Persona-imageArea">
<div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
<img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
</div>
<div class="ms-Persona-presence">
</div>
<div class="ms-Persona-details">
<div class="ms-Persona-primaryText">Grant Steel</div>
<div class="ms-Persona-secondaryText">Sales</div>
</div>
</div>
</button>
</li>
</ul>
</div>
<div class="ms-OrgChart-group">
<div class="ms-OrgChart-groupTitle">Staff</div>
<ul class="ms-OrgChart-list">
<li class="ms-OrgChart-listItem">
<button class="ms-OrgChart-listItemBtn" tabindex="1">
<div class="ms-Persona">
<div class="ms-Persona-imageArea">
<div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
<img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
</div>
<div class="ms-Persona-presence">
</div>
<div class="ms-Persona-details">
<div class="ms-Persona-primaryText">Harvey Wallin</div>
<div class="ms-Persona-secondaryText">Public Relations</div>
</div>
</div>
</button>
</li>
</ul>
</div>
</div>
Manager
Staff