List

Any information displayed or organized in a logical or linear formation

Usage

Use <ul> tag for unordered list and <ol> tag for ordered list.

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

<section class="flex flex-justify-content-start gap-column-small">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</section>

To change pointer style of list, add list-style-* class to <ul> tag.

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

<section class="flex flex-justify-content-start gap-column-small">
    <ul class="list-style-none">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <ul class="list-style-circle">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <ul class="list-style-square">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</section>

Appearance

To change appearance, add list class to <ul> or <ol> tag.

Alternate styles

Divider

Add list-divider class to tag where list class is located.

Item 1
Item 2
Item 3
Item 4

<section>
    <ul class="list list-style-none list-divider">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</section>

Striped

Add list-striped class to tag where list class is located.

Item 1
Item 2
Item 3
Item 4

    <ul class="list list-style-none list-striped">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</section>

Size

Add list-larger or list-smaller class where list class is located.

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

<section class="grid grid-2-columns grid-1-columns@m gap-column-small">
    <ul class="list list-style-none list-striped list-larger">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <ul class="list list-style-none list-striped list-smaller">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</section>

Variables

Coming soon

Graff documentation