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.
Component Properties
The List group component takes a variety of properties to customize its appearance and content:
list_group_html_tag
(string) (default: 'ul'): The HTML tag for the list group.list_group_item_html_tag
(string) (default: 'li'): The HTML tag for the list group items.list_group_item_variants
(array) (default: []): An array of variants to apply to the list group items.list_group_utility_classes
(array) (default: []): An array of utility classes to apply to the list group.list_group_item_utility_classes
(array) (default: []): An array of utility classes to apply to the list group items.list_group_attributes
(array) (default: []): An array of attributes to apply to the list group.list_group_item_attributes
(array) (default: []): An array of attributes to apply to the list group items.list_group_items
(array) (default: []): An array of items to display in the list group.numbered
(bool) (default: false): Add numbers to the list group items.horizontal
(bool) (default: false): Display the list group items horizontally.horizontal_breakpoint
(string) (default: 'md'): The breakpoint to switch to a horizontal list group items.
Usage
{% include 'radix:list-group' with {
numbered: true,
horizontal: true,
horizontal_breakpoint: 'lg',
list_group_item_variants: 'danger',
list_group_items: [
{
value: 'First item',
},
{
value: 'Second item',
},
{
value: 'Third item',
},
]
} %}
Last updated
Was this helpful?