Version 3.0.6

Lists

Lists present multiple line items vertically as a single continuous element.

Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. They are optimized for reading comprehension while differentiating either between similar data types, or qualities within a single data type.

  • AAArnold Archibald
  • BABetsy Angler
  • CACarl Arnaldorino
  • DADoug Artisti
  • EAEmilio Aristizabal
                      
<ul class="filter filter-list">
<li class="filter-row">
<span class="user-icon pink">AA</span>
<span class="user-name">Arnold Archibald</span>
</li>
<li class="filter-row">
<span class="user-icon green">BA</span>
<span class="user-name">Betsy Angler</span>
</li>
<li class="filter-row">
<span class="user-icon indigo">CA</span>
<span class="user-name">Carl Arnaldorino</span>
</li>
<li class="filter-row">
<span class="user-icon lime">DA</span>
<span class="user-name">Doug Aristi</span>
</li>
<li class="filter-row">
<span class="user-icon blue">EA</span>
<span class="user-name">Emilio Aristizabal</span>
</li>
</ul>
  • Arnold Archibald
  • Betsy Angler
  • Carl Arnaldorino
                      
<ul class="filter filter-list">
<li class="filter-row">
<span class="user-icon avatar">
<img src="/images/user1.jpg" />
</span>
<span class="user-name">Arnold Archibald</span>
</li>
<li class="filter-row">
<span class="user-icon avatar">
<img src="/images/user2.jpg" />
</span>
<span class="user-name">Betsy Angler</span>
</li>
<li class="filter-row">
<span class="user-icon avatar">
<img src="/images/user3.jpg" />
</span>
<span class="user-name">Carl Arnaldorino</span>
</li>
</ul>
  • Ralph Abraham
  • Alma Adams
  • Robert Aderholt
  • Peter Aguilar
  • Alexander Lamar
  • Rick Allen
  • Justin Amash
  • Mark Amodei
                      
<ul class="filter filter-list">
<li class="filter-row">
<span class="user-icon avatar type blue">
<img src="/images/abraham-ralph.jpeg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Ralph Abraham</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type green">
<img src="/images/adams-alma.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Alma Adams</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type red">
<img src="/images/aderholt-robert.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Robert Aderholt</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type purple">
<img src="/images/aguilar-peter.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Peter Aguilar</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type orange">
<img src="/images/alexander-lamar.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Alexander Lamar</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type pink">
<img src="/images/allen-rick.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Rick Allen</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type yellow">
<img src="/images/amash-justin.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Justin Amash</span>
</li>
<li class="filter-row">
<span class="user-icon avatar type teal">
<img src="/images/amodei-mark.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Mark Amodei</span>
</li>
</ul>
                      
<ul class="filter filter-list no-border">
<li class="filter-row">
<input class="checkbox" id="checkbox-1" type="checkbox" />
<label class="checkbox-label" for="checkbox-1">
<span class="user-icon avatar type blue">
<img src="/images/abraham-ralph.jpeg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Ralph Abraham</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-2" type="checkbox" />
<label class="checkbox-label" for="checkbox-2">
<span class="user-icon avatar type green">
<img src="/images/adams-alma.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Alma Adams</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-3" type="checkbox" />
<label class="checkbox-label" for="checkbox-3">
<span class="user-icon avatar type red">
<img src="/images/aderholt-robert.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Robert Aderholt</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-4" type="checkbox" />
<label class="checkbox-label" for="checkbox-4">
<span class="user-icon avatar type purple">
<img src="/images/aguilar-peter.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Peter Aguilar</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-5" type="checkbox" />
<label class="checkbox-label" for="checkbox-5">
<span class="user-icon avatar type orange">
<img src="/images/alexander-lamar.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Alexander Lamar</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-6" type="checkbox" />
<label class="checkbox-label" for="checkbox-6">
<span class="user-icon avatar type pink">
<img src="/images/allen-rick.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Rick Allen</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-7" type="checkbox" />
<label class="checkbox-label" for="checkbox-7">
<span class="user-icon avatar type yellow">
<img src="/images/amash-justin.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Justin Amash</span>
</label>
</li>
<li class="filter-row">
<input class="checkbox" id="checkbox-8" type="checkbox" />
<label class="checkbox-label" for="checkbox-8">
<span class="user-icon avatar type teal">
<img src="/images/amodei-mark.jpg" />
<span class="type-indicator"></span>
</span>
<span class="user-name">Mark Amodei</span>
</label>
</li>
</ul>

Search Results

Powered by