List
Used to display a list of items.
Text Only
-
Doesn't Link Anywhere
[List item description]
-
[Lightbox Title]
[Lightbox content] -
[List item description]
-
[List item label][List item description]
<div class="content-list" id="[ID]">
<ul class="content-list__items">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
<div class="list-item-description">
[List item description]
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[Action text]</a>
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="[Email Address]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[Email Address]">Read More</a>
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="#list-item-lightbox" class="lightbox lightbox--inline js-lightbox--inline">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="#list-item-lightbox" class="lightbox lightbox--inline js-lightbox--inline">[Action text]</a>
</div>
</div>
<div id="list-item-lightbox" class="inline-popup inline-popup--md mfp-hide">
<div class="inline-popup__header">
<h5>[Lightbox Title]</h5>
</div>
<div class="inline-popup__content">
[Lightbox content]
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-description">
[List item description]
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-description">
<p><span class="list-item-label">[List item label]</span>[List item description]</p>
</div>
</div>
</li>
</ul>
</div>
Text & Icons
<div class="content-list" id="[ID]">
<ul class="content-list__items">
<li class="list-item list-item--has-icon" id="[ID]">
<div class="list-item__content">
<div class="list-item-icon">
<a href="[URL]"><i class="fa fa-[icon]"></i></a>
</div>
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
[...]
<li class="list-item list-item--has-icon" id="[ID]">
<div class="list-item__content">
<div class="list-item-icon">
<a href="[URL]"><i class="fa fa-[icon]"></i></a>
</div>
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
</ul>
</div>
Text & Images
The first item in the list is configured to display the image in the background.
-
This is the description for "List Item 1." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.
Progressively deliver stand-alone networks without just in time mindshare.
-
This is the description for "List Item 2." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.
-
This is the description for "List Item 3." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.
<div class="content-list" id="[ID]">
<ul class="content-list__items">
<li class="list-item list-item--has-image" id="[ID]">
<div class="list-item__content">
<div class="list-item-image image" style="max-width: XXXpx;">
<a href="[URL]"><img width="XXX" height="YYY" alt="" src="path/to/foo.jpg"></a>
</div>
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
[...]
<li class="list-item list-item--has-image" id="[ID]">
<div class="list-item__content">
<div class="list-item-image image" style="max-width: XXXpx;">
<a href="[URL]"><img width="XXX" height="YYY" alt="" src="path/to/foo.jpg"></a>
</div>
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
</ul>
</div>
Text, Icons & Images
The first item in the list is configured to display the image in the background.
-
This is the description for "List Item 1." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.
Progressively deliver stand-alone networks without just in time mindshare.
-
This is the description for "List Item 2." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.
-
This is the description for "List Item 3." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.
<div class="content-list" id="[ID]">
<ul class="content-list__items">
<li class="list-item list-item--has-image list-item--has-icon" id="[ID]">
<div class="list-item__content">
<div class="list-item-image image" style="max-width: XXXpx;">
<a href="[URL]"><img width="XXX" height="YYY" alt="" src="path/to/foo.jpg"></a>
</div>
<div class="list-item-icon">
<a href="[URL]"><i class="fa fa-[icon]"></i></a>
</div>
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
[...]
<li class="list-item list-item--has-image list-item--has-icon" id="[ID]">
<div class="list-item__content">
<div class="list-item-image image" style="max-width: XXXpx;">
<a href="[URL]"><img width="XXX" height="YYY" alt="" src="path/to/foo.jpg"></a>
</div>
<div class="list-item-icon">
<a href="[URL]"><i class="fa fa-[icon]"></i></a>
</div>
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
</ul>
</div>
Navigation: Table of Contents
-
[List item description]
-
[List item description]
<div class="content-list content-list--toc" id="[ID]">
<div class="content-list__nav">
<ul>
<li><a href="#id1">List Item 1</a></li>
<li><a href="#id2">List Item 2</a></li>
<li><a href="#id3">List Item 3</a></li>
</ul>
</div>
<ul class="content-list__items">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
[...]
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
</ul>
</div>
Navigation: Glossary of Terms
<div class="content-list content-list--glossary" id="[ID]">
<div class="content-list__nav">
<ul>
<li><a href="#glossary1">A</a></li>
<li><a href="#glossary2">B</a></li>
<li><a href="#glossary3">C</a></li>
</ul>
</div>
<ul class="content-list__items">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
[...]
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
<a href="[URL]">[List item label]</a>
</div>
<div class="list-item-description">
[List item description]
</div>
<div class="list-item-action">
<a href="[URL]">[List item action]</a>
</div>
</div>
</li>
</ul>
</div>
List Styles
Numbered
-
List Item #1
-
List Item #2
-
List Item #3
<div class="content-list" id="[ID]">
<ol class="content-list__items">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
[...]
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
</ol>
</div>
No Style
-
List Item #1
-
List Item #2
-
List Item #3
<div class="content-list" id="[ID]">
<ul class="content-list__items list--plain">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
List Item #1
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
List Item #2
</div>
</div>
</li>
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
List Item #3
</div>
</div>
</li>
</ul>
</div>
List Spacing
Single
-
List Item #1
-
List Item #2
-
List Item #3
<div class="content-list" id="[ID]">
<ul class="content-list__items list-spacing--single">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
[...]
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
</ul>
</div>
Double
-
List Item #1
-
List Item #2
-
List Item #3
<div class="content-list" id="[ID]">
<ul class="content-list__items list-spacing--double">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
[...]
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
</ul>
</div>
Triple
-
List Item #1
-
List Item #2
-
List Item #3
<div class="content-list" id="[ID]">
<ul class="content-list__items list-spacing--triple">
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
[...]
<li class="list-item" id="[ID]">
<div class="list-item__content">
<div class="list-item-label">
[List item label]
</div>
</div>
</li>
</ul>
</div>
Class Reference
| Class | Info |
|---|---|
| content-list | Primary container. Should be added to a div. |
| content-list--toc | Denotes a "table of contents" list. |
| content-list--glossary | Denotes a "glossary" list. |
| content-list__nav | Denotes list navigation. Used with "table of contents" and "glossary" list. Should be added to a div. |
| content-list__items | Denotes a group of list items. Should be added to a ul or ol. |
| content-list__return | Denotes a "return to list" link on an item details page. Should be added to a div. |
| list-item | Denotes a single list item. Should be added to a li. |
| list-item--details | Denotes a single list item's details page. Should be added to a div. |
| list-item--has-image | Indicates that the list item contains a "list-item-image" element. |
| list-item--has-icon | Indicates that the list item contains a "list-item-icon" element. |
| list-item__content | Denotes the container for all of a single list item's content. Should be added to a div. |
| list-item-image | Denotes a list item's image; extends the image content type. Should be added to a div. |
| list-item-icon | Denotes a list item's Font Awesome icon. Should be added to a div. |
| list-item-label | Denotes a list item's label. Should be added to a div. |
| list-item-description | Denotes a list item's description. Should be added to a div. |
| list-item-details | Denotes a list item's details. Should be added to a div. |
| list-item-action | Denotes a list item's action (e.g., button). Should be added to a div. |