Table of Contents

Inline Block List

Normal Lists

Lists

Ordered Lists

Numerical
  1. List Item 1
  2. List Item 2
  3. List Item 3
Alphabetical Uppercase
  1. List Item 1
  2. List Item 2
  3. List Item 3
Alphabetical Lowercase
  1. List Item 1
  2. List Item 2
  3. List Item 3
Roman Numeral Uppercase
  1. List Item 1
  2. List Item 2
  3. List Item 3
Roman Numeral Lowercase
  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered Lists

disc
  • List Item 1
  • List Item 2
  • List Item 3
circle
  • List Item 1
  • List Item 2
  • List Item 3
square
  • List Item 1
  • List Item 2
  • List Item 3
none
  • List Item 1
  • List Item 2
  • List Item 3

[Top]


Nested Lists

Ordered List

  1. Lorem ipsum
  2. dolor sit amet,
    1. consectetur adipisicing elit,
    2. sed do eiusmod tempor incididunt ut
      1. labore et dolore magna aliqua.
      2. Ut enim ad minim veniam,
        1. quis nostrud exercitation
        2. ullamco laboris nisi ut
          1. aliquip ex ea commodo consequat.
          2. Duis aute irure dolor in reprehenderit
            1. in voluptate velit
            2. esse cillum dolore eu fugiat nulla pariatur.
              1. Excepteur sint occaecat
              2. cupidatat non proident,
                1. sunt in culpa qui
                2. officia deserunt mollit anim id est laborum.
              3. aliquip ex ea commodo consequat
            3. in voluptate velit
          3. Excepteur sint occaecat
        3. quis nostrud exercitation
      3. sunt in culpa qui
    3. officia deserunt mollit anim id est laborum.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Unordered List

  • Lorem ipsum
  • dolor sit amet,
    • consectetur adipisicing elit,
    • sed do eiusmod tempor incididunt ut
      • labore et dolore magna aliqua.
      • Ut enim ad minim veniam,
        • quis nostrud exercitation
        • ullamco laboris nisi ut
          • aliquip ex ea commodo consequat.
          • Duis aute irure dolor in reprehenderit
            • in voluptate velit
            • esse cillum dolore eu fugiat nulla pariatur.
              • Excepteur sint occaecat
              • cupidatat non proident,
                • sunt in culpa qui
                • officia deserunt mollit anim id est laborum.
              • aliquip ex ea commodo consequat
            • in voluptate velit
          • Excepteur sint occaecat
        • quis nostrud exercitation
      • sunt in culpa qui
    • officia deserunt mollit anim id est laborum.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Column Lists

<ul class="list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4">

Column List

  1. Lorem ipsum
  2. dolor sit amet,
  3. consectetur adipisicing elit,
  4. sed do eiusmod tempor incididunt ut
  5. labore et dolore magna aliqua.
  6. Ut enim ad minim veniam,
  7. quis nostrud exercitation
  8. ullamco laboris nisi ut
  9. aliquip ex ea commodo consequat.
  10. Duis aute irure dolor in reprehenderit
  11. in voluptate velit
  12. esse cillum dolore eu fugiat nulla pariatur.
  13. Excepteur sint occaecat
  14. cupidatat non proident,
  15. sunt in culpa qui
  16. officia deserunt mollit anim id est laborum.
  17. aliquip ex ea commodo consequat
  18. in voluptate velit
  19. Excepteur sint occaecat
  20. quis nostrud exercitation
  21. sunt in culpa qui
  22. officia deserunt mollit anim id est laborum.
  23. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Nested Column List

<ul>

<ul class="list--columns col-default-1 col-phone-2"></ul>

<ul class="list--columns col-default-2 col-phone-1 col-tablet-2"></ul>

</ul>

  1. Lorem ipsum
  2. dolor sit amet,
  3. consectetur adipisicing elit,
  4. sed do eiusmod tempor incididunt ut
    1. labore et dolore magna aliqua.
    2. Ut enim ad minim veniam,
    3. quis nostrud exercitation
    4. ullamco laboris nisi ut
      1. aliquip ex ea commodo consequat.
      2. Duis aute irure dolor in reprehenderit
      3. in voluptate velit
      4. esse cillum dolore eu fugiat nulla pariatur.
        1. Excepteur sint occaecat
        2. cupidatat non proident,
        3. sunt in culpa qui
        4. officia deserunt mollit anim id est laborum.
        5. aliquip ex ea commodo consequat
      5. in voluptate velit
      6. Excepteur sint occaecat
    5. quis nostrud exercitation
    6. sunt in culpa qui
  5. officia deserunt mollit anim id est laborum.
  6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Inline Block Lists

