Lists


Unordered (Bulleted) Lists

<ul>
  <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</li>
  <li>Eum, totam impedit sul</li>
  <li>Vitae fugit id veniam veritatis dolorum numquam facilis nobis corrupti unde.</li>
  <li>Ad voluptatem odio culpa reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.</li>
  <li>Architecto esse illum qui quo quibusdam?</li>
  <li>Autem assumenda nobis obcaecati molestias beatae corporis soluta quod nemo.</li>
</ul>
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  • Eum, totam impedit sul
  • Vitae fugit id veniam veritatis dolorum numquam facilis nobis corrupti unde.
  • Ad voluptatem odio culpa reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.
  • Architecto esse illum qui quo quibusdam?
  • Autem assumenda nobis obcaecati molestias beatae corporis soluta quod nemo.

Ordered (Numbered) Lists

<ol>
  <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</li>
  <li>Eum, totam impedit sul</li>
  <li>Vitae fugit id veniam veritatis dolorum numquam facilis nobis corrupti unde.</li>
  <li>Ad voluptatem odio culpa reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.</li>
  <li>Architecto esse illum qui quo quibusdam?</li>
  <li>Autem assumenda nobis obcaecati molestias beatae corporis soluta quod nemo.</li>
</ol>
  1. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  2. Eum, totam impedit sul
  3. Vitae fugit id veniam veritatis dolorum numquam facilis nobis corrupti unde.
  4. Ad voluptatem odio culpa reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.
  5. Architecto esse illum qui quo quibusdam?
  6. Autem assumenda nobis obcaecati molestias beatae corporis soluta quod nemo.

Styled Lists

"Showy" Lists

To create a "showy" list add the showy-list class to the <ol>.

<ol class='showy-list'>
  <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</li>
  <li>Eum, totam impedit sul</li>
  <li>Vitae fugit id veniam veritatis dolorum numquam facilis nobis corrupti unde.</li>
  <li>Ad voluptatem odio culpa reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.</li>
  <li>Architecto esse illum qui quo quibusdam?</li>
  <li>Autem assumenda nobis obcaecati molestias beatae corporis soluta quod nemo.</li>
</ol>
  1. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  2. Eum, totam impedit sul
  3. Vitae fugit id veniam veritatis dolorum numquam facilis nobis corrupti unde.
  4. Ad voluptatem odio culpa reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.
  5. Architecto esse illum qui quo quibusdam?
  6. Autem assumenda nobis obcaecati molestias beatae corporis soluta quod nemo.
"Pretty" Lists

To create a "pretty" list add the pretty-list class to the <ol>, and add a <em> within each item.

<ol class='pretty-list'>
  <li><em>Lorem ipsum dolor</em> Sit amet consectetur adipisicing elit.</li>
  <li><em>Eum, totam</em> Impedit sul mobus qulits.</li>
  <li><em>Vitae fugit</em> Id veniam veritatis dolorum numquam facilis nobis corrupti unde.</li>
  <li><em>Ad voluptatem odio culpa</em> Reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.</li>
  <li><em>Architecto esse</em> Illum qui quo quibusdam?</li>
  <li><em>Autem assumenda</em> Nobis obcaecati molestias beatae corporis soluta quod nemo.</li>
</ol>
  1. Lorem ipsum dolor Sit amet consectetur adipisicing elit.
  2. Eum, totam Impedit sul mobus qulits.
  3. Vitae fugit Id veniam veritatis dolorum numquam facilis nobis corrupti unde.
  4. Ad voluptatem odio culpa Reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.
  5. Architecto esse Illum qui quo quibusdam?
  6. Autem assumenda Nobis obcaecati molestias beatae corporis soluta quod nemo.

Description Lists

<dl>
  <dt>Lorem ipsum dolor</dt>
  <dd>Sit amet consectetur adipisicing elit.</dd>
  <dt>Eum, totam</dt>
  <dd>Impedit sul mobus qulits.</dd>
  <dt>Vitae fugit</dt>
  <dd>Id veniam veritatis dolorum numquam facilis nobis corrupti unde.</dd>
  <dt>Ad voluptatem odio culpa</dt>
  <dd>Reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.</dd>
  <dt>Architecto esse</dt>
  <dd>Illum qui quo quibusdam?</dd>
  <dt>Autem assumenda</dt>
  <dd>Nobis obcaecati molestias beatae corporis soluta quod nemo.</dd>
</dl>
Lorem ipsum dolor
Sit amet consectetur adipisicing elit.
Eum, totam
Impedit sul mobus qulits.
Vitae fugit
Id veniam veritatis dolorum numquam facilis nobis corrupti unde.
Ad voluptatem odio culpa
Reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.
Architecto esse
Illum qui quo quibusdam?
Autem assumenda
Nobis obcaecati molestias beatae corporis soluta quod nemo.
"Pretty" Description Lists
<dl class='pretty-dl'>
  <dt>Lorem ipsum dolor</dt>
  <dd>Sit amet consectetur adipisicing elit.</dd>
  <dt>Eum, totam</dt>
  <dd>Impedit sul mobus qulits.</dd>
  <dt>Vitae fugit</dt>
  <dd>Id veniam veritatis dolorum numquam facilis nobis corrupti unde.</dd>
  <dt>Ad voluptatem odio culpa</dt>
  <dd>Reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.</dd>
  <dt>Architecto esse</dt>
  <dd>Illum qui quo quibusdam?</dd>
  <dt>Autem assumenda</dt>
  <dd>Nobis obcaecati molestias beatae corporis soluta quod nemo.</dd>
</dl>
Lorem ipsum dolor
Sit amet consectetur adipisicing elit.
Eum, totam
Impedit sul mobus qulits.
Vitae fugit
Id veniam veritatis dolorum numquam facilis nobis corrupti unde.
Ad voluptatem odio culpa
Reiciendis porro perspiciatis expedita placeat provident, aliquid voluptas.
Architecto esse
Illum qui quo quibusdam?
Autem assumenda
Nobis obcaecati molestias beatae corporis soluta quod nemo.