Lists

Kelp includes styling for native ordered, unordered, and definition lists. It also includes classes for creating unstyled and inline lists.

Unordered Lists

Whale
Shark
Dolphin
- Smart
- Friend of humans

<ul>
	<li>Whale</li>
	<li>Shark</li>
	<li>
		Dolphin
		<ul>
			<li>Smart</li>
			<li>Friend of humans</li>
		</ul>
	</li>
</ul>

Ordered Lists

Merlin
Radagast
Gandalf
- Wizard
- Friend of the small folk

<ol>
	<li>Merlin</li>
	<li>Radagast</li>
	<li>
		Gandalf
		<ul>
			<li>Wizard</li>
			<li>Friend of the small folk</li>
		</ul>
	</li>
</ol>

Unstyled Lists

Use the .list-unstyled class to create a list without indentation or bullets. For semantic reasons, this should probably only be applied to unordered lists.

Wand
Potions
Wizard Staff

<ul class="list-unstyled">
	<li>Wand</li>
	<li>Potions</li>
	<li>Wizard Staff</li>
</ul>

Inline Lists

Use the .list-inline class to create a list where all of the items are inline and without bullets.

Wand
Potions
Wizard Staff

<ul class="list-inline">
	<li>Wand</li>
	<li>Potions</li>
	<li>Wizard Staff</li>
</ul>

This uses display: flex under-the-hood. You can use the .gap-* utility classes to adjust the amount of space between list items.

This
Iist
Is
Compact

This
Iist
Is
Spaced

<ul class="list-inline gap-3xs">
	<li>This</li>
	<li>Iist</li>
	<li>Is</li>
	<li>Compact</li>
</ul>

<ul class="list-inline gap-4xl">
	<li>This</li>
	<li>Iist</li>
	<li>Is</li>
	<li>Spaced</li>
</ul>

Definition Lists

Definition List: Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Here's another term: And here's the definition that would go with it.