Setting the list type

To create bulleted or numeric lists, use the `<ul>` or `<ol>` tag with `.list` class.

Use the `.list-item` for the children.

Use the `.unmarker` class to create unmarked lists.

Custom marker

To use customs markers, simply add `.marker` class in `.list-item` element.

List bordered

To create bordered lists, simply use the `.list-bordered` class with Layout Group .

List hoverable

To create hoverable lists, simply use the `.list-hoverable` class.

List striped

To create striped lists, simply use the `.list-striped` class.

Icons

You can add icons from any library. In the example below was used Bootstrap Icons .

Active / Disabled

Use the class `.active` to indicate an active element.

Use the `disabled` attribute to indicate a disabled item.

Use `<a>` to create list group items with cursor pointer.

Horizontal

To create horizontal lists, simply use the list classes with Layout Group .

Badges

Add badges to any list group item to show unread counts, activity, and more.

Invoice

A simple list group example with a highlighted footer.