Lists

Ordered Lists

Numerical
  1. List Item 1
  2. List Item 2
  3. List Item 3
Alphabetical Uppercase
  1. List Item 1
  2. List Item 2
  3. List Item 3
Alphabetical Lowercase
  1. List Item 1
  2. List Item 2
  3. List Item 3
Roman Numeral Uppercase
  1. List Item 1
  2. List Item 2
  3. List Item 3
Roman Numeral Lowercase
  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered Lists

disc
  • List Item 1
  • List Item 2
  • List Item 3
circle
  • List Item 1
  • List Item 2
  • List Item 3
square
  • List Item 1
  • List Item 2
  • List Item 3
none
  • List Item 1
  • List Item 2
  • List Item 3

[Top]


Nested Lists

Ordered List

  1. Lorem ipsum
  2. dolor sit amet,
    1. consectetur adipisicing elit,
    2. sed do eiusmod tempor incididunt ut
      1. labore et dolore magna aliqua.
      2. Ut enim ad minim veniam,
        1. quis nostrud exercitation
        2. ullamco laboris nisi ut
          1. aliquip ex ea commodo consequat.
          2. Duis aute irure dolor in reprehenderit
            1. in voluptate velit
            2. esse cillum dolore eu fugiat nulla pariatur.
              1. Excepteur sint occaecat
              2. cupidatat non proident,
                1. sunt in culpa qui
                2. officia deserunt mollit anim id est laborum.
              3. aliquip ex ea commodo consequat
            3. in voluptate velit
          3. Excepteur sint occaecat
        3. quis nostrud exercitation
      3. sunt in culpa qui
    3. officia deserunt mollit anim id est laborum.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Unordered List

  • Lorem ipsum
  • dolor sit amet,
    • consectetur adipisicing elit,
    • sed do eiusmod tempor incididunt ut
      • labore et dolore magna aliqua.
      • Ut enim ad minim veniam,
        • quis nostrud exercitation
        • ullamco laboris nisi ut
          • aliquip ex ea commodo consequat.
          • Duis aute irure dolor in reprehenderit
            • in voluptate velit
            • esse cillum dolore eu fugiat nulla pariatur.
              • Excepteur sint occaecat
              • cupidatat non proident,
                • sunt in culpa qui
                • officia deserunt mollit anim id est laborum.
              • aliquip ex ea commodo consequat
            • in voluptate velit
          • Excepteur sint occaecat
        • quis nostrud exercitation
      • sunt in culpa qui
    • officia deserunt mollit anim id est laborum.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Column Lists

<ul class="list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4">

Column List

  1. Lorem ipsum
  2. dolor sit amet,
  3. consectetur adipisicing elit,
  4. sed do eiusmod tempor incididunt ut
  5. labore et dolore magna aliqua.
  6. Ut enim ad minim veniam,
  7. quis nostrud exercitation
  8. ullamco laboris nisi ut
  9. aliquip ex ea commodo consequat.
  10. Duis aute irure dolor in reprehenderit
  11. in voluptate velit
  12. esse cillum dolore eu fugiat nulla pariatur.
  13. Excepteur sint occaecat
  14. cupidatat non proident,
  15. sunt in culpa qui
  16. officia deserunt mollit anim id est laborum.
  17. aliquip ex ea commodo consequat
  18. in voluptate velit
  19. Excepteur sint occaecat
  20. quis nostrud exercitation
  21. sunt in culpa qui
  22. officia deserunt mollit anim id est laborum.
  23. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Nested Column List

<ul class="list--inline-block">

<ul class="list--columns col-default-1 col-phone-2"></ul>

<ul class="list--columns col-default-2 col-phone-1 col-tablet-2"></ul>

