# Lists

Styles for ordered, unordered and definition lists, including spacing and marker control.

## Usage

Apply list classes to standard `<ul>`/`<ol>` elements to get consistent spacing.

lists

Shows a list of related items in a specific order. List items are marked with numbers

Usage

@wmcadigital/ui-lists

Styles for ordered, unordered and bare lists with consistent spacing and markers.

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-lists

Using npm:

npm install @wmcadigital/ui-lists

Using yarn:

yarn add @wmcadigital/ui-lists

What this package provides

- `.ds-ordered-list` — numbered lists with automatic counters and spacing.
- `.ds-unordered-list` — bulleted lists with custom markers.
- `.ds-bare-list` — list without default markers (unstyled except spacing).
- `.ds-html ol` / `.ds-html ul` fallbacks — the package also targets raw `ol`/`ul` elements that do not already have design system classes to help consistency.

This is styling-only; import the CSS to use the classes.

Usage

Standard ordered list:

<ol class="ds-ordered-list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Standard unordered list:

<ul class="ds-unordered-list">
  <li>Item</li>
  <li>Item</li>
</ul>

Bare list (no marker):

<ul class="ds-bare-list">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

Notes:

Accessibility

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.