List
The List component displays a list of items in a structured and accessible manner. Variants include simple lists, lists with icons, lists with avatars, and lists with action buttons.
Simple List
This is a basic list with plain text items.
- Layer5 Sistent Item 1
- Layer5 Sistent Item 2
- Layer5 Sistent Item 3
List with Icons
List items can be paired with icons to add visual cues.
- Layer5 Sistent Starred
- Layer5 Sistent Calendar
- Layer5 Sistent Notification
List with Avatars
Use avatars for list items representing people or entities.
- Layer5 Sistent User 1
- Layer5 Sistent User 2
- Layer5 Sistent User 3
List with Subheader
Organize list items under different subheaders for better grouping.
- Section 1
- Layer5 Sistent Item A
- Layer5 Sistent Item B
- Section 2
- Layer5 Sistent Item C
- Layer5 Sistent Item D
List with Action Buttons
Lists can also have action buttons for added interactivity.
Layer5 Sistent Action Item 1
Layer5 Sistent Action Item 2
List with Nested Items
Lists can also be nested to represent hierarchical structures.
List Control with Checkboxes
Add checkboxes to list items for selection. A checkbox can either be a primary action or a secondary action.
- Layer5 Sistent Item 1
- Layer5 Sistent Item 2
- Layer5 Sistent Item 3
- Layer5 Sistent Item 4
