← Back to Components

List Component

Flexible list component supporting unordered (bullets), ordered (numbers), and icon lists with three levels of nesting, proper indentation, and comprehensive accessibility features.

Basic List Types

Three fundamental list types: unordered (bullets), ordered (numbers), and icon lists.

Unordered List

  • First unordered item
  • Second unordered item
  • Third unordered item
  • Fourth unordered item

Ordered List

  1. First ordered item
  2. Second ordered item
  3. Third ordered item
  4. Fourth ordered item

Icon List

  • Default placeholder icon item
  • Completed task item
  • Warning notification
  • Information item

Nested Lists

Lists support three levels of nesting with appropriate indentation and different bullet/numbering styles.

Nested Unordered List

  • Level 1 - Main item
  • Level 1 - Item with nested content
    • Level 2 - Nested item
    • Level 2 - Another nested item
      • Level 3 - Deeply nested item
      • Level 3 - Another deep item
    • Level 2 - Back to second level
  • Level 1 - Final main item

Nested Ordered List

  1. Level 1 - First numbered item
  2. Level 1 - Item with subitems
    1. Level 2 - Alphabetic item (a.)
    2. Level 2 - Another alphabetic item
      1. Level 3 - Roman numeral (i.)
      2. Level 3 - Another roman (ii.)
    3. Level 2 - Back to alphabetic (c.)
  3. Level 1 - Final numbered item

Icon List Variations

Icon lists support various GeneIcon symbols for different content types and status indicators.

Task Status Icons

  • Task completed successfully
  • Task failed or cancelled
  • Task needs attention
  • Task information

Navigation Icons

  • Dashboard home
  • Team management
  • Messages and notifications
  • Edit and configure

Default Icon with Overrides

  • Uses default placeholder icon
  • Another default icon item
  • Override with checkmark
  • Override with close circle

Real-world Content Examples

Practical examples showing how lists are used in real applications and documentation.

Feature List

  • Real-time collaboration
  • Advanced security features
  • 24/7 customer support
  • 99.9% uptime guarantee
  • Unlimited storage

Step-by-step Process

  1. Create your account and verify email
  2. Complete your profile information
  3. Choose your subscription plan
  4. Invite team members to collaborate
  5. Start building your first project

Navigation Menu Items

  • Dashboard Overview
  • Project Management
    • Active Projects
    • Completed Projects
    • Project Templates
  • Team & Users
    • Team Members
    • User Permissions
    • Invite Users
  • Settings & Configuration

Programmatic List Creation

Lists can be created programmatically from data using the createListFromData utility function.

Simple Data List

  • First programmatically created item
  • Second programmatically created item
  • Third programmatically created item
  • Fourth programmatically created item

Icon Data List

  • Successful operation
  • Warning condition
  • Important information
  • Error occurred

Nested Data List

  1. Parent item with children
    1. First child item
    2. Second child item
  2. Another parent item
  3. Final parent item

Interactive List Example

Lists can contain interactive elements and complex content beyond simple text.

  • Interactive list item with button
  • List item with multiple linesThis item contains multiple lines of content with different styling and formatting.
  • List item with background styling and custom formatting
  • Regular text item mixed with enhanced items

Scrollbar Styling Demo

Custom scrollbar styling following the Praxia Design System. The scrollbar uses gray-200 color by default and gray-500 on hover, with rounded edges.

Vertical Scrollbar

  1. Scrollable list item 1 - This demonstrates custom scrollbar styling
  2. Scrollable list item 2 - This demonstrates custom scrollbar styling
  3. Scrollable list item 3 - This demonstrates custom scrollbar styling
  4. Scrollable list item 4 - This demonstrates custom scrollbar styling
  5. Scrollable list item 5 - This demonstrates custom scrollbar styling
  6. Scrollable list item 6 - This demonstrates custom scrollbar styling
  7. Scrollable list item 7 - This demonstrates custom scrollbar styling
  8. Scrollable list item 8 - This demonstrates custom scrollbar styling
  9. Scrollable list item 9 - This demonstrates custom scrollbar styling
  10. Scrollable list item 10 - This demonstrates custom scrollbar styling
  11. Scrollable list item 11 - This demonstrates custom scrollbar styling
  12. Scrollable list item 12 - This demonstrates custom scrollbar styling
  13. Scrollable list item 13 - This demonstrates custom scrollbar styling
  14. Scrollable list item 14 - This demonstrates custom scrollbar styling
  15. Scrollable list item 15 - This demonstrates custom scrollbar styling
  16. Scrollable list item 16 - This demonstrates custom scrollbar styling
  17. Scrollable list item 17 - This demonstrates custom scrollbar styling
  18. Scrollable list item 18 - This demonstrates custom scrollbar styling
  19. Scrollable list item 19 - This demonstrates custom scrollbar styling
  20. Scrollable list item 20 - This demonstrates custom scrollbar styling

Horizontal Scrollbar

  • This is a very long list item that demonstrates horizontal scrolling with custom scrollbar styling
  • Another long item to show how the horizontal scrollbar appears and behaves with our custom styling
  • The scrollbar follows the same design system colors and hover states as the vertical scrollbar

Auto-hide Scrollbar

  • Hover over this container to see the scrollbar
  • The scrollbar automatically hides when not in use
  • This provides a cleaner interface
  • While still maintaining accessibility
  • Scroll down to see more items
  • The scrollbar appears on hover
  • And disappears when you move away
  • This is useful for content-focused areas
  • Where the scrollbar might be distracting
  • But scrolling is still needed