Default Handlebars template that can be used (and customized) when surfacing Microsoft Graph user results in WordPress using the WPO365 (WordPress + Office 365) plugin (see https://www.wpo365.com/working-with-handlebars-templates/ for details).

ed.intranet.list.template.html

<content>
  <script id="jshelpers">
  </script>
  <header id="header" type="x-handlebars-template">
    <style>
      .pintraItemCell {
        position: relative;
        outline: transparent;
        min-height: 54px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
      }

      .pintraItemCell:hover {
        background: #eee;
      }

      .pintraItemCell::selection {
        background-color: #bfdcea;
      }

      .pintraItemIconWrapper {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
      }

      .pintraItemIcon {
        display: block;
        width: inherit;
        height: inherit;
        text-align: center;
      }

      .pintraItemIcon>img {
        display: inline-block;
        width: inherit;
        height: auto;
      }

      .pintraItemContent {
        margin-left: 10px;
        overflow: hidden;
        flex-grow: 1;
      }

      .pintraItemPrimaryText {
        font-size: 21px;
        font-weight: 100;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pintraItemSecondaryText {
        width: 95%;
        font-size: 80%;
        font-weight: 200;
      }

      .pintraTertiaryText {
        font-size: 60%;
      }

      .pintraItemMeta {
        font-size: 50%;
        font-weight: 100;
        color: #d3d3d3;
        box-sizing: border-box;
        width: calc(100% - 50px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pintraItemLink,
      .pintraItemLink:hover,
      .pintraItemLink:visited {
        font-size: inherit;
        color: inherit;
        text-decoration: underline;
      }

      .pintraItemPath {
        font-size: 60%;
        font-weight: 200;
        box-sizing: border-box;
        width: calc(100% - 50px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pintraActionButtonGroup {
        display: flex;
        display: -webkit-flex;
        /* Safari */
        flex-direction: column;
        -webkit-flex-direction: column;
        /* Safari 6.1+ */
      }

      .pintraActionButtonWrapper {
        -webkit-flex-wrap: wrap;
        /* Safari 6.1+ */
        flex-wrap: wrap;
        -webkit-flex-grow: 1;
        flex-grow: 1;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        font-size: 12px;
        line-height: 24px;
        height: 24px;
        display: -webkit-flex;
        /* Safari */
        display: flex;
        cursor: pointer;
      }

      .pintraActionButtonIcon {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
        width: 24px;
        margin: 0;
        padding: 0;
      }

      .pintraActionButtonLabel {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
      }
    </style>
  </header>
  <main id="item" type="x-handlebars-template">
    <div id="pintraItemCell" class="pintraItemCell">
      <div class="pintraItemIconWrapper">
        <div class="pintraItemIcon">
          {{avatar dataUrl}}
        </div>
      </div>
      <div class="pintraItemContent">
        <div class="pintraItemPrimaryText">
          {{displayName}}
        </div>
        <div class="pintraItemSecondaryText">
          {{jobTitle}}
        </div>
        <div class="pintraTertiaryText">
          {{department}}
        </div>
        <div class="pintraItemMeta">
        </div>
        <div class="pintraActionButtonGroup">
          <div class="pintraActionButtonWrapper" onclick="window.open('mailto:{{../WorkEmail}}', '_blank')">
            <div class="pintraActionButtonIcon">
              {{fabricIcon 'Mail'}}
            </div>
            <div class="pintraActionButtonLabel">
              {{mail}}
            </div>
          </div>
          <div class="pintraActionButtonWrapper" onclick="window.open('sip:{{../UserName}}', '_blank')">
            <div class="pintraActionButtonIcon">
              {{fabricIcon 'SkypeForBusinessLogo'}}
            </div>
            <div class="pintraActionButtonLabel">
              {{imAddresses}}
            </div>
          </div>
          <div class="pintraActionButtonWrapper" onclick="window.open('tel:{{../MobilePhone}}', '_blank')">
            <div class="pintraActionButtonIcon">
              {{fabricIcon 'CellPhone'}}
            </div>
            <div class="pintraActionButtonLabel">
              {{mobilePhone}}
            </div>
          </div>
          <div class="pintraActionButtonWrapper" onclick="window.open('tel:{{../WorkPhone}}', '_blank')">
            <div class="pintraActionButtonIcon">
              {{fabricIcon 'Phone'}}
            </div>
            <div class="pintraActionButtonLabel">
              {{businessPhones}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer id="footer" type="x-handlebars-template">
    <div></div>
  </footer>
</content>