Lists

Basic list styling, using BEM notation.

  • list item
  • list item
<ul class="List">
	<li>list item</li>
	<li>list item</li>
</ul>

Bullets

  • list item
  • list item
<ul class="List List--disc">
	<li>list item</li>
	<li>list item</li>
</ul>

Numbered

  1. list item
  2. list item
<ol class="List List--dec">
	<li>list item</li>
	<li>list item</li>
</ol>

Check

  1. list item
  2. list item
<ol class="List List--check">
	<li>list item</li>
	<li>list item</li>
</ol>

Double Space

  1. list item
  2. list item
<ol class="List List--double">
	<li>list item</li>
	<li>list item</li>
</ol>

Inline

  • list item
  • list item
<ul class="List List--inline">
	<li>list item</li>
	<li>list item</li>
</ul>

Fluid Row

Displays list items in a row, with a specified primary row item which scales based on overall container width.

  • Row item
  • Primary row item
  • Row item 
<ul class="Fluid-Row">
    <li class="Fluid-Row__item">
        Row item
    </li>
    <li class="Fluid-Row__item Fluid-Row__item--primary">
        Primary row item
    </li>
    <li class="Fluid-Row__item">
        Row item
    </li>
</ul>

Small bold

A slightly smaller and bolder list with no link underlines.

<ul class="List List--small-bold">
	<li><a href="#">list item</a></li>
	<li><a href="#">list item</a></li>
</ul>

Padding

Adds default padding around the list items for larger click areas.

<ul class="List List--padding">
	<li><a href="#">list item</a></li>
	<li><a href="#">list item</a></li>
</ul>

Adds default padding around the list items for larger click areas.

<ul class="List List__menu">
	<li>
		<a href="#">
			<p class="List__menu--title">list item</p>
			<p class="List__menu--description">list item description</p>
		</a>
	</li>
	<li>
		<a href="#">
			<p class="List__menu--title">list item</p>
			<p class="List__menu--description">list item description</p>
		</a>
	</li>
</ul>

Advanced Lists

Item List

Item List

  • Item1
  • Item2
<div class="ItemList">
	<h4 class="ItemList__heading">Item List</h4>
	<ul>
		<li class="ItemList__item">
			<div class="ItemList__item-desc">Item1</div>
			<div class="ItemList__item-btn">
				<button class="Button Button__tag Button__tag--positive" data-label="label">Button</button>
			</div>
		</li>
		<li class="ItemList__item">
			<div class="ItemList__item-desc">Item2</div>
			<div class="ItemList__item-btn">
				<button class="Button Button__tag Button__tag--positive" data-label="label">Button</button>
			</div>
		</li>
	</ul>
</div>

Item List (Responsive)

Item List

  • Item1
  • Item2
<div class="ItemList__m">
	<h4 class="ItemList__heading">Item List</h4>
	<ul>
		<li class="ItemList__item">
			<div class="ItemList__item-desc">Item1</div>
			<div class="ItemList__item-btn">
				<button class="Button Button__tag Button__tag--positive" data-label="label">Button</button>
			</div>
		</li>
		<li class="ItemList__item">
			<div class="ItemList__item-desc">Item2</div>
			<div class="ItemList__item-btn">
				<button class="Button Button__tag Button__tag--positive" data-label="label">Button</button>
			</div>
		</li>
	</ul>
</div>

Settings List

  • Setting one Description of setting one
  • Setting two Description of setting two
<ul class="List__settings">
	<li class="ItemList__item">
		<div class="ItemList__item-desc">Setting one <span>Description of setting one</span></div>
		<div class="ItemList__item-toggle">
			<div class="Toggle">
				<input class="Toggle__input" type="checkbox" id="toggle-one" />
				<label for="toggle-one" class="Toggle__label">
					<span class="Toggle__description">
						<span class="Toggle__checked">On</span>
						<span class="Toggle__unchecked">Off</span>
					</span>
					<span class="Toggle__visible"></span>
				</label>
			</div>
		</div>
	</li>
	<li class="ItemList__item">
		<div class="ItemList__item-desc">Setting two <span>Description of setting two</span></div>
		<div class="ItemList__item-toggle">
			<div class="Toggle">
				<input class="Toggle__input" type="checkbox" id="toggle-two" />
				<label for="toggle-two" class="Toggle__label">
					<span class="Toggle__description">
						<span class="Toggle__checked">On</span>
						<span class="Toggle__unchecked">Off</span>
					</span>
					<span class="Toggle__visible"></span>
				</label>
			</div>
		</div>
	</li>
</ul>