Lists

Unordered, ordered and nested lists

A selection of list styles using:

  • Morbi in sem quis dui.
  • Praesent dapibus, neque id cursus faucibus, tortor.
    • Lorem ipsum dolor sit amet.
    • Aliquam tincidunt mauris eu risus:
      1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      2. Aliquam tincidunt mauris eu risus.
      3. Vestibulum auctor dapibus neque.
    • Vestibulum auctor dapibus neque.
  • Phasellus ultrices
  • Pellentesque fermentum dolor.

Code example

<ul>
    <li>Morbi in sem quis dui.</li>
    <li>Praesent dapibus, neque id cursus faucibus, tortor.
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Aliquam tincidunt mauris eu risus:
                <ol>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                    <li>Vestibulum auctor dapibus neque.</li>
                </ol>
            </li>
            <li>Vestibulum auctor dapibus neque.</li>
        </ul>
    </li>
    <li>Phasellus ultrices</li>
    <li>Pellentesque fermentum dolor. </li>
</ul>

A list with the class "simple"

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus:
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Code example

<ul class="simple">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus:</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

A list with the class "striped"

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus:
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Code example

<ul class="striped">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus:</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>