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

Presents a number of related items, either as a vertical list or in a grid.

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 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>
      <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>
      <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>
      <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>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all List components on the page:

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

Variants

Default List
<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>
  <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>
  <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>
  <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 ListElements = document.querySelectorAll(".ms-List");
  for (var i = 0; i < ListElements.length; i++) {
    new fabric['List'](ListElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p