Animated To-Do Checklist
Dark to-do checklist in pure CSS with self-drawing check marks, an animated strike-through, a progress bar and vanilla JS to add and clear tasks.
Lists
Simple and rich list layouts.
3 components
Actionable List Group
Bootstrap 5 list group panel with unread badges, notification toggle switches and invite rows with accept and decline buttons.
List with Avatars and Actions
Dark Tailwind CSS user list with initials avatars, online status, meta details and accessible Follow toggle buttons with a live counter.
What is a list component?
A list component displays a series of related items in a vertical or horizontal arrangement. It can be as simple as a styled bullet list or as rich as a list group with avatars, metadata, badges and actions on each row. Lists are used for settings menus, contact lists, notifications, file lists, feature checklists, task lists and navigation in apps and dashboards.
When to use a list
Use a list when items share the same structure and are read one after another. If users need to compare several columns of data, a table is the better choice; if items are visual and browsable, consider cards.
Best practices
- Use semantic list elements:
<ul>for unordered items,<ol>for sequences and<dl>for term-value pairs. - If you remove default bullets with
list-style: none, some screen readers may stop announcing the list in Safari; addingrole="list"restores it. - When an entire row is clickable, make the row a single link or button rather than nesting several interactive elements.
- For selectable lists, indicate state with
aria-current,aria-selectedor checkboxes, not only colour. - Keep row heights comfortable for touch and give dividers enough contrast to be visible.
- Truncate long text with ellipsis carefully; make sure the full text is still available somewhere.
- For very long lists, consider pagination or virtual scrolling for performance.
Bootstrap, Tailwind CSS and pure CSS versions
The list examples are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the list group component with flex utilities, and Bootstrap 6 variants use the theme-* colour roles for active and hover states. Tailwind CSS versions rely on utility classes, and pure CSS versions style semantic list markup with custom properties. Filter by framework, check each list in the live preview, then copy the HTML and CSS from the code tabs or download them. Replace the placeholder items with your data or render the markup in a loop from your template.