</ul>

  1. Lorem ipsum
  2. dolor sit amet,
  3. consectetur adipisicing elit,
  4. sed do eiusmod tempor incididunt ut
    1. labore et dolore magna aliqua.
    2. Ut enim ad minim veniam,
    3. quis nostrud exercitation
    4. ullamco laboris nisi ut
      1. aliquip ex ea commodo consequat.
      2. Duis aute irure dolor in reprehenderit
      3. in voluptate velit
      4. esse cillum dolore eu fugiat nulla pariatur.
        1. Excepteur sint occaecat
        2. cupidatat non proident,
        3. sunt in culpa qui
        4. officia deserunt mollit anim id est laborum.
        5. aliquip ex ea commodo consequat
      5. in voluptate velit
      6. Excepteur sint occaecat
    5. quis nostrud exercitation
    6. sunt in culpa qui
  5. officia deserunt mollit anim id est laborum.
  6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

The Code

HTML

<div class="row">
  <div class="col-default-12 col-tablet-6">
    <div>
      <h2>Normal Lists</h2>

      <h3>Lists</h3>

      <div>
        <!-- <h4>Definition list</h4>
        <dl>
          <dt>Definition List Title</dt>
          <dd>This is a definition list division.</dd>
        </dl> -->
        <h4>Ordered Lists</h4>
        <h5>Numerical</h5>
        <ol type="1">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Uppercase</h5>
        <ol type="A">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Lowercase</h5>
        <ol type="a">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Uppercase</h5>
        <ol type="I">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Lowercase</h5>
        <ol type="i">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h4>Unordered Lists</h4>
        <h5>disc</h5>
        <ul type="disc">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>circle</h5>
        <ul type="circle">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>square</h5>
        <ul type="square">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>none</h5>
        <ul type="none">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>
      <p><a href="#top">[Top]</a></p>

      <hr>

      <h3>Nested Lists</h3>
      <div>
        <h4>Ordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ol>
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ol>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ol>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ol>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ol>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ol>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ol>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ol>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ol>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ol>
                                </li>
                                <li>in voluptate velit</li>
                              </ol>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ol>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ol>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ol>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ol>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ol>
        </div>
        <h4>Unordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ul>
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ul>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ul>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ul>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ul>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ul>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ul>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ul>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ul>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ul>
                                </li>
                                <li>in voluptate velit</li>
                              </ul>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ul>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ul>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ul>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ul>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ul>
        </div>
      </div>

      <hr>

      <h3>Column Lists</h3>

      <p><code class="language-html">&lt;ul class=&quot;list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4&quot;&gt;</code></p>

      <h4>Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol class="list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4">
          <li>Lorem ipsum</li>
          <li>dolor sit amet,</li>
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut</li>
          <li>labore et dolore magna aliqua.</li>
          <li>Ut enim ad minim veniam,</li>
          <li>quis nostrud exercitation</li>
          <li>ullamco laboris nisi ut</li>
          <li>aliquip ex ea commodo consequat.</li>
          <li>Duis aute irure dolor in reprehenderit</li>
          <li>in voluptate velit</li>
          <li>esse cillum dolore eu fugiat nulla pariatur.</li>
          <li>Excepteur sint occaecat</li>
          <li>cupidatat non proident,</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>aliquip ex ea commodo consequat</li>
          <li>in voluptate velit</li>
          <li>Excepteur sint occaecat</li>
          <li>quis nostrud exercitation</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
      <h4>Nested Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol>
          <li>Lorem ipsum</li>
          <li>dolor sit amet,
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut
            <ol class="list--columns col-default-1 col-phone-2" style="background:rgba(255,0,0,0.125);">
              <li>labore et dolore magna aliqua.</li>
              <li>Ut enim ad minim veniam,
              <li>quis nostrud exercitation</li>
              <li>ullamco laboris nisi ut
                <ol>
                  <li>aliquip ex ea commodo consequat.</li>
                  <li>Duis aute irure dolor in reprehenderit
                  <li>in voluptate velit</li>
                  <li>esse cillum dolore eu fugiat nulla pariatur.
                    <ol class="list--columns col-default-2 col-phone-1 col-tablet-2" style="background:rgba(0,0,255,0.125);">
                      <li>Excepteur sint occaecat</li>
                      <li>cupidatat non proident,
                      <li>sunt in culpa qui</li>
                      <li>officia deserunt mollit anim id est laborum.</li>
                      <li>aliquip ex ea commodo consequat</li>
                    </ol>
                  </li>
                  <li>in voluptate velit</li>
                  <li>Excepteur sint occaecat</li>
                </ol>
              </li>
              <li>quis nostrud exercitation</li>
              <li>sunt in culpa qui</li>
            </ol>
          </li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
    </div>
  </div>
  <div class="col-default-12 col-tablet-6">
    <div>
      <h2>Inline Block Lists</h2>

      <h3>Lists</h3>

      <div>
        <!-- <h4>Definition list</h4>
        <dl>
          <dt>Definition List Title</dt>
          <dd>This is a definition list division.</dd>
        </dl> -->
        <h4>Ordered Lists</h4>
        <h5>Numerical</h5>
        <ol class="list--inline-block" type="1">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Uppercase</h5>
        <ol class="list--inline-block list--upper-alpha" type="A">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Lowercase</h5>
        <ol class="list--inline-block list--lower-alpha" type="a">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Uppercase</h5>
        <ol class="list--inline-block list--upper-roman" type="I">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Lowercase</h5>
        <ol class="list--inline-block list--lower-roman" type="i">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h4>Unordered Lists</h4>
        <h5>disc</h5>
        <ul class="list--inline-block" type="disc">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>circle</h5>
        <ul class="list--inline-block" type="circle">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>square</h5>
        <ul class="list--inline-block" type="square">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>none</h5>
        <ul class="list--inline-block" type="none">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>
      <p><a href="#top">[Top]</a></p>

      <hr>

      <h3>Nested Lists</h3>
      <div>
        <h4>Ordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ol class="list--inline-block">
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ol>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ol>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ol>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ol>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ol>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ol>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ol>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ol>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ol>
                                </li>
                                <li>in voluptate velit</li>
                              </ol>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ol>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ol>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ol>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ol>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ol>
        </div>
        <h4>Unordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ul class="list--inline-block">
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ul>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ul>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ul>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ul>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ul>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ul>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ul>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ul>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ul>
                                </li>
                                <li>in voluptate velit</li>
                              </ul>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ul>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ul>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ul>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ul>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ul>
        </div>
      </div>

      <hr>

      <h3>Column Lists</h3>

      <p><code class="language-html">&lt;ul class=&quot;list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4&quot;&gt;</code></p>

      <h4>Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol class="list--inline-block list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4">
          <li>Lorem ipsum</li>
          <li>dolor sit amet,</li>
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut</li>
          <li>labore et dolore magna aliqua.</li>
          <li>Ut enim ad minim veniam,</li>
          <li>quis nostrud exercitation</li>
          <li>ullamco laboris nisi ut</li>
          <li>aliquip ex ea commodo consequat.</li>
          <li>Duis aute irure dolor in reprehenderit</li>
          <li>in voluptate velit</li>
          <li>esse cillum dolore eu fugiat nulla pariatur.</li>
          <li>Excepteur sint occaecat</li>
          <li>cupidatat non proident,</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>aliquip ex ea commodo consequat</li>
          <li>in voluptate velit</li>
          <li>Excepteur sint occaecat</li>
          <li>quis nostrud exercitation</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
      <h4>Nested Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol class="list--inline-block">
          <li>Lorem ipsum</li>
          <li>dolor sit amet,
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut
            <ol class="list--columns col-default-1 col-phone-2" style="background:rgba(255,0,0,0.125);">
              <li>labore et dolore magna aliqua.</li>
              <li>Ut enim ad minim veniam,
              <li>quis nostrud exercitation</li>
              <li>ullamco laboris nisi ut
                <ol>
                  <li>aliquip ex ea commodo consequat.</li>
                  <li>Duis aute irure dolor in reprehenderit
                  <li>in voluptate velit</li>
                  <li>esse cillum dolore eu fugiat nulla pariatur.
                    <ol class="list--columns col-default-2 col-phone-1 col-tablet-2" style="background:rgba(0,0,255,0.125);">
                      <li>Excepteur sint occaecat</li>
                      <li>cupidatat non proident,
                      <li>sunt in culpa qui</li>
                      <li>officia deserunt mollit anim id est laborum.</li>
                      <li>aliquip ex ea commodo consequat</li>
                    </ol>
                  </li>
                  <li>in voluptate velit</li>
                  <li>Excepteur sint occaecat</li>
                </ol>
              </li>
              <li>quis nostrud exercitation</li>
              <li>sunt in culpa qui</li>
            </ol>
          </li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
    </div>
  </div>
