NICE Design System home

Column List

The column list component shows a list of items in a condensed format.

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six

Overview

Column lists save space by breaking lists into 2 or 3 columns, depending on its configuration.

When to use

Use them to display a number of links horizontally.

For example:

  • Showing at a glance what drug class the drug is in.
  • Showing related drugs that people could use as an alternative.

When not use

Don't use it to jump down a page on long pages of content, use the In-Page navigation component.

How to use

Column lists fill the available horizontal space wherever they are show. They render an <ol> element containing any number of child items.

The list will show in a single column on mobile, with the number of columns used increasing as the viewport width increases, up to a maximum of 3 columns.

  • The child elements passed into the column list must contain at least one <li> element - no other elements are permitted.
  • The list items may contain links or plain text.
  • The standard variant of the column list uses three columns at the largest breakpoint and a boxed layout.
  • You can change the boxed layout to a plain layout.
  • You can limit the maximum number of columns to 2 instead of 3
  • The list can optionally be described with a heading, marked up using an aria-labelled by an attribute on the column list component corresponding to the heading's ID.

Column list variants

You can choose from the default column list and one other variation:

Default

Example: default column list

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
React
HTML

_10
<ColumnList>
_10
<li>One</li>
_10
<li>Two</li>
_10
<li>Three</li>
_10
<li>Four</li>
_10
<li>Five</li>
_10
<li>Six</li>
_10
</ColumnList>

The standard variant: 3 columns at the largest breakpoint, with a boxed layout.

Two columns

Example: column list with two columns

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
React
HTML

_10
<ColumnList columns={2}>
_10
<li>One</li>
_10
<li>Two</li>
_10
<li>Three</li>
_10
<li>Four</li>
_10
<li>Five</li>
_10
<li>Six</li>
_10
</ColumnList>

Plain

Example: plain column list

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
React
HTML

_10
<ColumnList plain>
_10
<li>One</li>
_10
<li>Two</li>
_10
<li>Three</li>
_10
<li>Four</li>
_10
<li>Five</li>
_10
<li>Six</li>
_10
</ColumnList>

Accessibility

Component meets WCAG AA guidelines for accessibility on:

Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).

UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research and evidence

No research done on the component at this time.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.