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

1. Merlin
2. Radagast
3. 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>

Item Spacing

You can control the space between list items (<li>) by pairing the .stack layout class and the .gap-* utility classes on your list element.

• Merlin
• Gandalf
• Radagast

<ul class="stack gap-4xs">
	<li>Merlin</li>
	<li>Gandalf</li>
	<li>Radagast</li>
</ul>

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

You can create an inline list with the .list-inline class.

• Wand
• Potions
• Wizard Staff

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

You can control space between list items with the .gap-* utility classes. The row-gap property is always half of the column-gap property set by the .gap-* class.

• Whale
• Shark
• Dolphin

• Merlin
• Gandalf
• Radagast

<ul class="list-inline gap-4xs">
	<li>Whale</li>
	<li>Shark</li>
	<li>Dolphin</li>
</ul>

<ul class="list-inline gap-4xl">
	<li>Merlin</li>
	<li>Gandalf</li>
	<li>Radagast</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.

<dl>
    <dt>Definition List</dt>
    <dd>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).</dd>

    <dt>Here's another term</dt>
    <dd>And here's the definition that would go with it.</dd>
</dl>