</div>

CSS

ol:not([type]) {
  list-style-type: decimal;
}

ol:not([type]) ol:not([type]) {
  list-style-type: lower-alpha;
}

ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-roman;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: decimal;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-alpha;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-roman;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: decimal;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-alpha;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-roman;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: decimal;
}

ul:not([type]) {
  list-style-type: disc;
}

ul:not([type]) ul:not([type]) {
  list-style-type: circle;
}

ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: square;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: disc;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: circle;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: square;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: disc;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: circle;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: square;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: disc;
}

ol.list--inline-block,ol.list--inline-block ol {
  counter-reset: counter_list;
}

ol.list--inline-block li {
  display: inline-block;
  position: relative;
  width: 100%;
}

ol.list--inline-block li::before {
  text-align: right;
  counter-increment: counter_list;
  display: inline-block;
  min-width: 1.75em;
  padding-right: 0.25em;
  margin-left: -1.75em;
  counter-increment: counter_list;
}

ol.list--inline-block li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block ol ol ol li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol ol ol ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol ol ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block ol ol ol ol ol ol li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block[type="1"] li:before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block[type="A"].list--upper-alpha li:before {
  content: counter(counter_list, upper-alpha) ".";
}

ol.list--inline-block[type="a"].list--lower-alpha li:before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block[type="I"].list--upper-roman li:before {
  content: counter(counter_list, upper-roman) ".";
}

