List Group

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.

Active
LinkRouter Link
Item
Disabled
<i-list-group>
    <i-list-group-item active>Active</i-list-group-item>
    <i-list-group-item href="https://inkline.io">Link</i-list-group-item>
    <i-list-group-item :to="{ name: 'index' }">Router Link</i-list-group-item>
    <i-list-group-item>Item</i-list-group-item>
    <i-list-group-item disabled>Disabled</i-list-group-item>
</i-list-group>

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.

List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
<i-list-group color="light">
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
</i-list-group>

<i-list-group color="dark">
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
</i-list-group>

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.

List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
List Group Item
<i-list-group size="sm">
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
</i-list-group>

<i-list-group size="md">
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
</i-list-group>

<i-list-group size="lg">
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
</i-list-group>

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.

<i-list-group>
    <i-list-group-item :to="{ name: 'docs-components-list-group' }" exact-active-class="-active">
        Active Router Link
    </i-list-group-item>
    <i-list-group-item :to="{ name: 'index' }" active>
        Active Item
    </i-list-group-item>
</i-list-group>

Disabled State

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

Disabled List Group Item
<i-list-group>
    <i-list-group-item disabled>Disabled List Group Item</i-list-group-item>
</i-list-group>

Borderless Variant

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

List Group Item
List Group Item
List Group Item
List Group Item
<i-list-group :border="false">
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
    <i-list-group-item>List Group Item</i-list-group-item>
</i-list-group>

Item Content

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

List Group Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

List Group Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

List Group Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<i-list-group>
    <i-list-group-item>
        <h4>List Group Heading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </i-list-group-item>
    <i-list-group-item>
        <h4>List Group Heading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </i-list-group-item>
    <i-list-group-item>
        <h4>List Group Heading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </i-list-group-item>
</i-list-group>

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