Lists

Different types of lists.

Unordered Lists

Bullet points.

  • This is an unordered list.
  • Use it for bullet points in a story. Use it for bullet points in a story. Use it for bullet points in a story.
  • This is still an unordered list.
  • Lists can be nested
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
				
<ul>
    <li>This is an unordered list.</li>
    <li>Use it for bullet points in a story.</li>
    <li>This is still an unordered list.</li>
    <li>
        Lists can be nested
        <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>
</ul>

Ordered Lists

For use when there are numbered sets or a numbered hierarchy.

Here is a list following a paragraph.

  1. This is an ordered list.
  2. Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.
  3. Useful for top 10, etc.
  4. Lists can be nested
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  5. Lists can be nested
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Useful for top 10, etc.
  7. Useful for top 10, etc.
  8. Useful for top 10, etc.
  9. Useful for top 10, etc.
  10. Useful for top 10, etc.
  11. Useful for top 10, etc.
  12. Useful for top 10, etc.
  13. Useful for top 10, etc.

Here is a list following a paragraph with the .list--letters class.

  1. This is an ordered list.
  2. Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.
  3. Useful for top 10, etc.
  4. Useful for top 10, etc.
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  5. Useful for top 10, etc.
  6. Useful for top 10, etc.
  7. Useful for top 10, etc.
				
<ol>
    <li>This is an ordered list.</li>
    <li>Use it for steps in a process.</li>
    <li>Useful for top 10, etc.</li>
</ol>

<ol class="list--letters">
    <li>This is an ordered list.</li>
    <li>Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.</li>
    <li>Useful for top 10, etc.</li>
</ol>

Definition Lists

A description list, with terms and descriptions.

Coffee
Black hot drink
Milk
White cold drink
				
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Horizontal Definition List

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Coffee
Black hot drink
Milk
White cold drink
				
<dl class="dl-horizontal">
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Social Lists

For listing social accounts.

				
<ul class="list--social">
    <li><a href="https://www.twitter.com/zlwise" target="_blank"><span class="icon-twitter"></span></a></li>
    <li><a href="http://zachwise.com" target="_blank"><span class="icon-link"></span></a></li>
    <li><a href="https://github.com/zachwise/" target="_blank"><span class="icon-github"></span></a></li>
    <li><a href="https://instagram.com/zachwise" target="_blank"><span class="icon-instagram"></span></a></li>
    <li><a href="https://www.linkedin.com/in/zachwise/" target="_blank"><span class="icon-linkedin"></span></a></li>
</ul>