ol.list--inline-block[type="i"].list--lower-roman li:before {
  content: counter(counter_list, lower-roman) ".";
}

ul.list--inline-block li {
  display: inline-block;
  position: relative;
  width: 100%;
}

ul.list--inline-block li::before {
  position: absolute;
  left: -16px;
  top: 0;
}

ul.list--inline-block li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block ul ul ul li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul ul ul ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul ul ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block ul ul ul ul ul ul li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul ul ul ul ul ul ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul ul li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul ul ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul ul ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block[type="disc"] li:before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block[type="circle"] li:before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block[type="square"] li:before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block[type="none"] li:before {
  content: "";
}

.list--columns {
  -webkit-column-gap: 32px;
  -moz-column-gap: 32px;
  column-gap: 32px;
}

.list--columns.col-default-1 {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.list--columns.col-default-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.list--columns.col-default-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.list--columns.col-default-4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

.list--columns.col-default-5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

.list--columns.col-default-6 {
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
}

.list--columns.col-default-7 {
  -webkit-column-count: 7;
  -moz-column-count: 7;
  column-count: 7;
}

.list--columns.col-default-8 {
  -webkit-column-count: 8;
  -moz-column-count: 8;
  column-count: 8;
}

@media (min-width: 321px) {
  .list--columns.col-phone-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .list--columns.col-phone-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .list--columns.col-phone-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .list--columns.col-phone-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }

  .list--columns.col-phone-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }

  .list--columns.col-phone-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }

  .list--columns.col-phone-7 {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
  }

  .list--columns.col-phone-8 {
    -webkit-column-count: 8;
    -moz-column-count: 8;
    column-count: 8;
  }
}

@media (min-width: 769px) {
  .list--columns.col-tablet-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .list--columns.col-tablet-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .list--columns.col-tablet-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .list--columns.col-tablet-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }

  .list--columns.col-tablet-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }

  .list--columns.col-tablet-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }

  .list--columns.col-tablet-7 {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
  }

  .list--columns.col-tablet-8 {
    -webkit-column-count: 8;
    -moz-column-count: 8;
    column-count: 8;
  }
}

@media (min-width: 1025px) {
  .list--columns.col-desktop-small-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .list--columns.col-desktop-small-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .list--columns.col-desktop-small-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .list--columns.col-desktop-small-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }

  .list--columns.col-desktop-small-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }

  .list--columns.col-desktop-small-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }

  .list--columns.col-desktop-small-7 {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
  }

  .list--columns.col-desktop-small-8 {
    -webkit-column-count: 8;
    -moz-column-count: 8;
    column-count: 8;
  }
}

SASS (SCSS)

$page_gap: 16px;

ol:not([type]) {
  list-style-type: decimal;
  & & {
    list-style-type: lower-alpha;
  }
  & & & {
    list-style-type: lower-roman;
  }

  & & & & {
    list-style-type: decimal;
  }
  & & & & & {
    list-style-type: lower-alpha;
  }
  & & & & & & {
    list-style-type: lower-roman;
  }

  & & & & & & & {
    list-style-type: decimal;
  }
  & & & & & & & & {
    list-style-type: lower-alpha;
  }
  & & & & & & & & & {
    list-style-type: lower-roman;
  }

  & & & & & & & & & & {
    list-style-type: decimal;
  }
}

