Posh UI | List Component

Numbered List

List Item One
List Item Two
List Item Three

                    
<ol>
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ol>

Reversed List

List Item One
List Item Two
List Item Three

                    
<ol reversed>
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ol>

Lower Roman List

List Item One
List Item Two
List Item Three

                    
<ol class="list-lower-roman">
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ol>

Lower Alpha List

List Item One
List Item Two
List Item Three

                    
<ol class="list-lower-alpha">
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ol>

Disc List

List Item One
List Item Two
List Item Three

                    
<ul class="list-disc">
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ul>

Circle List

List Item One
List Item Two
List Item Three

                    
<ul class="list-circle">
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ul>

Square List

List Item One
List Item Two
List Item Three

                    
<ul class="list-square">
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ul>

Category Checkbox List

Bobblehead's
Men's Clothing
Kid's Clothing

              
<ul>
  <li>
    <label class="cursor-ptr" for="bobbleheads">
      <input
        class="cursor-ptr mr-1"
        type="checkbox"
        name="category"
        id="bobbleheads"
      />
      Bobblehead's
    </label>
  </li>

  <li>
    <label class="cursor-ptr" for="mens-clothing">
      <input
        class="cursor-ptr mr-1"
        type="checkbox"
        name="category"
        id="mens-clothing"
      />
      Men's Clothing
    </label>
  </li>

  <li>
    <label class="cursor-ptr" for="kids-clothing">
      <input
        class="cursor-ptr mr-1"
        type="checkbox"
        name="category"
        id="kids-clothing"
      />
      Kid's Clothing
    </label>
  </li>
</ul>

Price Radio List

Price - Low to High
Price - High to Low

              
<ul>
  <li>
    <label class="cursor-ptr" for="low-to-high">
      <input
          class="cursor-ptr mr-1"
          type="radio"
          name="price"
          id="low-to-high"
      />
      Price - Low to High
    </label>
  </li>

  <li>
    <label class="cursor-ptr" for="high-to-low">
      <input
          class="cursor-ptr mr-1"
          type="radio"
          name="price"
          id="high-to-low"
      />
      Price - High to Low
    </label>
  </li>
</ul>

Notification Stacked List

                    
<ul class="stacked-list">
  <li class="shadow-light">
    <a href="#">
      New Notification 1
      <span class="translate-y">
        <i class="fas fa-times"></i>
      </span>
    </a>
  </li>

  <li class="shadow-light">
    <a href="#">
      New Notification 2
      <span class="translate-y">
        <i class="fas fa-times"></i>
      </span>
    </a>
  </li>

  <li class="shadow-light">
    <a class="viewed" href="#">
      Viewed Notification
      <span class="translate-y">
        <i class="fas fa-check"></i>
      </span>
    </a>
  </li>

  <li class="shadow-light">
    <a class="viewed" href="#">
      Viewed Notification
      <span class="translate-y">
        <i class="fas fa-check"></i>
      </span>
    </a>
  </li>
</ul>