- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
- list-borderless
- list-borderless
- list-borderless
- list-borderless
- List
- List
- List
- List
- List-bordered
- List-bordered
- List-bordered
- List-bordered
- List hover with link
- List hover with link
- List hover with link
- List hover with link
- List active
- List hover
- List
- List hover
💻 HTML Code
- list-borderless
- list-borderless
- list-borderless
- list-borderless
- List
- List
- List
- List
- List hover with link
- List hover with link
- List hover with link
- List hover with link
- List hover 2
- List hover 2
- List hover 2
- List hover 2
- List active
- List hover
- List
- List hover
🔗 Link rules
When your list contains links or interactive elements, make sure to wrap them inside
.list-link.
This class ensures that padding and spacing are applied correctly on the link itself,
not on .list-item.
📏 Sizes
These classes apply only to lists. Each size includes the base list style and its own spacing variables.
.list
.list-sm
.list-md
.list-lg
🎨 Colors
Choose the list color by applying the corresponding class to your element.
.list-{color}
⚙️ Variables CSS
| Variable | Description |
|---|---|
--list-bg-color |
Background color of the list container. |
--list-border-color |
Border color of the list container. |
--list-border-radius |
Corner radius of the list container. |
--list-border-style |
Style of the list border. |
--list-border-width |
Thickness of the list border. |
--list-border-width-inside-hover |
Border thickness applied inside list items on hover. |
--list-column-gap |
Gap between list columns. |
--list-inline-gap |
Gap between list items arranged inline. |
--list-item-active-bg-color |
Background color of list items when active. |
--list-item-border-color |
Border color applied to list items. |
--list-item-border-style |
Border style applied to list items. |
--list-item-border-width |
Border width applied to list items. |
--list-item-hover-bg-color |
Background color of list items on hover. |
--list-item-padding |
Default padding applied to list items. |
--list-item-padding-lg |
Padding for large-sized list items. |
--list-item-padding-md |
Padding for medium-sized list items. |
--list-item-padding-sm |
Padding for small-sized list items. |
--list-text-color |
Text color used inside the list. |