List

Import

import { List, ListItem } from '@zeal-ui/core';

import { List, ListItem } from '@zeal-ui/core';

Usage

Ordered list

There are many variations of passages of Lorem Ipsum available.
The majority have suffered alteration in some form, by injected humour, or randomised words.
Which don't look even slightly believable.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.

Editable Code

<List type="ol" styleType="upper-roman">
    <ListItem>There are many variations of passages of Lorem Ipsum available.</ListItem>
    <ListItem>
        The majority have suffered alteration in some form, by injected humour, or randomised words.
    </ListItem>
    <ListItem>Which don't look even slightly believable.</ListItem>
    <ListItem>
        All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.
    </ListItem>
</List>;

<List type="ol" styleType="upper-roman">
    <ListItem>There are many variations of passages of Lorem Ipsum available.</ListItem>
    <ListItem>
        The majority have suffered alteration in some form, by injected humour, or randomised words.
    </ListItem>
    <ListItem>Which don't look even slightly believable.</ListItem>
    <ListItem>
        All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.
    </ListItem>
</List>;

Unordered list

There are many variations of passages of Lorem Ipsum available.
The majority have suffered alteration in some form, by injected humour, or randomised words.
Which don't look even slightly believable.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.

Editable Code

<List styleType="circle">
    <ListItem>There are many variations of passages of Lorem Ipsum available.</ListItem>
    <ListItem>
        The majority have suffered alteration in some form, by injected humour, or randomised words.
    </ListItem>
    <ListItem>Which don't look even slightly believable.</ListItem>
    <ListItem>
        All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.
    </ListItem>
</List>;

<List styleType="circle">
    <ListItem>There are many variations of passages of Lorem Ipsum available.</ListItem>
    <ListItem>
        The majority have suffered alteration in some form, by injected humour, or randomised words.
    </ListItem>
    <ListItem>Which don't look even slightly believable.</ListItem>
    <ListItem>
        All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.
    </ListItem>
</List>;

Stacked list

There are many variations of passages of Lorem Ipsum available.
The majority have suffered alteration in some form, by injected humour, or randomised words.
Which don't look even slightly believable.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.

Editable Code

<List type="stacked">
    <ListItem>There are many variations of passages of Lorem Ipsum available.</ListItem>
    <ListItem>
        The majority have suffered alteration in some form, by injected humour, or randomised words.
    </ListItem>
    <ListItem>Which don't look even slightly believable.</ListItem>
    <ListItem>
        All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.
    </ListItem>
</List>;

<List type="stacked">
    <ListItem>There are many variations of passages of Lorem Ipsum available.</ListItem>
    <ListItem>
        The majority have suffered alteration in some form, by injected humour, or randomised words.
    </ListItem>
    <ListItem>Which don't look even slightly believable.</ListItem>
    <ListItem>
        All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.
    </ListItem>
</List>;

List with links

Editable Code

<List type="link">
    <ListItem>
        <a href="#" alt="dummyLink">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a>
    </ListItem>
    <ListItem>
        <a href="#" alt="dummyLink">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a>
    </ListItem>
    <ListItem>
        <a href="#" alt="dummyLink">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a>
    </ListItem>
</List>;

<List type="link">
    <ListItem>
        <a href="#" alt="dummyLink">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a>
    </ListItem>
    <ListItem>
        <a href="#" alt="dummyLink">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a>
    </ListItem>
    <ListItem>
        <a href="#" alt="dummyLink">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a>
    </ListItem>
</List>;

Props

List

type

Description

It is used to set the type of the list.

Values

ol | stacked | link

styleType

Description

It is used to set the type of the style for the list items in the ordered and unordered list.

Values

String with valid list-style-type value.

ListItem

active

Description

It is used to set link as active.

Values

Boolean value.

Note

To learn about customizing the components check this section of the docs.