Lists
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
Example
To create bulleted or numeric lists, use the
.list-disc
and
.list-decimal
utilities.
- Now this is a story all about how, my life got flipped turned upside down
- And I like to take a minute and sit right here
- I'll tell you how I became the prince of a town called Bel-Air
- Now this is a story all about how, my life got flipped turned upside down
- And I like to take a minute and sit right here
- I'll tell you how I became the prince of a town called Bel-Air
- Now this is a story all about how, my life got flipped turned upside down
- And I like to take a minute and sit right here
- I'll tell you how I became the prince of a town called Bel-Air
<ul class="list-disc list-inside">
<li>Now this is a story all about how,
my life got flipped turned upside down</li>
<li>And I like to take a minute and
sit right here</li>
<li>I'll tell you how I became the
prince of a town called Bel-Air</li>
</ul>
<br />
<ol class="list-decimal list-inside">
<li>Now this is a story all about how,
my life got flipped turned upside down</li>
<li>And I like to take a minute and
sit right here</li>
<li>I'll tell you how I became the
prince of a town called Bel-Air</li>
</ol>
<br />
<ul class="list-none list-inside">
<li>Now this is a story all about how,
my life got flipped turned upside down</li>
<li>And I like to take a minute and
sit right here</li>
<li>I'll tell you how I became the
prince of a town called Bel-Air</li>
</ul>List marker
Style the counters or bullets in lists using the
`marker`
modifier:
- FAQ
- License
- Terms & Conditions
<ul role="list" class="marker:text-indigo-600 list-disc ps-5
space-y-2 text-base">
<li>FAQ</li>
<li>License</li>
<li>Terms & Conditions</li>
</ul>List Group
The most basic list group is an unordered list with list items.
- Profile
- Settings
- Newsletter
<ul class="max-w-xs flex flex-col">
<li
class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium bg-white border border-gray-300 text-gray-600
-mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"
>
Profile
</li>
<li
class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium bg-white border border-gray-300 text-gray-600
-mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"
>
Settings
</li>
<li
class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium bg-white border border-gray-300 text-gray-600
-mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"
>
Newsletter
</li>
</ul>List group Active Items
Add
.active
to a
.list-group-item
to indicate the current active selection.
- Profile
- Settings
- Newsletter
<ul class="max-w-xs flex flex-col">
<li
class="active inline-flex items-center gap-x-2
py-3 px-4 text-base font-medium border border-indigo-600 text-white -mt-px
first:rounded-t-lg first:mt-0 last:rounded-b-lg bg-indigo-600"
>
Profile
</li>
<li
class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium bg-white border border-gray-300 text-gray-600
-mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"
>
Settings
</li>
<li
class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium bg-white border border-gray-300 text-gray-600
-mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"
>
Newsletter
</li>
</ul>Link
Add
.active
to a
.list-group-item
to indicate the current active selection.
<div class="max-w-xs flex flex-col">
<a
href="#"
class="active inline-flex items-center gap-x-2
py-3 px-4 text-base font-medium border border-indigo-600 text-white -mt-px
first:rounded-t-lg first:mt-0 last:rounded-b-lg bg-indigo-600"
>
Profile
</a>
<a
href="#"
class="inline-flex hover:bg-gray-200
items-center gap-x-2 py-3 px-4 text-base font-medium bg-white border
border-gray-300 text-gray-600 -mt-px first:rounded-t-lg first:mt-0
last:rounded-b-lg"
>
Settings
</a>
<a
href="#"
class="inline-flex items-center
hover:bg-gray-200 gap-x-2 py-3 px-4 text-base font-medium bg-white border
border-gray-300 text-gray-600 -mt-px first:rounded-t-lg first:mt-0
last:rounded-b-lg"
>
Newsletter
</a>
</div>Flush
Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
- Profile
- Settings
- Newsletter
<ul class="max-w-xs flex flex-col divide-y
divide-gray-300">
<li class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium">Profile</li>
<li class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium">Settings</li>
<li class="inline-flex items-center gap-x-2 py-3
px-4 text-base font-medium">Newsletter</li>
</ul>