Skip to main content

List

shadow

The List component is composed of multiple Item elements and can contain text, buttons, toggles, icons, thumbnails, and other supporting UI. It works best when related content needs a shared visual structure and spacing.

Basic usage

This example presents the list as a basic container for multiple items with consistent rhythm and spacing.

Inset

Setting the value of the inset property to true adds a margin to the element's surroundings to create a nested list.

Line separation

The lines property controls the separators between list items. Setting it to none removes the borders between list entries.

Attributes and Properties

No properties available for this component.

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--wje-list-inset-paddingThe padding of the list when it is inset.
--wje-list-border-radiusThe border radius of the list. Accepts any valid CSS length.
--wje-list-backgroundThe background of the list. Accepts any valid CSS color value.

Slots

NameDescription
defaultThe default slot for the list.