Lists

‹ Back

If you have a spot where lists need to look like lists, you can do so by either adding the content-lists to the wrapper, or the same class directly on the ul/ol:

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet
  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet
<div class="content-lists">
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
</div>

content-lists also supports a few type attributes on lists:

  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  1. Lorem
  2. ipsum
  3. dolor
  4. sit
  5. amet
  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<div class="content-lists">
  <ol type="a">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ol type="aup">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ol type="i">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ol type="iup">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <ul type="1">
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor</li>
    <li>sit </li>
    <li>amet</li>
  </ul>
</div>