Provides styles for static list elements.

Source Page Source


Unordered List

  • Kathleen Hansen
  • Mary Hammes
  • Mildred Koelpin

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

Ordered List

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

Description List

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

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

Navigation List

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

To highlight active state, we recommend conditionally applying a background color to the anchor tag.

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