# @nice-digital/nds-column-list

> Column List component for the NICE Design System

Latest version **4.1.0** (published 2026-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nice-digital/nds-column-list
pnpm add @nice-digital/nds-column-list
yarn add @nice-digital/nds-column-list
bun add @nice-digital/nds-column-list
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2026-02-05 |
| First published | 2022-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Chris Barker |
| Maintainers | martingallagher1980, ditprogrammatic, josealmeida, mark-nice, nansenst, colin.mazurkiewicz, imranazad, dalenice, johndavey72, aboutabecca, johnholland-nice, tresa_k, shilpaunni, tinaday, staceyjones43 |
| Keywords | column, list |

## Links

- npm: https://www.npmjs.com/package/@nice-digital/nds-column-list
- Repository: https://github.com/nice-digital/nice-design-system
- Homepage: https://design-system.nice.org.uk/
- Issues: https://github.com/nice-digital/nice-design-system/issues
- npm.io page: https://npm.io/package/@nice-digital/nds-column-list

## Dependencies (1)

- [@nice-digital/nds-core](https://npm.io/package/@nice-digital/nds-core.md) ^4.1.0

## Recent versions

- 4.1.0 (latest) — 2026-02-05
- 4.0.18-alpha.0 (alpha) — 2026-02-03
- 4.0.17-alpha-node-update.0 — 2025-11-20
- 4.0.16 — 2025-10-24
- 4.0.15 — 2025-09-29
- 4.0.15-alpha.27 — 2025-09-29
- 4.0.14 — 2024-09-17
- 4.0.14-alpha.0 — 2024-08-30
- 4.0.13 — 2024-08-14
- 4.0.13-alpha.0 — 2024-08-14
- 4.1.2-alpha.0 — 2024-08-08
- 4.1.1-alpha.0 — 2024-07-22
- 4.1.0-alpha.0 — 2024-07-16
- 4.0.12 — 2024-03-01
- 4.0.11 — 2024-02-28
- … 43 more at https://npm.io/package/@nice-digital/nds-column-list/versions

## README

# `@nice-digital/nds-column-list`

> Column List component for the NICE Design System

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-column-list --save
```

## Usage

### React

Import the `ColumnList` component from the package and use within JSX:

```jsx
import React from "react";
import { ColumnList } from "@nice-digital/nds-column-list";

<ColumnList>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>

```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### plain

- Type: `boolean` (default: false)

Whether to render a plain list (as opposed to a boxed one)

```js
<ColumnList plain>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>
```

##### columns

- Type: `number` (default: 3)

The maximum number of columns to render. The only permitted values are 2 or 3.

```js
<ColumnList columns={2}>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>
```

##### children

- Type: `React.ReactNode`

As the ColumnList component renders an `ol` element, it must have at least one `<li>`
child.

```js
<ColumnList>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>
```

###### className

- Type: `string`

Any additional className will be merged on to the containing `<ol>` element.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-column-list/scss/column-list';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:


#### Standard variant (3 columns, boxed layout)
```html
<ol class="column-list column-list--boxed">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ol>
```

#### Alternative variant (2 columns, plain layout)
```html
<ol class="column-list column-list--plain column-list--two-columns">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ol>
```

---
_Source: https://npm.io/package/@nice-digital/nds-column-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._