Collections: List View
Text Only
-
Doesn't Link Anywhere
[Collection item description]
-
[Lightbox Title]
[Lightbox content] -
[Collection item description]
-
[Collection item label][Collection item description]
<div class="collection collection--list" id="[ID]">
<ul class="collection__items">
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
Doesn't Link Anywhere
</div>
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
</div>
</li>
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="[URL]">Links To Another Site</a>
</div>
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
<div class="collection-item-action">
<a href="[URL]">[Action text]</a>
</div>
</div>
</li>
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="#">Links To Downloadable File</a>
</div>
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
<div class="collection-item-action">
<a href="[URL]">[Action text]</a>
</div>
</div>
</li>
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="[Email Address]">Links to an email address</a>
</div>
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
<div class="collection-item-action">
<a href="[Email Address]">Read More</a>
</div>
</div>
</li>
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="[URL]">Links to a separate details page</a>
</div>
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
<div class="collection-item-action">
<a href="[URL]">[Action text]</a>
</div>
</div>
</li>
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="#collection-item-lightbox" class="lightbox lightbox--inline js-lightbox--inline">Links to a lightbox view</a>
</div>
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
<div class="collection-item-action">
<a href="#collection-item-lightbox" class="lightbox lightbox--inline js-lightbox--inline">[Action text]</a>
</div>
</div>
<div id="collection-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="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-description">
<p>[Collection item description]</p>
</div>
</div>
</li>
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-description">
<p><span class="collection-item-label">[Collection item label]</span>[Collection item description]</p>
</div>
</div>
</li>
</ul>
</div>
Text Only w/ Table of Contents
-
[Collection item description]
-
[Collection item description]
<div class="collection collection--list" id="[ID]">
<div class="collection__nav">
<ul>
<li><a href="#id1">Collection Item 1</a></li>
<li><a href="#id2">Collection Item 2</a></li>
<li><a href="#id3">Collection Item 3</a></li>
</ul>
</div>
<ul class="collection__items">
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
[...]
<li class="collection-item" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
</div>
</li>
</ul>
</div>
Text & Icons
<div class="collection collection--list" id="[ID]">
<ul class="collection__items">
<li class="collection-item collection-item--has-icon" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-icon">
<a href="[URL]"><i class="fas fa-[icon]"></i></a>
</div>
<div class="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
[...]
<li class="collection-item collection-item--has-icon" id="[ID]">
<div class="collection-item__content">
<div class="collection-item-icon">
<a href="[URL]"><i class="fas fa-[icon]"></i></a>
</div>
<div class="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
</ul>
</div>
Text & Images
Note: If a collection item contains an aligned/floated "collection-item-image" element, then the "clearfix" class must be added to the "collection-item__content" element.
-
This is the description for "Collection 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 "Collection 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 "Collection 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="collection collection--list" id="[ID]">
<ul class="collection__items">
<li class="collection-item collection-item--has-image" id="[ID]">
<div class="collection-item__content clearfix">
<div class="collection-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="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
[...]
<li class="collection-item collection-item--has-image" id="[ID]">
<div class="collection-item__content clearfix">
<div class="collection-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="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
</ul>
</div>
Text, Icons & Images
Note: If a collection item contains an aligned/floated "collection-item-image" element, then the "clearfix" class must be added to the "collection-item__content" element.
-
This is the description for "Collection 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 "Collection 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 "Collection 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="collection collection--list" id="[ID]">
<ul class="collection__items">
<li class="collection-item collection-item--has-image collection-item--has-icon" id="[ID]">
<div class="collection-item__content clearfix">
<div class="collection-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="collection-item-icon">
<a href="[URL]"><i class="fas fa-[icon]"></i></a>
</div>
<div class="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
[...]
<li class="collection-item collection-item--has-image collection-item--has-icon" id="[ID]">
<div class="collection-item__content clearfix">
<div class="collection-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="collection-item-icon">
<a href="[URL]"><i class="fas fa-[icon]"></i></a>
</div>
<div class="collection-item-label">
<a href="[URL]">[Collection item label]</a>
</div>
<div class="collection-item-description">
[Collection item description]
</div>
<div class="collection-item-action">
<a href="[URL]">[Collection item action]</a>
</div>
</div>
</li>
</ul>
</div>
List Styles
Bullet
- Seamlessly empower multifunctional meta-services after cost effective e-tailers.
- Objectively fashion an expanded array of total linkage before vertical channels.
- Continually implement professional e-business through market positioning materials.
<div class="collection collection--list" id="[ID]">
<ul class="collection__items">
<li class="collection-item" id="[ID]">Seamlessly empower multifunctional meta-services after cost effective e-tailers.</li>
<li class="collection-item" id="[ID]">Objectively fashion an expanded array of total linkage before vertical channels.</li>
<li class="collection-item" id="[ID]">Continually implement professional e-business through market positioning materials.</li>
</ul>
</div>
Numbered
Numbered collection is rendered using an ol element.
- Seamlessly empower multifunctional meta-services after cost effective e-tailers.
- Objectively fashion an expanded array of total linkage before vertical channels.
- Continually implement professional e-business through market positioning materials.
<div class="collection collection--list" id="[ID]">
<ol class="collection__items">
<li class="collection-item" id="[ID]">Seamlessly empower multifunctional meta-services after cost effective e-tailers.</li>
<li class="collection-item" id="[ID]">Objectively fashion an expanded array of total linkage before vertical channels.</li>
<li class="collection-item" id="[ID]">Continually implement professional e-business through market positioning materials.</li>
</ol>
</div>
Unstyled
- Seamlessly empower multifunctional meta-services after cost effective e-tailers.
- Objectively fashion an expanded array of total linkage before vertical channels.
- Continually implement professional e-business through market positioning materials.
<div class="collection collection--list" id="[ID]">
<ul class="collection__items list--plain">
<li class="collection-item" id="[ID]">Seamlessly empower multifunctional meta-services after cost effective e-tailers.</li>
<li class="collection-item" id="[ID]">Objectively fashion an expanded array of total linkage before vertical channels.</li>
<li class="collection-item" id="[ID]">Continually implement professional e-business through market positioning materials.</li>
</ul>
</div>
List Spacing
Single
- Collection Item 1
- Collection Item 2
- Collection Item 3
<div class="collection collection--list" id="[ID]">
<ul class="collection__items list-spacing--single">
<li class="collection-item" id="[ID]">Collection Item 1</li>
<li class="collection-item" id="[ID]">Collection Item 2</li>
<li class="collection-item" id="[ID]">Collection Item 3</li>
</ul>
</div>
Double
- Seamlessly empower multifunctional meta-services after cost effective e-tailers.
- Objectively fashion an expanded array of total linkage before vertical channels.
- Continually implement professional e-business through market positioning materials.
<div class="collection collection--list" id="[ID]">
<ul class="collection__items list-spacing--double">
<li class="collection-item" id="[ID]">Collection Item 1</li>
<li class="collection-item" id="[ID]">Collection Item 2</li>
<li class="collection-item" id="[ID]">Collection Item 3</li>
</ul>
</div>
Triple
- Seamlessly empower multifunctional meta-services after cost effective e-tailers.
- Objectively fashion an expanded array of total linkage before vertical channels.
- Continually implement professional e-business through market positioning materials.
<div class="collection collection--list" id="[ID]">
<ul class="collection__items list-spacing--triple">
<li class="collection-item" id="[ID]">Collection Item 1</li>
<li class="collection-item" id="[ID]">Collection Item 2</li>
<li class="collection-item" id="[ID]">Collection Item 3</li>
</ul>
</div>