Lists

Tailwind

Provides styles for static list elements.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Unordered

  • Jane ⋮
  • Michael ⋮
  • Susan ⋮

Ordered

  1. 1 Numbered Item A ⋮
  2. 2 Numbered Item B ⋮
  3. 3 Numbered Item C ⋮

Description

Item A
Description for A
 ⋮
Item B
Description for B
 ⋮
Item C
Description for C
 ⋮

Navigation

Getting Started

Apply the .list class to the parent. Wrap children with span elements to allow for horizontal spacing.

Unordered

html 
<ul class="list">
	<li>
		<span>(icon)</span>
		<span class="flex-auto">Skeleton</span>
	</li>
	<!-- ... -->
</ul>

Ordered

html 
<ol class="list">
	<li>
		<span>1.</span>
		<span class="flex-auto">Skeleton</span>
	</li>
	<!-- ... -->
</ol>

Description

Note we insert an extra div element to control flex layout and aid with vertical list item spacing.

html 
<dl class="list-dl">
	<div>
		<span class="badge bg-primary-500">💀</span>
		<span class="flex-auto">
			<dt>Title</dt>
			<dd>Description</dd>
		</span>
	</div>
	<!-- ... -->
</dl>

Navigation

While verbose, we do recommend you use all tags shown below to meet recommended accessibility guidelines.

html 
<nav class="list-nav">
	<!-- (optionally you can provde a label here) -->
	<ul>
		<li>
			<a href="/">
				<span class="badge bg-primary-500">💀</span>
				<span class="flex-auto">Skeleton</span>
			</a>
		</li>
		<!-- ... -->
	</ul>
</nav>

If you need to highlight an active Navigation List item, we recommend conditionally applying a background color to the anchor tag.

typescript 
$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
html 
<a {href} class="{classesActive(href)}">Page</a>