List Items
Our list item components provide structured and readable ways to display collections of content.
Basic List Items
Simple Text Item
Another List Item
Item with Icon
DetailsList Items with Avatars
JD
John Doe
john.doe@example.com
JS
Jane Smith
Project Manager
List Items with Actions
Task: Complete documentation
Invoice #12345
Usage Guidelines
Content Structure
Organize content logically within each item.
- • Primary text (title/name)
- • Secondary text (description/details)
- • Optional metadata (date, status)
Interactivity
Clearly indicate clickable areas and actions.
- • Use `hover` states for feedback
- • Place primary actions prominently
- • Use icons for common actions
Accessibility
Ensure list items are navigable and understandable.
- • Semantic HTML for lists (`ul`, `li`)
- • Keyboard navigation support
- • Clear focus indicators