Inkline

List Group

List groups are flexible components used for displaying a list of related content.

Example

List groups support any content inside of them. Take advantage of their flexibility to display list of items properly, as well as vertical navigation.

List Group Example

Behind the scenes, the <i-list-group-item> is converted into a <router-link> if it has the :to property, or a plain <a> tag if it has a href property. Otherwise, it uses a simple <div> tag.

Sizes

You're able to use the size modifier to control the padding of your list groups, using one of the available sizes: sm, md, and lg. The default size is set to md.

List Group Sizes

Active State

You can control the active state of your <i-list-group-item> using the active property. If you're providing a :to property, converting it into a router-link, you can use the active-class and exact-active-class properties and set them to -active.

List Group Active State

Disabled State

You can control the disabled state of your <i-list-group-item> using the disabled property.

List Group Disabled State

List Group Border

You can disable the border of your list group by setting the bordered property to false.

List Group Border

Item Content

The <i-list-group-item> accepts any type of content, allowing you to create large sized list group items.

List Group Item Content

Component API

Here you can find a list of the various customization options you can use for the list group components as props, as well as available slots.

List Group API
List Group Item API

Sass Variables

Here you can find a list of the Sass variables you can use for the list group components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

List Group

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!