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

  1. Now this is a story all about how, my life got flipped turned upside down
  2. And I like to take a minute and sit right here
  3. 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 pl-5 space-y-2 ">
  <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  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  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  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  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  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  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.

Flush

Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).