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.

ListItem

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

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>
		
	

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>

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>

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