OrgChart

Using this Component

1. 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" />
   		

2. 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>

3. Replace the sample HTML content with your content.