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.

FacePile

Overview

The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow.

Also available in Fabric React

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>

  2. Copy the HTML from one of the samples below into your page. For example:

    <div class="ms-FacePile">
  <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
    <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
  </button>
  <div class="ms-Persona ms-Persona--facePile">
    <div class="ms-Persona-imageArea">
      <div class="ms-Persona-initials ms-Persona-initials--blue">AL</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">Alton Lafferty</div>
      <div class="ms-Persona-secondaryText">Accountant</div>
    </div>
    <div class="ms-PersonaCard">
      <div class="ms-PersonaCard-persona">
        <div class="ms-Persona ms-Persona--lg">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</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">Alton Lafferty</div>
            <div class="ms-Persona-secondaryText">Accountant</div>
            <div class="ms-Persona-tertiaryText">In a meeting</div>
            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
          </div>
        </div>
      </div>
      <ul class="ms-PersonaCard-actions">
        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
          <i class="ms-Icon ms-Icon--Chat"></i>
        </li>
        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
          <i class="ms-Icon ms-Icon--Phone"></i>
        </li>
        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
          <i class="ms-Icon ms-Icon--Video"></i>
        </li>
        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
          <i class="ms-Icon ms-Icon--Mail"></i>
        </li>
        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
          <i class="ms-Icon ms-Icon--Org"></i>
        </li>
      </ul>
      <div class="ms-PersonaCard-actionDetailBox">
        <div data-detail-id="mail" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
          </div>
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
          </div>
        </div>
        <div data-detail-id="chat" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
            <a class="ms-Link" href="#">Start Lync call</a> 
          </div>
        </div>
        <div data-detail-id="phone" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailExpander"></div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Details</span> 
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
          </div>
        </div>
        <div data-detail-id="video" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
            <a class="ms-Link" href="#">Start Skype call</a> 
          </div>
        </div>
        <div data-detail-id="org" class="ms-PersonaCard-details">
          <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>
                <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">Marcus Lauer</div>
                        <div class="ms-Persona-secondaryText">Technical Support</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">Marcel Groce</div>
                        <div class="ms-Persona-secondaryText">Delivery</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">Jessica Fischer</div>
                        <div class="ms-Persona-secondaryText">Marketing</div>
                      </div>
                    </div>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-Persona ms-Persona--facePile">
    <div class="ms-Persona-imageArea">
      <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
    </div>
    <div class="ms-Persona-presence">
    </div>
    <div class="ms-Persona-details">
      <div class="ms-Persona-primaryText">Marcus Lauer</div>
      <div class="ms-Persona-secondaryText">Accountant</div>
    </div>
    <div class="ms-PersonaCard">
      <div class="ms-PersonaCard-persona">
        <div class="ms-Persona ms-Persona--lg">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Marcus Lauer</div>
            <div class="ms-Persona-secondaryText">Accountant</div>
            <div class="ms-Persona-tertiaryText">In a meeting</div>
            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
          </div>
        </div>
      </div>
      <ul class="ms-PersonaCard-actions">
        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
          <i class="ms-Icon ms-Icon--Chat"></i>
        </li>
        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
          <i class="ms-Icon ms-Icon--Phone"></i>
        </li>
        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
          <i class="ms-Icon ms-Icon--Video"></i>
        </li>
        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
          <i class="ms-Icon ms-Icon--Mail"></i>
        </li>
        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
          <i class="ms-Icon ms-Icon--Org"></i>
        </li>
      </ul>
      <div class="ms-PersonaCard-actionDetailBox">
        <div data-detail-id="mail" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
          </div>
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
          </div>
        </div>
        <div data-detail-id="chat" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
            <a class="ms-Link" href="#">Start Lync call</a> 
          </div>
        </div>
        <div data-detail-id="phone" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailExpander"></div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Details</span> 
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
          </div>
        </div>
        <div data-detail-id="video" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
            <a class="ms-Link" href="#">Start Skype call</a> 
          </div>
        </div>
        <div data-detail-id="org" class="ms-PersonaCard-details">
          <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>
                <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">Marcus Lauer</div>
                        <div class="ms-Persona-secondaryText">Technical Support</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">Marcel Groce</div>
                        <div class="ms-Persona-secondaryText">Delivery</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">Jessica Fischer</div>
                        <div class="ms-Persona-secondaryText">Marketing</div>
                      </div>
                    </div>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
    <span class="ms-FacePile-overflowText">+3</span> 
  </button>
</div>

  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all FacePile components on the page:

    <script type="text/javascript">
  var FacePileElements = document.querySelectorAll(".ms-FacePile");
  for (var i = 0; i < FacePileElements.length; i++) {
    new fabric['FacePile'](FacePileElements[i]);
  }
</script>

  4. Replace the sample HTML content with your content.

Variants

