List

A versatile component for rendering bulleted, numbered, checked, and inline lists with support for custom icons, colors, spacing, and advanced formatting. Useful for feature lists, steps, navigation, status, and more.

---

Import

import { List } from '@odyssee/components';
// Helpers: List.Unordered, List.Ordered, List.Check, List.Inline

---

Examples

Unordered (Bulleted) List

Code Éditable

Résultat

---

Ordered (Numbered) List

Code Éditable

Résultat

---

Check List (with Check Icons)

Code Éditable

Résultat

---

Check List Variants

Code Éditable

Résultat

---

Check List with Custom Icon Colors

Code Éditable

Résultat

---

Inline List with Separator

Code Éditable

Résultat

---

Custom Marker Color

Code Éditable

Résultat

---

Complex Items with Custom Icons

Code Éditable

Résultat

---

Spacing and Text Size

Code Éditable

Résultat

---

Props Table

List Props

Prop	Type	Default	Description
items	(string | List.Item)[]	— (required)	Array of items (strings or objects with content/icon).
type	"disc" | "decimal" | "none" | "check" | "inline"	"disc"	List style: bulleted, numbered, none, checked, or inline.
spacing	"sm" | "md" | "lg"	"md"	Vertical spacing between items.
markerColor	string	—	Tailwind color class for marker (bulleted/numbered lists).
checkColor	Color | "gray" | "white" | "teal" | "indigo" | "purple" | "pink" | "orange"	"primary"	Color for check icon (checked lists).
checkVariant	"simple" | "soft" | "solid"	"simple"	Visual style for check icon.
separator	"dot" | "pipe" | "slash" | "none"	"dot"	Separator for inline lists.
size	"xs" | "sm" | "md" | "lg"	"sm"	Text size for list items.
start	number	1	Start number for ordered lists.
className	string	—	Additional CSS classes.
id	string	auto-gen	HTML id attribute.
style	string	—	Inline styles.

List.Item

Field	Type	Description
id	string	Optional unique identifier.
content	string | HTMLElement	The content of the list item.
icon	HTMLElement | string	Custom icon to display (checked lists).
iconColor	Color | "gray" | "white" ...	Color for the icon (checked lists).
iconVariant	"simple" | "soft" | "solid"	Variant for the icon (checked lists).

---

Helper Components

• List.Unordered: Bulleted list (type="disc")
• List.Ordered: Numbered list (type="decimal")
• List.Check: Checked list (type="check")
• List.Inline: Inline list (type="inline")

---

Implementation Notes

• Variants:
  • "disc": Bulleted list (default)
  • "decimal": Numbered list
  • "check": List with check icons (supports color/variant)
  • "inline": Items displayed horizontally with separators
  • "none": No marker
• Custom Icons:
  • Each item can have a custom icon and color.
• Spacing & Size:
  • Use spacing and size to control vertical rhythm and text size.
• Helpers:
  • Use List.Unordered, List.Ordered, List.Check, List.Inline for clarity and less boilerplate.
• Composition:
  • Items can be strings or objects for advanced formatting.

---

Accessibility

• Uses semantic <ul>, <ol>, and <li> elements.
• Inline lists use <ul> with horizontal layout.
• Check icons and custom icons are decorative; ensure the text content is descriptive.
• For navigation or actionable lists, add ARIA roles as needed in your context.

---

Best Practices

• Use checked lists for completed tasks, features, or status.
• Use inline lists for navigation, tags, or compact content.
• Prefer semantic and descriptive content for accessibility.
• Use custom icons and colors to match your application's branding.
• Combine with other components (cards, sections) for richer UIs.

---

Related

• Pulse Framework
• Tailwind CSS List Utilities
• MDN: <ul> and <ol> elements

---