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.
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.
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