List

Options

Basic usage

html

Copy

By default, the contents of each list item are arranged in columns.

For rich text (containing em strong a etc), you should wrap the text in a span or div.

html

Copy

Icons

Set the same icon for all list items

html

Copy

Set a different icon for each list item

html

Copy

Indent

Supports the global indent options --indent-*, --v-indent-*, --h-indent-*, --no-indent, --no-v-indent, --no-h-indent at all sizes (xxhuge, xhuge, huge, xxlarge, xlarge, large, medium, small, xsmall, xxsmall).

html

Copy

html

Copy

Indent modifiers can also be applied to individual list items.

html

Copy

Gap

Use the global --gap-* and --no-gap modifiers to control the space between list items. Directional modifiers are also supported: --v-gap-*, --h-gap-*, --no-v-gap, and --no-h-gap.

Set the gap in both directions

html

Copy

For the default single-column layout, use a vertical gap modifier to change the space between items without changing the horizontal gap.

Set the vertical gap

html

Copy

Remove the vertical gap

html

Copy

Drag

Supports the global __drag options.

Basic example

Minimal example which would require javascript to implement drag and drop

html

Copy

Using html draggable and aria

Example using html draggable and aria attributes

html

Copy

Styles

Bulleted list

html

Copy

Numbered list

Use --numbered with an ordered list.

html

Copy

The native start attribute is supported for starting numbers from 1 to 40.

html

Copy

Lined

html

Copy

Section

html

Copy

Examples

Drag with switches and buttons

html

Copy

Lined, with sections, radio buttons with tags

html

Copy

Manifest

The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/3.40.1/ds-list/manifest.json?v=3.40.1

manifest.json

Copy