Lists

Default

Use .list-item-text for one or two lines, with optional icons.

• Simple item
• Item with detailsSecondary text

<ul class="list">
	<li class="list-item"><span class="list-item-text">Simple item</span></li>
	<li class="list-item">
		<span class="icon"><!-- Icon --></span>
		<span class="list-item-text">
			<span>Item with details</span>
			<small class="text-muted">Secondary text</small>
		</span>
	</li>
</ul>

Interactive

Use native links or buttons. Mark the current destination with .is-active and aria-current.

<nav class="list" aria-label="Example navigation">
	<a class="list-item is-active" href="/current" aria-current="page">
		<span class="list-item-text">Current item</span>
	</a>
	<a class="list-item" href="/next">
		<span class="list-item-text">Next item</span>
	</a>
</nav>

CSS Variables

--list-padding: var(--spacer-0);
--list-border-width: var(--border-width);
--list-border-color: var(--border-color);
--list-border-radius: var(--border-radius);
--list-item-bg-color: var(--bg-surface);
--list-item-padding-y: var(--spacer-2);
--list-item-padding-x: var(--spacer-3);
--list-item-gap: var(--spacer-2);
--list-item-active-color: var(--action-color);
--list-item-hover-color: var(--action-color);
--list-item-transition-duration: var(--transition-duration);
--list-item-transition-easing: var(--transition-easing);