Fidus logoFidus Design System

List

Organized lists for displaying sequential or related items. Supports ordered, unordered, and unmarked lists with configurable spacing.

Unordered List (Default)

  • First item with bullet point
  • Second item with bullet point
  • Third item with bullet point

Ordered List

  1. First step in process
  2. Second step in process
  3. Third step in process

List Without Markers

  • Item without marker
  • Item without marker
  • Item without marker

Spacing Variations

  • Compact spacing
  • Compact spacing
  • Compact spacing
  • Generous spacing
  • Generous spacing
  • Generous spacing

Nested Lists

  • Parent Item 1
    1. Nested item 1.1
    2. Nested item 1.2
  • Parent Item 2

Props

NameTypeDefaultDescription
variant'ordered' | 'unordered' | 'none''unordered'List marker style
spacing'none' | 'sm' | 'md' | 'lg''md'Space between list items
classNamestring-Additional CSS classes
children*React.ReactNode-List items

Usage Guidelines

When to use

  • •For displaying related items in sequence
  • •For step-by-step instructions (use ordered)
  • •For feature lists and benefits
  • •For navigation menus (use variant="none")

Best practices

  • •Use ordered lists for sequential steps or rankings
  • •Use unordered lists for related but unordered items
  • •Use variant="none" for custom styled lists or navigation
  • •Keep list items concise and scannable
  • •Limit nesting to 2-3 levels for readability

Accessibility

  • •Screen readers announce list type and item count
  • •Semantic HTML (ul, ol) provides proper structure
  • •Users can navigate by list item with screen readers
  • •Ordered lists communicate sequence to assistive technology

Do's and Don'ts

✓ Do

  • •Use ordered lists for sequential steps
  • •Keep list items concise and parallel in structure
  • •Use appropriate spacing for content density
  1. Review the requirements
  2. Design the solution
  3. Implement the feature

✗ Don't

  • •Don't mix ordered and unordered lists at the same level
  • •Don't use lists for non-list content like paragraphs
  • •Don't nest lists more than 3 levels deep
  • This is a very long paragraph of text that should not be in a list item because it makes the list difficult to scan and defeats the purpose of using a list structure for organizing information.
  • Another lengthy paragraph.

Related Components

Stack

Layout component for vertical or horizontal spacing

Card

Container for grouping related content

Accordion

Collapsible content sections

Resources