List
Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.
The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.
Types of List component
1. List
The base container for organizing related content in vertical layouts.
- Layer5 Sistent Item 1
- Layer5 Sistent Item 2
- Layer5 Sistent Item 3
2. List Item
Represents an individual entry in a list. Includes primary and optional secondary text.
- Layer5 Sistent Primary Item
Layer5 Sistent Supporting text
- Layer5 Sistent Another Item
3. List Item Button
Adds interactivity to list items, making them actionable.
4. List with Icons
Icons can be added to list items to enhance visual interest and provide additional meaning for each item.
- Layer5 Sistent Starred
- Layer5 Sistent Calendar
5. List with Avatars
Avatars can be added to list items, which is particularly useful for representing people or items visually.
- Layer5 Sistent User 1
- Layer5 Sistent User 2
6. List Subheader
Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content.
- Section 1
- Layer5 Sistent Item A
- Layer5 Sistent Item B
- Section 2
- Layer5 Sistent Item C
