Lists

The following gives you an example of <ul> and <ol> lists.

Ordered List

1. Item 1
2. Item 2
   1. Item 1
   2. Item 2
      1. Item 1
      2. Item 2
3. Item 3
4. Item 4

Usage

<ol>
  <li>Item 1</li>
  <li>Item 2
    <ol>
      <li>Item 1</li>
      <li>Item 2
        <ol>
          <li>Item 1</li>
          <li>Item 2</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Unordered List

• Item 1
• Item 2
  • Item 1
  • Item 2
    • Item 1
    • Item 2
• Item 3
• Item 4

Usage

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 1</li>
      <li>Item 2
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Unstyled List

Adding the class .no-style to a ul or ol list will remove padding from the list and remove bullets. The class .no-style only applies to direct descendants, and must be repeated for nested lists.

• Item 1
• Item 2
  • Item 1
  • Item 2
• Item 3
• Item 4

Usage

<ul class="no-style">
  …
</ul>

Separated List

Adding the class .separator to a ul or ol list will add a border-bottom between list items. The class .separator only applies to direct descendants, and must be repeated for nested lists.

• Item 1
• Item 2
• Item 3
• Item 4

Usage

<ul class="no-style separator">
  …
</ul>

Link List

• This is a link

  Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

• This is a longer link

  Integer hendrerit risus tellus, non varius quam elementum ac. Aliquam ut lectus nulla. Maecenas tincidunt ligula quis augue rhoncus mattis. Ut vitae metus et quam rutrum varius sit amet sit amet lectus. Suspendisse rhoncus nibh eu placerat blandit. Pellentesque quis mollis leo. Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget, commodo consequat sem.

Usage

  
<ul class="linklist">
  <li>
    <a href="put link here">
      <h4></h4> (or h3, h5)
    </a>
    <p></p>
  </li>
  …
</ul>
  

Image List

Suggested width for images is either 75px or 150px for consistency. Also optimized, retina (2x) images are recommended for thumbnail images in image lists.

• This is a link

  

  Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

• This is a longer link

  

  Integer hendrerit risus tellus, non varius quam elementum ac. Aliquam ut lectus nulla. Maecenas tincidunt ligula quis augue rhoncus mattis. Ut vitae metus et quam rutrum varius sit amet sit amet lectus. Suspendisse rhoncus nibh eu placerat blandit. Pellentesque quis mollis leo. Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget, commodo consequat sem.

Usage

  
<ul class="no-style linklist">
  <li>
    <a href="put link here">
      <h4></h4> (or h3, h5)
      <img src="image-file" alt="alt text"/>
    </a>
    <p></p>
  </li>
  …
</ul>
  

Definition Lists

A description list defines terms and their corresponding descriptions.

Default Styles

This is a longer definition term

Integer hendrerit risus tellus, non varius quam elementum ac. Aliquam ut lectus nulla. Maecenas tincidunt ligula quis augue rhoncus mattis. Ut vitae metus et quam rutrum varius sit amet sit amet lectus. Suspendisse rhoncus nibh eu placerat blandit. Pellentesque quis mollis leo. Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget, commodo consequat sem.

This is a term

Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

This is a term that overflows

Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

Usage

<dl>
  <dt></dt>
  <dd></dd>
  …
</dl>

Vertical Definition List

Add the .vertical class to display terms and definitions stacked vertically. This must be reapplied to nested definition lists to apply.

This is a longer definition term

Integer hendrerit risus tellus, non varius quam elementum ac. Aliquam ut lectus nulla. Maecenas tincidunt ligula quis augue rhoncus mattis. Ut vitae metus et quam rutrum varius sit amet sit amet lectus. Suspendisse rhoncus nibh eu placerat blandit. Pellentesque quis mollis leo. Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget, commodo consequat sem.

This is a term

Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

This is a term that overflows

Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

Usage

<dl class="vertical">
  <dt></dt>
  <dd></dd>
  …
</dl>

Horizontal Definition List

Add the .horizontal class to display terms and definitions side by side. On mobile devices the horizontal definition list collapses, it does not layout horizontally. The dt element is given a width of 10em by default, but is styled with text-overflow ellipsis.

This is a longer definition term

Integer hendrerit risus tellus, non varius quam elementum ac. Aliquam ut lectus nulla. Maecenas tincidunt ligula quis augue rhoncus mattis. Ut vitae metus et quam rutrum varius sit amet sit amet lectus. Suspendisse rhoncus nibh eu placerat blandit. Pellentesque quis mollis leo. Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget, commodo consequat sem.

This is a term

Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

This is a term that overflows

Aenean sed nunc nec diam dictum tempus. Sed quis arcu leo. Mauris magna augue, fringilla et felis eget.

Usage

<dl class="horizontal">
  <dt></dt>
  <dd></dd>
  …
</dl>

Scrollable List

By wrapping a list in a div with the classname .vertical-scrolling and giving that wrapper a max-height will allow the list to be scrollable.

Usage

<div class="vertical-scrolling" style="height:100px;">
  <ol>
    <li>Item 1</li>
    <li>Item 2
    <li>...</li>
    <li>Last Item</li>
  </ol>
</div>