Lists

Automatically included in all.css and elements.css. This stylesheet provides styles for static list elements.

ts 
import '@brainandbones/skeleton/styles/elements/lists.css';

Examples

Unordered

  • 💀 Item A ⋮
  • 💀 Item B ⋮
  • 💀 Item C ⋮

Ordered

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

Description

💀
Item A
Description for A
 ⋮
💀
Item B
Description for B
 ⋮

Navigation

Usage

Use semantic list HTML elements, add the .list class, then ensure you wrap children with span elements allow for flex row layout styling.

Unordered

html 
<ul class="list">
    <li>
        <span>💀</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.

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

Global Styles

Use your global stylesheet to update all instances of this element.

css 
.list,
.list-dl,
.list-nav ul {
	@apply space-y-4;
}

Classes

List

Class Description
.listClass for defining a unordered or ordered list.
.list-dlClass for defining a description list.
.list-navClass for defining a navigation list.