From b8cef42ce9098ea4b8282da2e3aa8182c8070451 Mon Sep 17 00:00:00 2001 From: Bartek Date: Tue, 4 Aug 2026 16:07:03 +0200 Subject: [PATCH] Add docs page for the List group component - Add `docs/pages/ui/components/list-group.mdx` covering the base list, flush, action items, active and disabled states, section headers, hoverable rows with actions, transparent, numbered, horizontal, and contextual colors. - Add examples for a list inside a card (`card-list-group`) and a notifications list. - Register "List group" in `docs.json` between "Inline player" and "Modal". Co-Authored-By: Claude Opus 5 --- docs/pages/ui/components/list-group.mdx | 121 ++++++++++++++++++++++++ shared/data/docs.json | 4 + 2 files changed, 125 insertions(+) create mode 100644 docs/pages/ui/components/list-group.mdx diff --git a/docs/pages/ui/components/list-group.mdx b/docs/pages/ui/components/list-group.mdx new file mode 100644 index 000000000..a7cd098c1 --- /dev/null +++ b/docs/pages/ui/components/list-group.mdx @@ -0,0 +1,121 @@ +--- +title: List group +summary: A list group shows a series of related items in one block. Use it for simple lists, navigation, settings, and lists of records inside a card. +description: Group related items in one list. +layout: '@layouts/DocsMdxLayout.astro' +--- +import Example from '@components/Example.astro'; +import Icon from '@ui/Icon.astro'; + +## Overview + +Use the `list-group` class on the container and `list-group-item` on each row. Items share one border and stack on top of each other. + + +
First item
Second item
Third item
+ + +The container can be any element. Use `ul` with `li` items for a real list, or `nav` with `a` items for navigation. + + +
  • First item
  • Second item
  • Third item
+ + +## Variants + +### Flush + +Add `list-group-flush` to remove the outer border and the rounded corners. Use it when the list sits inside another element, for example a card. + + +
First item
Second item
Third item
+ + +### Links and buttons + +Add `list-group-item-action` to items that the user can click. It adds a hover and focus state. Use it on `a` or `button` elements only. + + +
Profile Billing Notifications
+ + +### Active and disabled + +Mark the current item with `active`. Tabler shows it with a thicker border on the start side. Use `disabled` for an item the user cannot pick. + + +
Active item Normal item Disabled item
+ + +### Section header + +Use `list-group-header` to split a long list into groups. The header is a small uppercase label with its own background. + + +
Today
Report generated
New comment
Yesterday
Invoice paid
+ + +### Hoverable items with actions + +Add `list-group-hoverable` to the container to highlight the row under the pointer. Inside an item, put extra controls in a `list-group-item-actions` element. They stay hidden and appear on hover. Add the `show` class to keep an action always visible. + + +
Change deprecated html tags
Fix spacing in the navbar
+ + +### Transparent + +Add `list-group-transparent` to drop the background and the borders. Icons inside the items turn gray. This variant works well as a side menu. + + +
Account Settings Notifications
+ + +### Numbered + +Use an `ol` element with `list-group-numbered` to number the items. The numbers come from CSS, so you do not write them in the markup. + + +
  1. Create an account
  2. Confirm your email
  3. Invite your team
+ + +### Horizontal + +Add `list-group-horizontal` to place the items in a row. Use a breakpoint, for example `list-group-horizontal-md`, to switch from a column to a row on wider screens. + + +
First
Second
Third
+ + +### Contextual colors + +Use `list-group-item-*` with a theme color to give one item a background. See the [full list of available colors](/ui/base/colors) for more details. + + +
Primary item
Success item
Warning item
Danger item
+ + +## Examples + +### List group in a card + +Add `card-list-group` to the list inside a card. The items then use the card padding, and the borders on the sides are removed. A border is added between the card body and the list. + + +

Team

Paweł Kuna
UI Designer
Alice Marlin
Frontend developer
+ + +### Notifications list + +This pattern joins several variants: a flush list inside a card, hoverable rows, and an action that shows on hover. + + +

Notifications

Build failed
The last deploy did not finish
New comment
Alice replied in the design thread
+ + +## Accessibility + +- Pick the right element. Use `ul` or `ol` with `li` for a list of items, `nav` with `a` for navigation, and `button` for actions on the page. +- Mark the current item with `aria-current="true"` next to the `active` class. The color alone is not enough. +- A `disabled` class does not block clicks on a link. Remove the `href`, add `aria-disabled="true"`, and set `tabindex="-1"`. +- Actions in `list-group-item-actions` appear on hover only. They stay in the tab order, but they are invisible while focused, so do not put the only way to do something there. Add the `show` class when an action must always be visible. diff --git a/shared/data/docs.json b/shared/data/docs.json index 8aea168af..b699a817a 100644 --- a/shared/data/docs.json +++ b/shared/data/docs.json @@ -232,6 +232,10 @@ "title": "Inline player", "url": "/ui/components/inline-player/" }, + { + "title": "List group", + "url": "/ui/components/list-group/" + }, { "title": "Modal", "url": "/ui/components/modal/"