List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                listGroup: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<ul class="list-group">
    <li class="list-group-item">
        <div class="list-item-main-content">An item</div>
    </li>
    <li class="list-group-item">
        <div class="list-item-main-content">A second item</div>
    </li>
</ul>
NameDescription
.list-groupBase class of the list group wrapper
.list-group.list-group-flushApplies the flush style to the list group
.list-group.list-group-horizontalApplies horizontal listing to the list group
.list-group.list-group-separateApplies the separate style to the list group
.list-group.list-group-no-guttersRemoves gutters from the list group
.list-group.list-group-smApplies small spacing to the list group
.list-group.list-group-lgApplies large spacing to the list group
.list-group.list-group-xlgApplies xlg spacing to the list group
.list-group.list-group-2xlgApplies 2x-lg spacing to the list group
.list-group > .list-group-itemBase class of a singular item within the list group
.list-group > .list-group-item.list-group-item-actionApplies clickable event to a single item within the list group
.list-group > .list-group-item.activeApplies active state to a list item within the list group
.list-group > .list-group-item > .list-item-pre-contentBase class of the pre content within the list item
.list-group > .list-group-item > .list-item-main-contentBase class of the main content within the list item
.list-group > .list-group-item > .list-item-main-content.list-item-main-content-w-counterAdded to the main content within the list item to enable adding a counter before the main content
.list-group > .list-group-item > .list-item-side-contentBase class of the side content within the list item
Customize variables at:/library/extend/components/_list-group.scss
Component's defaults:/library/components/list-group/_defaults.scss
NameDefault valueNote
$list-group-colornull
$list-group-bgtransparent
$list-group-border-colorproperty.get(divider)Requires @use "@library/sass/modules/property";
$list-group-border-width$border-width
$list-group-border-radius8px
$list-group-item-padding-y.532rem
$list-group-item-padding-x.75rem
$list-group-item-padding-y-sm.75rem
$list-group-item-padding-x-sm.75rem
$list-group-item-font-size-sm$font-size-sm
$list-group-item-padding-y-lg0.688rem
$list-group-item-padding-x-lg1rem
$list-group-item-font-size-lg$font-size-lg
$list-group-item-padding-y-xlg1rem
$list-group-item-padding-x-xlg1.25rem
$list-group-item-font-size-xlg$font-size-lg
$list-group-item-padding-y-2xlg1.65rem
$list-group-item-padding-x-2xlg1.25rem
$list-group-item-font-size-2xlg$font-size-lg
$list-group-item-bg-scale-80%
$list-group-item-color-scale40%
$list-group-hover-bgproperty.get(menu-item-hover-bg)Requires @use "@library/sass/modules/property";
$list-group-active-colorproperty.get(menu-item-active-text-color)Requires @use "@library/sass/modules/property";
$list-group-active-bgproperty.get(menu-item-active-bg)Requires @use "@library/sass/modules/property";
$list-group-active-border-colorproperty.get(menu-item-active-border)Requires @use "@library/sass/modules/property";
$list-group-disabled-colorproperty.get(menu-item-disabled-color)Requires @use "@library/sass/modules/property";
$list-group-disabled-bgtransparent
$list-group-action-colorproperty.get(menu-item-text-color)Requires @use "@library/sass/modules/property";
$list-group-action-hover-colorproperty.get(menu-item-text-color)Requires @use "@library/sass/modules/property";
$list-group-action-active-colorproperty.get(menu-item-active-text-color)Requires @use "@library/sass/modules/property";
$list-group-action-active-bgproperty.get(menu-item-active-bg)Requires @use "@library/sass/modules/property";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}