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.

The List component is designed to:

  • Organize Content: Provides a structured vertical layout for related items.
  • Interactive Elements: Add actionable buttons and components to enhance user interaction.
  • Customizable Design: Offers size variations, dense modes, and alignment options.
  • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.

Components Overview:

  • List Item: Represents an individual item within the list.
  • List Item Button: A clickable button within a list item.
  • List Item Icon: Displays an icon associated with a list item.
  • List Item Avatar: Adds an avatar for visual representation within the list item.
  • List Item Text: Contains the primary and secondary text within a list item.
  • List Subheader: Provides a labeled header for grouping related list items.

Types of List component

1. List

The base container for organizing related content in vertical layouts.

Basic Usage:

  • 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.

    Layer5 Sistent Action Item 1
    Layer5 Sistent Action Item2

4. List with Icons

Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context.

  • Layer5 Sistent Starred
  • Layer5 Sistent Calendar
  • Layer5 Sistent Notification
  • Layer5 Sistent Completed Task
  • Layer5 Sistent Incomplete Task

5. List with Avatars

Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface.

  • 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. Groups and labels items within a list for better navigation and organization.

  • Section 1
  • Layer5 Sistent Item A
  • Layer5 Sistent Item B
  • Section 2
  • Layer5 Sistent Item C
  • Layer5 Sistent Item D