Description List

Material Design 3-styled description list web components (lit-material-description-list, lit-material-description-list-group) — term/description pairs.

1.4 KB gzipped
@lit-material/description-list 0.1.0
Renders on the server

Example

Install

npm install @lit-material/description-list @lit-material/tokens

import "@lit-material/description-list";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-description-list-group>`

One term/description pair within lit-material-description-list. Sets role="listitem" on itself (see that component for why this uses ARIA roles instead of native <dl>/<dt>/<dd>), and renders term/ definition roles internally for the pair itself.

Slots

Slot	Description
`term`	The term (a label, a field name).
default	The description.

CSS parts

Part	Description
`term`	The term's container.
`description`	The description's container.

`<lit-material-description-list>`

Groups lit-material-description-list-group elements — metadata display (a set of term/description pairs), distinct from lit-material-list's interactive, single-column item list and lit-material-data-table's columnar tabular data.

Properties

Property	Attribute	Type	Default	Description
`horizontal`	`horizontal`	`boolean`	`false`

Slots

Slot	Description
default	`lit-material-description-list-group` elements.

CSS parts

Part	Description
`list`	The container.

Source on GitHub npm