List Group

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

Basic Example

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

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.

Color Variants

The list group component comes with a predefined set of basic color variants. You can set the color of a list group using the color property.

Size Variants

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.

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, the list group item will be converted into a router-link or nuxt-link. You can use the active-class and exact-active-class properties and set them to -active when using it as a routing component.

Disabled State

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

Borderless Variant

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

Item Content

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

Configuration

Props

Use props to modify the component’s design and behavior.

• Property

  border

  TypeBoolean

  Defaulttrue
  Description Display the list group border
• Property

  color

  Type'light' | 'dark'

  Default'light'
  Description The color variant of the list group
• Property

  size

  Type'sm' | 'md' | 'lg'

  Default'md'
  Description The size variant of the list group

Slots

Use slots to insert custom content into well-defined component locations.

• Property

  default
  Description Slot for default list group content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

• Property

  ----background

  Valuecolor('white')
  Description The background of the list group component
• Property

  ----background--active

  Valuecolor('primary')
  Description The background of the list group component when active
• Property

  ----border-top-color

  Valuecolor('light')
  Description The border top color of the list group component
• Property

  ----border-right-color

  Valuecolor('light')
  Description The border right color of the list group component
• Property

  ----border-bottom-color

  Valuecolor('light')
  Description The border bottom color of the list group component
• Property

  ----border-left-color

  Valuecolor('light')
  Description The border left color of the list group component
• Property

  ----border-color

  Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
  Description The border color of the list group component
• Property

  ----border-color--active

  Valuecolor('primary-55')
  Description The border-color of the list group component
• Property

  ----border-style

  Valuesolid
  Description The border style of the list group component
• Property

  ----border-top-width

  Valuevar(--border-top-width)
  Description The border top width of the list group component
• Property

  ----border-right-width

  Valuevar(--border-right-width)
  Description The border right width of the list group component
• Property

  ----border-bottom-width

  Valuevar(--border-bottom-width)
  Description The border bottom width of the list group component
• Property

  ----border-left-width

  Valuevar(--border-left-width)
  Description The border left width of the list group component
• Property

  ----border-width

  Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
  Description The border width of the list group component
• Property

  ----border-top-left-radius

  Valuevar(--border-top-left-radius)
  Description The border top left radius of the list group component
• Property

  ----border-top-right-radius

  Valuevar(--border-top-right-radius)
  Description The border top right radius of the list group component
• Property

  ----border-bottom-right-radius

  Valuevar(--border-bottom-right-radius)
  Description The border bottom right radius of the list group component
• Property

  ----border-bottom-left-radius

  Valuevar(--border-bottom-left-radius)
  Description The border bottom left radius of the list group component
• Property

  ----border-radius

  Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
  Description The border radius of the list group component
• Property

  ----color

  Valuecontrast-color($color-light)
  Description The color of the list group component item
• Property

  ----color--active

  Valuecontrast-color($color-primary)
  Description The color of the list group component item when active
• Property

  ----color--disabled

  Valuevar(--text-muted)
  Description The color of the list group component item when disabled
• Property

  ----font-size

  Valuefont-size()
  Description The font size of the list group component
• Property

  ----padding-top

  Valuevar(--padding-top)
  Description The padding top of the list group component
• Property

  ----padding-right

  Valuevar(--padding-right)
  Description The padding right of the list group component
• Property

  ----padding-bottom

  Valuevar(--padding-bottom)
  Description The padding bottom of the list group component
• Property

  ----padding-left

  Valuevar(--padding-left)
  Description The padding left of the list group component
• Property

  ----padding

  Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
  Description The padding of the list group component