List Group (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.

🔗 External documentation.

            id: list_group
label: 'List Group'
description: '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. '
homepage: 'https://getbootstrap.com/docs/4.6/components/list-group/'
variants:
    default:
        id: default
        label: Default
        description: 'The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.'
    flush:
        id: flush
        label: Flush
        description: 'Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).'
    horizontal:
        id: horizontal
        label: Horizontal
        description: 'Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Currently horizontal list groups cannot be combined with flush list groups.'
slots:
    items:
        id: items
        label: Items
        description: 'A list of List Group Items patterns.'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': list_group
            items:
                -
                    '@component': list_group_item
                    content: 'The current link item'
                    active: true
                -
                    '@component': list_group_item
                    content: 'A second link item'
                -
                    '@component': list_group_item
                    content: 'A third link item'
                -
                    '@component': list_group_item
                    content: 'A fourth link item, with a link'
                    url: '#'
                -
                    '@component': list_group_item
                    content: 'The disabled link item'
                    disabled: true