Ordered / Unordered Lists


Tech Sheet

Unordered / Ordered Lists

Content above the list

  • Item 1
  • Item 2
    • SubItem 2.1
    • SubItem 2.2
      • Part 2.2.1
      • Part 2.2.2
    • SubItem 2.3
  • Item 4
  • Item 5

Content between the lists

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Content below the list

Different Font Sizes

Content above the list

  • Small Item 1
  • Small Item 2
  • Small Item 3
  • Small Item 4
  • Small Item 5
  1. Large Item 1
  2. Large Item 2
  3. Large Item 3
  4. Large Item 4
  5. Large Item 5

Lists Below Header

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Content below the list

  1. Section
  2. Section
    1. Subsection
    2. Subsection
      1. Part
      2. Part
    3. Subsection
  3. Section
  4. Section

Double Spaced

  • Item 1
  • Item 2
  • Item 3

Souce Code

<h4 id="lists">Unordered / Ordered Lists</h4>
Content above the list
<ul>
   <li>Item 1</li>
   <li>Item 2
     <ul>
       <li>SubItem 2.1</li>
       <li>SubItem 2.2
        <ul>
           <li>Part 2.2.1</li>
           <li>Part 2.2.2</li>
        </ul>
        </li>
       <li>SubItem 2.3</li>
    </ul>
  </li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>
Content between the lists
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ol>
Content below the list

<h4>Different Font Sizes</h4>
Content above the list
<ul class="text-sm">
   <li>Small Item 1</li>
   <li>Small Item 2</li>
   <li>Small Item 3</li>
   <li>Small Item 4</li>
   <li>Small Item 5</li>
</ul>

<ol class="text-lg">
   <li>Large Item 1</li>
   <li>Large Item 2</li>
   <li>Large Item 3</li>
   <li>Large Item 4</li>
   <li>Large Item 5</li>
</ol>

<h4 id="lists">Lists Below Header</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>
Content below the list
<ol>
   <li>Section</li>
   <li>Section
     <ol>
       <li>Subsection</li>
       <li>Subsection
        <ol>
           <li>Part</li>
           <li>Part</li>
        </ol>
        </li>
       <li>Subsection</li>
    </ol>
  </li>
   <li>Section</li>
   <li>Section</li>
</ol>

<hr class="bg-transparent w-full my-2" />
<h4 id="lists">Double Spaced</h4>
<ul>
   <li class="my-2">Item 1</li>
   <li class="my-2">Item 2</li>
   <li class="my-2">Item 3</li>
</ul>