List

Figma Library	Local HTML	Global HTML	React
considering	stable	beta	beta

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

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}
/>

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.