BLACK FRIDAY SPECIAL!
Apply Coupon:BLFCM2022to Get 50% Flat Discount!🔥
Order List
<div class="list-style">
   <div class="list-style-one">
      <ul>
         <li><span>1</span> Lorem ipsum dolor sit amet</li>
         <li><span>2</span> Lorem ipsum dolor sit amet dolor sit</li>
         <li><span>3</span> Lorem ipsum dolor</li>
         <li><span>4</span> Lorem ipsum dolor sit</li>
      </ul>
   </div>
</div>
<!-- list-style-one -->
.list-style .list-style-one ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-one ul li span {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  line-height: 25px;
  margin-right: 13px;
}
Check List
<div class="list-style">
   <div class="list-style-two">
      <ul>
         <li>
            <i class="lni lni-check-box"></i> Lorem ipsum dolor sit amet
         </li>
         <li>
            <i class="lni lni-check-box"></i> Lorem ipsum dolor sit amet
            dolor sit
         </li>
         <li><i class="lni lni-check-box"></i> Lorem ipsum dolor</li>
         <li>
            <i class="lni lni-check-box"></i> Lorem ipsum dolor sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-two -->
.list-style .list-style-two ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-two ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  line-height: 25px;
  margin-right: 7px;
}
Info List
<div class="list-style">
   <div class="list-style-three">
      <ul>
         <li>
            <i class="lni lni-information"></i> Lorem ipsum dolor sit
            amet
         </li>
         <li>
            <i class="lni lni-information"></i> Lorem ipsum dolor sit
            amet dolor sit
         </li>
         <li><i class="lni lni-information"></i> Lorem ipsum dolor</li>
         <li>
            <i class="lni lni-information"></i> Lorem ipsum dolor sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-three -->
.list-style .list-style-three ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-three ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--info);
  line-height: 25px;
  margin-right: 6px;
}
Warning List
<div class="list-style">
   <div class="list-style-four">
      <ul>
         <li>
            <i class="lni lni-warning"></i> Lorem ipsum dolor sit amet
         </li>
         <li>
            <i class="lni lni-warning"></i> Lorem ipsum dolor sit amet
            dolor sit
         </li>
         <li><i class="lni lni-warning"></i> Lorem ipsum dolor</li>
         <li><i class="lni lni-warning"></i> Lorem ipsum dolor sit</li>
      </ul>
   </div>
</div>
<!-- list-style-four -->
.list-style .list-style-four ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-four ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--caution);
  line-height: 25px;
  margin-right: 6px;
}
Success List
<div class="list-style">
   <div class="list-style-five">
      <ul>
         <li>
            <i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
            sit amet
         </li>
         <li>
            <i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
            sit amet dolor sit
         </li>
         <li>
            <i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
         </li>
         <li>
            <i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
            sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-four -->
.list-style .list-style-five ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-five ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--success);
  line-height: 25px;
  margin-right: 7px;
}
Error List
<div class="list-style">
   <div class="list-style-six">
      <ul>
         <li>
            <i class="lni lni-cross-circle"></i> Lorem ipsum dolor sit
            amet
         </li>
         <li>
            <i class="lni lni-cross-circle"></i> Lorem ipsum dolor sit
            amet dolor sit
         </li>
         <li>
            <i class="lni lni-cross-circle"></i> Lorem ipsum dolor
         </li>
         <li>
            <i class="lni lni-cross-circle"></i> Lorem ipsum dolor sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-six-->
.list-style .list-style-six ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-six ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--error);
  line-height: 25px;
  margin-right: 7px;
}
Arrow List 1
<div class="list-style">
   <div class="list-style-seven">
      <ul>
         <li>
            <i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
            sit amet
         </li>
         <li>
            <i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
            sit amet dolor sit
         </li>
         <li>
            <i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
         </li>
         <li>
            <i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
            sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-seven-->
.list-style .list-style-seven ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-seven ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--success);
  line-height: 25px;
  margin-right: 7px;
}
Arrow List 2
<div class="list-style">
   <div class="list-style-eight">
      <ul>
         <li>
            <i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
            sit amet
         </li>
         <li>
            <i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
            sit amet dolor sit
         </li>
         <li>
            <i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
         </li>
         <li>
            <i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
            sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-eight-->
.list-style .list-style-eight ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-eight ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--info);
  line-height: 25px;
  margin-right: 7px;
}
Arrow List 3
<div class="list-style">
   <div class="list-style-nine">
      <ul>
         <li>
            <i class="lni lni-arrow-right"></i> Lorem ipsum dolor sit
            amet
         </li>
         <li>
            <i class="lni lni-arrow-right"></i> Lorem ipsum dolor sit
            amet dolor sit
         </li>
         <li><i class="lni lni-arrow-right"></i> Lorem ipsum dolor</li>
         <li>
            <i class="lni lni-arrow-right"></i> Lorem ipsum dolor sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-nine-->
.list-style .list-style-nine ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-nine ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  line-height: 25px;
  margin-right: 7px;
}
Social List
<div class="list-style">
   <div class="list-style-ten">
      <ul>
         <li>
            <i class="lni lni-facebook-original"></i> Lorem ipsum dolor
            sit amet
         </li>
         <li>
            <i class="lni lni-facebook-messenger"></i> Lorem ipsum dolor
            sit amet dolor sit
         </li>
         <li>
            <i class="lni lni-twitter-original"></i> Lorem ipsum dolor
         </li>
         <li>
            <i class="lni lni-instagram-original"></i> Lorem ipsum dolor
            sit
         </li>
      </ul>
   </div>
</div>
<!-- list-style-ten-->
.list-style .list-style-ten ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-ten ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  line-height: 25px;
  margin-right: 6px;
}
Styled List
<div class="list-style">
   <div class="list-style-eleven">
      <ul>
         <li>
            <i class="lni lni-star"></i> Lorem ipsum dolor sit amet
         </li>
         <li>
            <i class="lni lni-star"></i> Lorem ipsum dolor sit amet
            dolor sit
         </li>
         <li><i class="lni lni-star"></i> Lorem ipsum dolor</li>
         <li><i class="lni lni-star"></i> Lorem ipsum dolor sit</li>
      </ul>
   </div>
</div>
<!-- list-style-eleven-->
.list-style .list-style-eleven ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-eleven ul li i {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  line-height: 25px;
  margin-right: 6px;
}
Unordered List
<div class="list-style">
   <div class="list-style-twelve">
      <ul>
         <li><span></span> Lorem ipsum dolor sit amet</li>
         <li><span></span> Lorem ipsum dolor sit amet dolor sit</li>
         <li><span></span> Lorem ipsum dolor</li>
         <li><span></span> Lorem ipsum dolor sit</li>
      </ul>
   </div>
</div>
<!-- list-style-twelve-->
.list-style .list-style-twelve ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: var(--black);
}
.list-style .list-style-twelve ul li span {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  background-color: var(--black);
  margin-right: 6px;
}