Default FacePile 
<div class="ms-FacePile">
  <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
    <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
  </button>
  <div class="ms-Persona ms-Persona--facePile">
    <div class="ms-Persona-imageArea">
      <div class="ms-Persona-initials ms-Persona-initials--blue">AL</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">Alton Lafferty</div>
      <div class="ms-Persona-secondaryText">Accountant</div>
    </div>
    <div class="ms-PersonaCard">
      <div class="ms-PersonaCard-persona">
        <div class="ms-Persona ms-Persona--lg">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</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">Alton Lafferty</div>
            <div class="ms-Persona-secondaryText">Accountant</div>
            <div class="ms-Persona-tertiaryText">In a meeting</div>
            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
          </div>
        </div>
      </div>
      <ul class="ms-PersonaCard-actions">
        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
          <i class="ms-Icon ms-Icon--Chat"></i>
        </li>
        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
          <i class="ms-Icon ms-Icon--Phone"></i>
        </li>
        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
          <i class="ms-Icon ms-Icon--Video"></i>
        </li>
        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
          <i class="ms-Icon ms-Icon--Mail"></i>
        </li>
        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
          <i class="ms-Icon ms-Icon--Org"></i>
        </li>
      </ul>
      <div class="ms-PersonaCard-actionDetailBox">
        <div data-detail-id="mail" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
          </div>
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
          </div>
        </div>
        <div data-detail-id="chat" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
            <a class="ms-Link" href="#">Start Lync call</a> 
          </div>
        </div>
        <div data-detail-id="phone" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailExpander"></div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Details</span> 
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
          </div>
        </div>
        <div data-detail-id="video" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
            <a class="ms-Link" href="#">Start Skype call</a> 
          </div>
        </div>
        <div data-detail-id="org" class="ms-PersonaCard-details">
          <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>
                <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">Marcus Lauer</div>
                        <div class="ms-Persona-secondaryText">Technical Support</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">Marcel Groce</div>
                        <div class="ms-Persona-secondaryText">Delivery</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">Jessica Fischer</div>
                        <div class="ms-Persona-secondaryText">Marketing</div>
                      </div>
                    </div>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-Persona ms-Persona--facePile">
    <div class="ms-Persona-imageArea">
      <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
    </div>
    <div class="ms-Persona-presence">
    </div>
    <div class="ms-Persona-details">
      <div class="ms-Persona-primaryText">Marcus Lauer</div>
      <div class="ms-Persona-secondaryText">Accountant</div>
    </div>
    <div class="ms-PersonaCard">
      <div class="ms-PersonaCard-persona">
        <div class="ms-Persona ms-Persona--lg">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Marcus Lauer</div>
            <div class="ms-Persona-secondaryText">Accountant</div>
            <div class="ms-Persona-tertiaryText">In a meeting</div>
            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
          </div>
        </div>
      </div>
      <ul class="ms-PersonaCard-actions">
        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
          <i class="ms-Icon ms-Icon--Chat"></i>
        </li>
        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
          <i class="ms-Icon ms-Icon--Phone"></i>
        </li>
        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
          <i class="ms-Icon ms-Icon--Video"></i>
        </li>
        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
          <i class="ms-Icon ms-Icon--Mail"></i>
        </li>
        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
          <i class="ms-Icon ms-Icon--Org"></i>
        </li>
      </ul>
      <div class="ms-PersonaCard-actionDetailBox">
        <div data-detail-id="mail" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
          </div>
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
          </div>
        </div>
        <div data-detail-id="chat" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
            <a class="ms-Link" href="#">Start Lync call</a> 
          </div>
        </div>
        <div data-detail-id="phone" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailExpander"></div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Details</span> 
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
          </div>
          <div class="ms-PersonaCard-detailLine">
            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
          </div>
        </div>
        <div data-detail-id="video" class="ms-PersonaCard-details">
          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
            <a class="ms-Link" href="#">Start Skype call</a> 
          </div>
        </div>
        <div data-detail-id="org" class="ms-PersonaCard-details">
          <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>
                <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">Marcus Lauer</div>
                        <div class="ms-Persona-secondaryText">Technical Support</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">Marcel Groce</div>
                        <div class="ms-Persona-secondaryText">Delivery</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">Jessica Fischer</div>
                        <div class="ms-Persona-secondaryText">Marketing</div>
                      </div>
                    </div>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
    <span class="ms-FacePile-overflowText">+3</span> 
  </button>
</div>
<script type="text/javascript">
  var FacePileElements = document.querySelectorAll(".ms-FacePile");
  for (var i = 0; i < FacePileElements.length; i++) {
    new fabric['FacePile'](FacePileElements[i]);
  }
</script>
AL
Alton Lafferty
Accountant
AL
Alton Lafferty
Accountant
In a meeting
Available at 4:00pm
  • View profile
Personal: alton.lafferty@outlook.com
Work: altonlafferty@contoso.com
Lync: Start Lync call
Details
Personal: 555.206.2443
Work: 555.929.8240
Skype: Start Skype call
Manager
Staff
ML
Marcus Lauer
Accountant
ML
Marcus Lauer
Accountant
In a meeting
Available at 4:00pm
  • View profile
Personal: alton.lafferty@outlook.com
Work: altonlafferty@contoso.com
Lync: Start Lync call
Details
Personal: 555.206.2443
Work: 555.929.8240
Skype: Start Skype call
Manager
Staff

States

State Applied to Result
.is-active .ms-PersonaCard
Makes the PersonaCard for a person visible.
.is-active .ms-FacePile-itemBtn--overflow
Makes the overflow item for additional people visible.