ListItem

An item (li) inside a List; plain li elements work too.

@ruckc/truss-ui Typography

Import

import { ListItem } from '@ruckc/truss-ui';

Playground

No interactive demo

This component is documented through its API reference below.

API

An item of a `List`. Plain `li` elements inside a `List` work too. `lead` adds a bold lead-in before the item text, inside the same `li`: `<ListItem lead="Tight scope.">A narrow problem…</ListItem>`. Without `lead` the output is the plain `li`.

Also accepts every attribute of HTMLLiAttributes, applied to the underlying element.

Prop	Type	Default	Description
`lead`	`string \| Snippet`	—	A bold lead-in rendered as `<strong class="lead">` before the children. A string is shown as text; a snippet renders rich content. The weight comes from `List`'s `leadWeight`.
`class`	`string`	`''`
`children` snippet	`Snippet`	—	Content, as a Svelte snippet.