Web Style Guide: HTML Lists

HTML: Lists

A large portion of web content is formatted into lists. We've got some nice formatting options "listed" below - all puns intended. ;)

List: Ordered (Default)

  1. Ordered list item 1
  2. Ordered list item 2
    1. Child ordered list item 1
    2. Child ordered list item 2
  3. Ordered list item 3
<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2
        <ol>
            <li>Child ordered list item 1</li>
            <li>Child ordered list item 2</li>
        </ol>
    </li>
    <li>Ordered list item 3</li>
</ol>

List: Unordered (Default)

  • Unordered list item 1
  • Unordered list item 2
    • Child unordered list item 1
    • Child unordered list item 2
  • Unordered list item 3
<ul>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2
        <ul>
            <li>Child ordered list item 1</li>
            <li>Child ordered list item 2</li>
        </ul>
    </li>
    <li>Ordered list item 3</li>
</ul>

List: List Class

CSS Classes: list
  • List item 1
  • List item 2
  • List item 3
<ul class="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

List: Numbered List

CSS Classes: list list-numbered
  • Numbered list item 1
  • Numbered list item 2
  • Numbered list item 3
<ul class="list list-numbered">
    <li>Numbered list item 1</li>
    <li>Numbered list item 2</li>
    <li>Numbered list item 3</li>
</ul>

List: Bullet List

CSS Classes: list list-bullet
  • Bullet list item 1
  • Bullet list item 2
  • Bullet list item 3
<ul class="list list-bullet">
    <li>Bullet list item 1</li>
    <li>Bullet list item 2</li>
    <li>Bullet list item 3</li>
</ul>

List: List Divider

CSS Classes: list list-divider
  • List item 1
  • List item 2
  • List item 3
<ul class="list list-divider">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

List: Striped List

CSS Classes: list list-striped
  • List item 1
  • List item 2
  • List item 3
<ul class="list list-striped">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

List: Large List

CSS Classes: list list-large
  • List item 1
  • List item 2
  • List item 3
<ul class="list list-large">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

List: Small List

CSS Classes: list list-small
  • List item 1
  • List item 2
  • List item 3
<ul class="list list-small">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

List: Description List

Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.
<dl>
    <dt>Description lists</dt>
    <dd>A description list defines terms and their corresponding descriptions.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
</dl>

List: Description List

CSS Classes: list-inline dt-right
Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.
<dl class="list-inline dt-right">
    <dt>Description lists</dt>
    <dd>A description list defines terms and their corresponding descriptions.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
</dl>

Design, Tools & Training

Skip Menu
Top