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
-
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.
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.
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
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.
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.
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.
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.