Show Sections Hide Sections
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>
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>
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>
"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>
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>
"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>