LISTS
LISTS : Lists are used to display items in an orderly manner.
COMPONENT DEMO
Ordered and Unordered List Variants:
- Part 1
- Part 2
- Part 3
- Part 1
- Part 2
- Part 3
- Part 1
- Part 2
- Part 3
- Part 1
- Part 2
- Part 3
- Part 1
- Part 2
- Part 3
- Part 1
- Part 2
- Part 3
<!-- Numbered Ordered List -->
<ol class="gentle-list-container list-type-num m-3">
<li>Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
</ol>
<!-- Alphabetic Ordered List -->
<ol class="gentle-list-container list-type-alpha m-3">
<li>Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
</ol>
<!-- Roman Numbered Ordered List -->
<ol class="gentle-list-container list-type-roman m-3">
<li>Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
</ol>
<!-- Disc type Unordered List -->
<ul class="gentle-list-container list-type-disc m-3">
<li>Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
</ul>
<!-- Square type unordered-list -->
<ul class="gentle-list-container list-type-square m-3">
<li>Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
</ul>
<!-- Circle type unordered list -->
<ul class="gentle-list-container list-type-circle m-3">
<li>Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
</ul>
NESTED LIST
- 10th Boards
-
12th Boards
- Engineering Entrances
- Medical Entrances
- Arts Graduate Study
- B.Com Graduate Study
- Sleep
-
Daily activities
- Eat
- Play
- Study
<!-- NESTED LIST -->
<ul class="gentle-list-container gentle-category-container m-3">
<div class="list-title my-1">PREPARATION FOR</div>
<li class="m-3">10th Boards</li>
<li class="m-3">
<div>12th Boards</div>
<!-- INSIDE LIST -->
<ul>
<li class="mx-3 my-2">Engineering Entrances</li>
<li class="mx-3 my-2">Medical Entrances</li>
</ul>
</li>
<li class="m-3">Arts Graduate Study</li>
<li class="m-3">B.Com Graduate Study</li>
</ul>
<ul class="gentle-list-container list-type-disc">
<!-- Nested List -->
<li>Sleep</li>
<li>
Daily activities
<!-- inside list -->
<ul class="list-type-circle">
<li class="mx-3">Eat</li>
<li class="mx-3">Play</li>
<li class="mx-3">Study</li>
</ul>
</li>
</ul>
SPACED LIST
-
Dog Name
Dog Likes
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda et, impedit fugit iste nisi, asperiores maxime beatae mollitia rem aperiam similique quos. Nesciunt quidem quis reiciendis, totam corporis quasi hic!
-
Dog Name
Dog Likes
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda et, impedit fugit iste nisi, asperiores maxime beatae mollitia rem aperiam similique quos. Nesciunt quidem quis reiciendis, totam corporis quasi hic!
-
Dog Name
Dog Likes
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda et, impedit fugit iste nisi, asperiores maxime beatae mollitia rem aperiam similique quos. Nesciunt quidem quis reiciendis, totam corporis quasi hic!
<!-- SPACED LIST -->
<ul class="gentle-spaced-items-container">
<li class="list-item spaced-item">
<div class="list-item-container">
<div class="upper-content">
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<div class="content">
<p class="text-bold">Dog Name</p>
<p class="text-info">Dog Likes</p>
</div>
</div>
<div class="lower-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda et, impedit fugit iste nisi, asperiores maxime
beatae mollitia rem aperiam similique quos. Nesciunt
quidem quis reiciendis, totam corporis quasi hic!
</p>
</div>
<div class="lower-content"></div>
</div>
</li>
<li class="list-item spaced-item">
<div class="list-item-container">
<div class="upper-content">
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<div class="content">
<p class="text-bold">Dog Name</p>
<p class="text-info">Dog Likes</p>
</div>
</div>
<div class="lower-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda et, impedit fugit iste nisi, asperiores maxime
beatae mollitia rem aperiam similique quos. Nesciunt
quidem quis reiciendis, totam corporis quasi hic!
</p>
</div>
<div class="lower-content"></div>
</div>
</li>
<li class="list-item spaced-item">
<div class="list-item-container">
<div class="upper-content">
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<div class="content">
<p class="text-bold">Dog Name</p>
<p class="text-info">Dog Likes</p>
</div>
</div>
<div class="lower-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda et, impedit fugit iste nisi, asperiores maxime
beatae mollitia rem aperiam similique quos. Nesciunt
quidem quis reiciendis, totam corporis quasi hic!
</p>
</div>
<div class="lower-content"></div>
</div>
</li>
</ul>
STACKED LIST
-
Dog Name
Dog Likes
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda et, impedit fugit iste nisi, asperiores maxime beatae mollitia rem aperiam similique quos. Nesciunt quidem quis reiciendis, totam corporis quasi hic!
-
Dog Name
Dog Likes
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda et, impedit fugit iste nisi, asperiores maxime beatae mollitia rem aperiam similique quos. Nesciunt quidem quis reiciendis, totam corporis quasi hic!
-
Dog Name
Dog Likes
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda et, impedit fugit iste nisi, asperiores maxime beatae mollitia rem aperiam similique quos. Nesciunt quidem quis reiciendis, totam corporis quasi hic!
<!-- STACKED LIST -->
<ul class="gentle-stacked-items-container">
<li class="list-item">
<div class="list-item-container">
<div class="upper-content">
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<div class="content">
<p class="text-bold">Dog Name</p>
<p class="text-info">Dog Likes</p>
</div>
</div>
<div class="lower-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda et, impedit fugit iste nisi, asperiores maxime
beatae mollitia rem aperiam similique quos. Nesciunt
quidem quis reiciendis, totam corporis quasi hic!
</p>
</div>
<div class="lower-content"></div>
</div>
</li>
<li class="list-item">
<div class="list-item-container">
<div class="upper-content">
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<div class="content">
<p class="text-bold">Dog Name</p>
<p class="text-info">Dog Likes</p>
</div>
</div>
<div class="lower-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda et, impedit fugit iste nisi, asperiores maxime
beatae mollitia rem aperiam similique quos. Nesciunt
quidem quis reiciendis, totam corporis quasi hic!
</p>
</div>
<div class="lower-content"></div>
</div>
</li>
<li class="list-item">
<div class="list-item-container">
<div class="upper-content">
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<div class="content">
<p class="text-bold">Dog Name</p>
<p class="text-info">Dog Likes</p>
</div>
</div>
<div class="lower-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda et, impedit fugit iste nisi, asperiores maxime
beatae mollitia rem aperiam similique quos. Nesciunt
quidem quis reiciendis, totam corporis quasi hic!
</p>
</div>
<div class="lower-content"></div>
</div>
</li>
</ul>