List

Source API

The List component is a versatile tool for organizing and displaying items in a structured and sequential manner. It supports both ordered and unordered formats and can include form elements or visuals alongside text for enhanced functionality and design. With customizable styles and layouts, the List component adapts seamlessly to various use cases. To apply this component, add the .list class to an unordered/ordered list or even div element. And also, use the .item class for each list items.

Unordered List

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Ordered List

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

List Title

Lorem ipsum dolor sit amet

You can add the zebra-striping to a list by adding the .striped class and add the .hovered class to display a hover state on list items.

Striped List

Lorem ipsum dolor sit amet

Hovered List

Lorem ipsum dolor sit amet

Divided List

Lorem ipsum dolor sit amet

Lists can contain variety of form inputs.

reorder

clear

reorder

clear

reorder

clear

Also, Lists can contain variety of media elements and actions buttons.

Title Subtitle Lorem ipsum dolor sit amet.

Unordered list

list item 1
list item 2
- list item 2.1
- list item 2.2
- list item 2.3
list item 3

Ordered list

list item 1
list item 2
1. list item 2.1
2. list item 2.2
3. list item 2.3
list item 3

Description List

Coffee: - black hot drink
Milk: - white cold drink

Props
Default Class Name	Combinators
`list`	`.list`
`item`	`.list > .item`
`active`	`.list > .active.item`
`body`	`.list > .item > .body`
`title`	`.list > .item > .body > .title`
`subtitle`	`.list > .item > .body > .body`
`actions`	`.list > .item > .actions`
States	Combinators
`divided`	`.divided.list`
`hovered`	`.hovered.list`
`striped`	`.striped.list`