Skip to main content

Lists

Classes to have an unordered and ordered list, with the possibility of adding sublists.

Disordered list​

  • This is an disordered list 1
  • This is an disordered list 2
  • This is an disordered list 3
  • This is an disordered list 4
  • This is an disordered list 5
<ul class="list disordered">
  <li>...</li>
</ul>

Ordered list​

  1. This is an disordered list 1
  2. This is an disordered list 2
  3. This is an disordered list 3
  4. This is an disordered list 4
  5. This is an disordered list 5
<ol class="list ordered">
  <li>...</li>
</ol>

Disordered list with sub list​

  • This is an disordered list 1
  • This is an disordered list 2
    • This is an disordered list 1
    • This is an disordered list 2
    • This is an disordered list 3
  • This is an disordered list 3
  • This is an disordered list 4
  • This is an disordered list 5
<ul class="list ordered">
  <li>
    ...
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

Ordered list with sub list​

  1. This is an disordered list 1
  2. This is an disordered list 2
    1. This is an disordered list 1
    2. This is an disordered list 2
    3. This is an disordered list 3
  3. This is an disordered list 3
  4. This is an disordered list 4
  5. This is an disordered list 5
<ol class="list ordered">
  <li>
    ...
    <ol>
      <li>...</li>
    </ol>
  </li>
</ol>

List with separation​

  • This is an ordered list 1
  • This is an ordered list 2
  • This is an ordered list 3
  • This is an ordered list 4
  • This is an ordered list 5
<ul class="list disordered list-separation">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

List with background​

  • This is an ordered list 1
  • This is an ordered list 2
  • This is an ordered list 3
  • This is an ordered list 4
  • This is an ordered list 5
  <ul class="list disordered list-bg">
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>

Todo list​

If you're creating a to-do list for your website, you can add the todo-list class to use this design. It's clear and very useful.

<ul class="list disordered todo-list">
  <li>
    <input type="checkbox" />
    <span contentEditable>...</span>
    <div class="dropdown is-hovered">
      <div class="dropdown-wrap">
        <span class="wrap-text">
          <i class="bi bi-three-dots-vertical" />
        </span>
        <div class="dropdown-content">
          <a href="#" class="dropdown-item">
            ...
          </a>
        </div>
      </div>
    </div>
  </li>
</ul>