Component Listing

LISTS

Lists are a simple way of displaying data and elements in a table format.
To use these list elements in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/list/list.css")

Spaced Lists

This is typically used to display information as pointers one below the other in a column.

Spaced Lists

Perfumes(EDT/EDP)
Body Mists
Deodorants / Roll-Ons


<div class="spaced-list-container m-1">
    <div class="list-heading mb-2"><h2>Spaced Lists</h2></div>
    <ul>
        <li class="list-item gray-text">Perfumes(EDT/EDP)</li>
        <li class="list-item gray-text">Body Mists</li>
        <li class="list-item gray-text">Deodorants / Roll-Ons</li>
    </ul>
</div>

Stacked Lists

This is used to display a group of information as a single list item where multiple list items are stacked one below the other.

Stacked list

WOMENS FRAGRANCES
- Perfumes(EDT/EDP)
- Body Mists
- Deodorants / Roll-Ons
MENS FRAGRANCES
- Perfumes(EDT/EDP)
- Body Mists
- Deodorants / Roll-Ons
- Colognes / After Shaves


<div class="stacked-list-container container">
    <ul><div class="list-heading m-1"><h2>Stacked list</h2></div>
        <li class="list-item-heading box-shadow p-2 m-1">WOMENS FRAGRANCES
            <ul class="list-item-stacked">
                <li class="list-item gray-text">Perfumes(EDT/EDP)</li>
                <li class="list-item gray-text">Body Mists</li>
                <li class="list-item gray-text">Deodorants / Roll-Ons</li>
            </ul>
        </li>                     
        <li class="list-item-heading box-shadow p-2 m-2">MENS FRAGRANCES
            <ul class="list-item-stacked">
                <li class="list-item gray-text">Perfumes(EDT/EDP)</li>
                <li class="list-item gray-text">Body Mists</li>
                <li class="list-item gray-text">Deodorants / Roll-Ons</li>
                <li class="list-item gray-text">Colognes / After Shaves</li>
            </ul>
        </li>
    </ul>
</div>