ul:not([type]) {
  list-style-type: disc;
  & & {
    list-style-type: circle;
  }
  & & & {
    list-style-type: square;
  }

  & & & & {
    list-style-type: disc;
  }
  & & & & & {
    list-style-type: circle;
  }
  & & & & & & {
    list-style-type: square;
  }

  & & & & & & & {
    list-style-type: disc;
  }
  & & & & & & & & {
    list-style-type: circle;
  }
  & & & & & & & & & {
    list-style-type: square;
  }

  & & & & & & & & & & {
    list-style-type: disc;
  }
}

// =============================================================================
// Inline Block Lists

ol.list--inline-block {
  &, & ol {
    counter-reset: counter_list;
  }

  & li {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  & li::before {
    counter-increment: counter_list;
    display: inline-block;
    margin-left: -1.75em;
    min-width: 1.75em;
    padding-right: 0.25em;
    text-align: right;
  }

  & li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  & ol ol ol li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol ol ol ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol ol ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  & ol ol ol ol ol ol li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  & ol ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol ol ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol ol ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  &[type="1"] li:before {
    content: counter(counter_list, decimal) ".";
  }
  &[type="A"].list--upper-alpha li:before {
    content: counter(counter_list, upper-alpha) ".";
  }
  &[type="a"].list--lower-alpha li:before {
    content: counter(counter_list, lower-alpha) ".";
  }
  &[type="I"].list--upper-roman li:before {
    content: counter(counter_list, upper-roman) ".";
  }
  &[type="i"].list--lower-roman li:before {
    content: counter(counter_list, lower-roman) ".";
  }
}

ul.list--inline-block {
  & li {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  & li::before {
    position: absolute;
    left: -16px;
    top: 0;
  }

  & li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  & ul ul ul li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul ul ul ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul ul ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  & ul ul ul ul ul ul li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul ul ul ul ul ul ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul ul ul ul ul ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  & ul ul ul ul ul ul ul ul ul li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul ul ul ul ul ul ul ul ul ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul ul ul ul ul ul ul ul ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  &[type="disc"] li:before {
    content: '\2022';
    font-size: 1.375rem;
  }
  &[type="circle"] li:before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  &[type="square"] li:before {
    content: '\ffed';
    font-size: 1rem;
  }
  &[type="none"] li:before {
    content: "";
  }
}

// =============================================================================
// List Columns

.list--columns {
  column-gap: $page_gap * 2;
}

.list--columns {
  &.col-default-1 { column-count: 1; }
  &.col-default-2 { column-count: 2; }
  &.col-default-3 { column-count: 3; }
  &.col-default-4 { column-count: 4; }
  &.col-default-5 { column-count: 5; }
  &.col-default-6 { column-count: 6; }
  &.col-default-7 { column-count: 7; }
  &.col-default-8 { column-count: 8; }
}

@media (min-width: 321px) {
  .list--columns {
    &.col-phone-1 { column-count: 1; }
    &.col-phone-2 { column-count: 2; }
    &.col-phone-3 { column-count: 3; }
    &.col-phone-4 { column-count: 4; }
    &.col-phone-5 { column-count: 5; }
    &.col-phone-6 { column-count: 6; }
    &.col-phone-7 { column-count: 7; }
    &.col-phone-8 { column-count: 8; }
  }
}

@media (min-width: 769px) {
  .list--columns {
    &.col-tablet-1 { column-count: 1; }
    &.col-tablet-2 { column-count: 2; }
    &.col-tablet-3 { column-count: 3; }
    &.col-tablet-4 { column-count: 4; }
    &.col-tablet-5 { column-count: 5; }
    &.col-tablet-6 { column-count: 6; }
    &.col-tablet-7 { column-count: 7; }
    &.col-tablet-8 { column-count: 8; }
  }
}

@media (min-width: 1025px) {
  .list--columns {
    &.col-desktop-small-1 { column-count: 1; }
    &.col-desktop-small-2 { column-count: 2; }
    &.col-desktop-small-3 { column-count: 3; }
    &.col-desktop-small-4 { column-count: 4; }
    &.col-desktop-small-5 { column-count: 5; }
    &.col-desktop-small-6 { column-count: 6; }
    &.col-desktop-small-7 { column-count: 7; }
    &.col-desktop-small-8 { column-count: 8; }
  }
}