Vue List group Component Styling

List group Styling

Learn how to customize the Vue List group component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

CSS variables

Vue list groups use local CSS variables on .list-group for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss

$list-group-tokens: defaults(
  (
    --cui-list-group-color: var(--cui-fg-body),
    --cui-list-group-bg: var(--cui-bg-body),
    --cui-list-group-border-color: var(--cui-border-color),
    --cui-list-group-border-width: var(--cui-border-width),
    --cui-list-group-border-radius: var(--cui-radius-5),
    --cui-list-group-item-padding-x: var(--cui-spacer),
    --cui-list-group-item-padding-y: var(--cui-spacer-3),
    --cui-list-group-action-color: var(--cui-fg-2),
    --cui-list-group-action-hover-color: var(--cui-fg-1),
    --cui-list-group-action-hover-bg: var(--cui-bg-1),
    --cui-list-group-action-active-color: var(--cui-fg-body),
    --cui-list-group-action-active-bg: var(--cui-bg-2),
    --cui-list-group-disabled-color: var(--cui-fg-3),
    --cui-list-group-disabled-bg: var(--cui-bg-body),
    --cui-list-group-active-color: var(--cui-primary-contrast),
    --cui-list-group-active-bg: var(--cui-primary-bg),
    --cui-list-group-active-border-color: var(--cui-primary-bg),
  ),
  $list-group-tokens
);

How to use CSS variables

<template>
  <CListGroup :style="vars">...</CListGroup>
</template>

<script setup>
const vars = {
  '--cui-list-group-color': '#333',
  '--cui-list-group-bg': '#f8f9fa',
}
</script>

Sass loops

Deprecated in v6.0.0

Loop that generates the deprecated colour classes for .list-group-items. Each class sets the same generic --cui-theme-* tokens that .theme-{color} sets, which is why the two spellings render identically — the item, its .active state and .list-group-item-action all read those tokens directly. They ship in the opt-in coreui-legacy.css, so a build that leaves that stylesheet out drops them.

scss

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
@each $state in map.keys($theme-colors) {
  .list-group-item-#{$state} {
    @include theme-tokens($state);
  }
}