List

The class goes on <ul> or <ol> and gives the list the right spacing and indentation. The variants remove the bullets visually without removing the list itself. The exception is Safari, where VoiceOver may not read a <ul> without visible bullets as a list. An <ol> and a list inside <nav> keep it. If the count matters to someone listening to the page, set role="list" on the <ul>.

How to use it

Example

Plain HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/list/list.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/lotek.css -->

<ul class="lt-list">
<li>Floor plans</li>
<li>Guard rotation for sub-level two</li>
<li>Camera map of the loading dock</li>
</ul>

<ol class="lt-list">
<li>State the objective</li>
<li>Set the budget</li>
<li>Order the job</li>
</ol>

<ul class="lt-list" data-variant="divided">
<li>Job 222-0481, deliver by 4 April</li>
<li>Job 222-0482, deliver by 4 May</li>
</ul>

TypeScript

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/list.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<ul {...lt.list({ variant: "divided" })}>
  <li>Job 222-0481</li>
  <li>Job 222-0482</li>
</ul>

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If the element is already there, set them on it. That is the way when you enhance HTML a server or a template has sent:

import { lt } from "@lo-tek/interfaces"

const list = document.querySelector<HTMLUListElement>("#attachments")

lt.setAttributes(list, lt.list({ variant: "divided" }))

kotlinx.html

// Once for the whole app, in the page template: every stylesheet, from the WebJar.
head { link(rel = "stylesheet", href = LotekWebJar.CSS) }

On a Kotlin or Java server, the same with kotlinx.html and lo-tek-kotlinx-html. The builder functions are in Lt, with an enum for each list of values:

import kotlinx.html.*
import no.lotek.*
import no.lotek.html.lt

fun FlowContent.lists() {
    ul {
        lt(Lt.list())
        li { +"Floor plans" }
        li { +"Guard rotation for sub-level two" }
        li { +"Camera map of the loading dock" }
    }
    ol {
        lt(Lt.list())
        li { +"State the objective" }
        li { +"Set the budget" }
        li { +"Order the job" }
    }
    ul {
        lt(Lt.list(variant = ListVariant.DIVIDED))
        li { +"Job 222-0481, deliver by 4 April" }
        li { +"Job 222-0482, deliver by 4 May" }
    }
}

data-variant	Used for
(omitted)	Bullets or numbers, with indentation
plain	No bullets, for lists that carry their own structure
divided	No bullets, with a line between the rows

Why the variant exists

Without plain, people would write <div> to get rid of the bullets, and the information that this is a list of four items is lost. The variant removes the look, not the meaning, with the Safari exception above.

Example

Plain HTML

<ul class="lt-list" data-variant="plain">
<li>
  <div class="lt-card">
    <h3 class="lt-card__title">Job 222-0481</h3>
    <p>Ordered 4 March.</p>
  </div>
</li>
<li>
  <div class="lt-card">
    <h3 class="lt-card__title">Job 222-0482</h3>
    <p>Waiting for a crew.</p>
  </div>
</li>
</ul>

Classes you can style

Class	What it is
.lt-list	The list. The variant comes from data-variant.

Variable	Default
--lt-list-gap	var(--lt-spacing-1), and var(--lt-spacing-2) in divided

--lt-list-gap is the space between the items, and becomes the space above and below each row in divided. The two have different defaults, so if you set the variable, your value applies in both places. See Customising.

Accessibility

• Use <ol> when the order matters, as in a recipe or a sequence of steps in a case. Use <ul> otherwise.
• Put nothing but <li> directly inside the list. A <div> in between breaks the link between the list and its items.
• Lists of links should be in a list even when they look like a menu. The screen reader then says how many choices there are.