Lists
Provides styles for static list elements.
Demo
Apply the .list
class to the parent. Wrap children with span elements to allow for horizontal spacing.
Ordered List
Description List
Note we insert an extra div element to control flex layout and aid with vertical list item spacing.
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 ? '!variant-filled-primary' : '');
<a href={href} class="{classesActive(href)}">Page</a>