Gradient
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
<div class="row">
<div class="col-sm-6">
<ul>
<li class="star mb-3 bg-gradient-primary p-3 b-r-20">
<i class="ti ti-circle-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-gradient-secondary p-3 b-r-20">
<i class="ti ti-corner-down-right text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-gradient-info p-3 b-r-20">
<i class="ti ti-hexagon-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-gradient-warning p-3 b-r-20">
<i class="ti ti-jewish-star-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
</ul>
</div>
<div class="col-sm-6">
<ul>
<li class="star mb-3 bg-gradient-success p-3 b-r-20">
<i class="ti ti-oval-vertical-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-gradient-danger p-3 b-r-20">
<i class="ti ti-arrow-big-right-lines-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-gradient-light p-3 b-r-20">
<i class="ti ti-diamond-filled text-dark"></i>
<span class="text-dark">Lorem ipsum dolor sit amet,</span>
</li>
<li class="star mb-3 bg-gradient-dark p-3 b-r-20">
<i class="ti ti-square-rounded-arrow-right-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
</ul>
</div>
</div>
Solid
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
<div class="col-sm-6">
<ul>
<li class="star mb-3 bg-primary p-3 b-r-20">
<i class="ti ti-medical-cross-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-secondary p-3 b-r-20">
<i class="ti ti-arrow-right-circle text-white f-s-16"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-info p-3 b-r-20">
<i class="ti ti-arrow-right text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-warning p-3 b-r-20">
<i class="ti ti-circle text-white"></i>
Lorem ipsum dolor sit amet,
</li>
</ul>
</div>
<div class="col-sm-6">
<ul>
<li class="star mb-3 bg-success p-3 b-r-20">
<i class="ti ti-square-rotated-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-danger p-3 b-r-20">
<i class="ti ti-square-rounded-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-light p-3 b-r-20">
<i class="ti ti-shield-filled text-dark"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="star mb-3 bg-dark p-3 b-r-20">
<i class="ti ti-rosette-filled text-white"></i>
Lorem ipsum dolor sit amet,
</li>
</ul>
</div>
Light
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
<div class="col-sm-6">
<ul>
<li class="diamond diamond-bullet-primary p-3 b-r-20 bg-light-primary">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="heart bg-light-secondary p-3 b-r-20 heart-bullet-secondary">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="burst burst-bullet-info bg-light-info p-3 b-r-20">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="star mb-3 bg-light-warning p-3 b-r-20">
<i class="ti ti-north-star text-warning"></i>
Lorem ipsum dolor sit amet,
</li>
</ul>
</div>
<div class="col-sm-6">
<ul>
<li class="corner-arrow mb-3 bg-light-success p-3 b-r-20">
<i class="ti ti-corner-down-right-double text-success"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="circle circle-bullet-danger bg-light-danger p-3 b-r-20">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="triangle triangle-bullet-primary bg-light-primary p-3 b-r-20">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="square square-bullet-dark bg-light-dark p-3 b-r-20">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
</ul>
</div>
Outline
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet,
<div class="col-sm-6">
<ul>
<li class="right-arrow mb-3 bg-outline-primary p-3 b-r-20">
<i class="ti ti-arrow-big-right-line-filled text-primary"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="line line-bullet-secondary bg-outline-secondary p-3 b-r-20">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="arrow arrow-bullet-info bg-outline-info p-3 b-r-20">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
<li class="plus plus-bullet-warning bg-outline-warning p-3 b-r-20 hover-none">
<span class="ms-3"> Lorem ipsum dolor sit amet, </span>
</li>
</ul>
</div>
<div class="col-sm-6">
<ul>
<li class="bg-outline-info p-3 b-r-20 mb-3">
<i class="ti ti-arrow-bar-right text-info f-s-16"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="bg-outline-danger p-3 b-r-20 mb-3">
<i class="ti ti-arrow-badge-right text-danger f-s-16"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="bg-outline-light p-3 b-r-20 mb-3">
<i class="ti ti-arrow-big-right text-light f-s-16"></i>
Lorem ipsum dolor sit amet,
</li>
<li class="bg-outline-dark p-3 b-r-20 mb-3">
<i class="ti ti-circle-chevron-right text-dark f-s-16"></i>
Lorem ipsum dolor sit amet,
</li>
</ul>
</div>