Office UI Fabric JS
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

  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.

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