Styleguides

Shared Assets & Docs

Menu

Unstyled Lists

This is what the default lists look like without any modifying classes.

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>
    Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>
    Nulla volutpat aliquam velit
    <ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ol>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

<dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Unordered and Ordered List Variations

Here are some common variations for <ul> and <ol>.

.no-bullets

Remove the default bullets and spacing from lists.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  4. Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
<ol class="no-bullets">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>
    Nulla volutpat aliquam velit
    <ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ol>
  </li>
  <li>
    Faucibus porta lacus fringilla vel
    <ul class="no-bullets">
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>
  </li>
</ol>

.horizontal-list

Inlines the list items.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="horizontal-list">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

.horizontal-spaced-list

Inlines the list items and adds some default spacing.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="horizontal-spaced-list">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

.horizontal-divided-list

Inlines the list items and adds some dividers.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="horizontal-divided-list">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

.divided-list

Add dividing rules between each list item.

  • Lorem ipsum
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Phasellus iaculis
  • Nulla volutpat
  • Vestibulum laoreet porttitor sem
<ul class="divided-list">
  <li>Lorem ipsum</li>
  <li>
    Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
  <li>Vestibulum laoreet porttitor sem</li>
</ul>

.divided-list.small-divided-list

Adding .small-divided-list narrows the spacing between each list item.

  • Lorem ipsum
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Phasellus iaculis
  • Nulla volutpat
  • Vestibulum laoreet porttitor sem
<ul class="divided-list small-divided-list">
  <li>Lorem ipsum</li>
  <li>
    Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
  <li>Vestibulum laoreet porttitor sem</li>
</ul>

Definition List Variations

Here are some common variations using the <dl> element.

.icon-dl

A definition list where each <dt> is replaced by an icon.

Specialty
Internal Medicine
Distance
1.4 Miles Away
Address
3636 S. Sherwood Forest Blvd.
Baton Rouge, LA 70816
<dl class="icon-dl">
  <dt>
    <span class="icon-replace" title="Specialty">
      <i class="icon-stethescope"></i><span>Specialty</span>
    </span>
  </dt>
  <dd>Internal Medicine</dd>
  <dt>
    <span class="icon-replace" title="Distance">
      <i class="icon-marker"></i><span>Distance</span>
    </span>
  </dt>
  <dd>1.4 Miles Away</dd>
  <dt>
    <span class="icon-replace" title="Address">
      <i class="icon-envelope"></i><span>Address</span>
    </span>
  </dt>
  <dd>3636 S. Sherwood Forest Blvd.</dd>
  <dd>Baton Rouge, LA 70816</dd>
</dl>

.inline-dl

A definition list where each pair of <dt> and <dd> are inline.

Specialty
Internal Medicine
Phone
(225) 590-3054
<dl class="inline-dl">
  <dt>Specialty</dt>
  <dd>Internal Medicine</dd>
  <dt>Phone</dt>
  <dd>(225) 590-3054</dd>
</dl>

.inline-dl.icon-dl

An inline definition list where each <dt> is replaced by an icon.

Specialty
Internal Medicine
Phone
(225) 590-3054
<dl class="inline-dl icon-dl">
  <dt>
    <span class="icon-replace" title="Specialty">
      <i class="icon-stethescope"></i><span>Specialty</span>
    </span>
  </dt>
  <dd>Internal Medicine</dd>
  <dt>
    <span class="icon-replace" title="Phone">
      <i class="icon-phone"></i><span>Phone</span>
    </span>
  </dt>
  <dd>(225) 590-3054</dd>
</dl>

.horizontal-dl

A definition list where the <dt> is floated to the left on tablet and desktop devices.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl class="horizontal-dl">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

.horizontal-dl.icon-dl

A horizontal definition list where each <dt> is replaced by an icon.

Specialty
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Distance
Donec id elit non mi porta gravida at eget metus.
Address
Etiam porta sem malesuada magna mollis euismod.
<dl class="horizontal-dl icon-dl">
  <dt>
    <span class="icon-replace" title="Specialty">
      <i class="icon-stethescope"></i><span>Specialty</span>
    </span>
  </dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dt>
    <span class="icon-replace" title="Distance">
      <i class="icon-marker"></i><span>Distance</span>
    </span>
  </dt>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>
    <span class="icon-replace" title="Address">
      <i class="icon-envelope"></i><span>Address</span>
    </span>
  </dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>