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

Suitable for presenting a summary of an item with associated actions. Most often used within a List component. It was designed to represent an email message on desktop computers and is not currently touch friendly.

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:

    <ul class="ms-List">
      <li class="ms-ListItem" tabindex="0">
        <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
        <span class="ms-ListItem-secondaryText">Meeting notes</span> 
        <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
        <span class="ms-ListItem-metaText">2:42p</span> 
        <div class="ms-ListItem-selectionTarget"></div>
        <div class="ms-ListItem-actions">
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Mail"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Delete"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Flag"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Pinned"></i>
          </div>
        </div>
      </li>
    </ul>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all ListItem components on the page:

    <script type="text/javascript">
      var ListItemElements = document.querySelectorAll(".ms-ListItem");
      for (var i = 0; i < ListItemElements.length; i++) {
        new fabric['ListItem'](ListItemElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default List
<ul class="ms-List">
  <li class="ms-ListItem" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
Image ListItem
<ul class="ms-List">
  <li class="ms-ListItem ms-ListItem--image" tabindex="0">
    <div class="ms-ListItem-image"></div>
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
Document ListItem
<ul class="ms-List">
  <li class="ms-ListItem ms-ListItem--document" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-itemIcon ms-ListItem-itemIcon--ppt"></div>
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes 2:42p
Selectable ListItem
<ul class="ms-List">
  <li class="ms-ListItem is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
Selected ListItem
<ul class="ms-List">
  <li class="ms-ListItem is-selected is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
Unseen ListItem
<ul class="ms-List">
  <li class="ms-ListItem is-unseen is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
Unread ListItem
<ul class="ms-List">
  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListItemElements = document.querySelectorAll(".ms-ListItem");
  for (var i = 0; i < ListItemElements.length; i++) {
    new fabric['ListItem'](ListItemElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p