In Review

List

The List component organises text and links in a simple vertical format, supporting bullets, numbers, and spacing options.

Variants

Without decorator

Item 1
Item 2
Item 3

<ul class="gi-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

{{ govieList({ "items": ["Item 1","Item 2","Item 3"]}) }}

import { List } from '@govie-ds/list';

<List items={['Item 1', 'Item 2', 'Item 3']} />

Bullet

Item 1
Item 2
Item 3

<ul class="gi-list-bullet">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

{{ govieList({ "items": ["Item 1","Item 2","Item 3"], "type": "bullet"}) }}

import { List, TypeEnum } from '@govie-ds/list';

<List items={['Item 1', 'Item 2', 'Item 3']} type={TypeEnum.Bullet} />

Number

Item 1
Item 2
Item 3

<ul class="gi-list-number">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

{{ govieList({ "items": ["Item 1","Item 2","Item 3"], "type": "number"}) }}

import { List, TypeEnum } from '@govie-ds/list';

<List items={['Item 1', 'Item 2', 'Item 3']} type={TypeEnum.Number} />

Spaced

constructing, altering or repairing
pipelines, reservoirs, water mains or wells
painting or decorating the inside or the external surfaces

<ul class="gi-list gi-list-spaced">
  <li>constructing, altering or repairing</li>
  <li>pipelines, reservoirs, water mains, wells, sewers or industriali>
  <li>painting or decorating the inside or the external surfaces</li>
</ul>

{{ govieList({ 
    "items": ["constructing, altering or repairing", "pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence", "painting or decorating the insid or orue
 })
}}

import { List } from '@govie-ds/list';

<List
    items={['constructing, altering or repairing','pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence','painting o or decoratinged
/>

Links

<ul class="gi-list-bullet gi-list-spaced">
  <li>constructing, altering or repairing</li>
  <li>pipelines, reservoirs, water mains, wells, sewers or industriali>
  <li>painting or decorating the inside or the external surfaces</li>
</ul>

{{ govieList({ 
    "items": [{"href": "/", "label": "Link 1"}, {"href": "/", "label": "Link 2"}, {"href": "/", "label": "Link 3"}], 
    "spaced": true,
    "type": "bullet"
 })
}}

import { List, TypeEnum } from '@govie-ds/list';
import { Link } from '@govie-ds/link';

<List
items={[
    <Link href="/">Link 1</Link>,
    <Link href="/">Link 2</Link>,
    <Link href="/">Link 3</Link>,
]}
spaced
type={TypeEnum.Bullet}
/>

Usage

Best Practices

When to use this component

Use the List component when you need to display a series of related items, such as text or links, in an organized format. It's useful for lists where items can be plain text or link, and you can customize the list style with type options like bullet, number, or none. If spacing between items is needed, the spaced option can be used.

When not to use this component

Avoid using the List component if you require a layout that's more complex than a simple vertical list, or when items need to be displayed in a non-linear format like a grid. If the list items demand heavy customization or interaction beyond links or simple text, consider other components.

Status

Figma Library	Considering
Local HTML	Stable
Global HTML	Beta
Global React	Beta