# List Source: https://lumeo.nativ.sh/components/list # List A vertical list of items with support for icons, meta text, leading/trailing content, and hover states — the building block for menus, contacts, settings, and feeds. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo Preview Code Basic List - Alice Johnson alice@example.com - Bob Smith bob@example.com - Carol White carol@example.com Preview Code With Leading Icon - Inbox 12 unread messages - Sent View sent messages - Drafts 3 unsaved drafts - Trash Empty trash Preview Code With Trailing Content - Notifications 3 - Messages 12 - Settings Preview Code Sizes Small - Item one - Item two Default - Item one - Item two Large - Item one - Item two Preview Code Clickable Items - View profile - Account settings - Sign out ## API Reference ### List Property Type Default Description Bordered bool false Add outer border and dividers between items. Hoverable bool false Show a subtle background highlight on hover. Size ListSize Default Controls item padding: Sm, Default, or Lg. ### ListItem Property Type Default Description Title string? — Primary text (bold, truncated). Description string? — Secondary text below the title (muted, truncated). Leading RenderFragment? — Content placed on the left (icon, avatar, checkbox). Trailing RenderFragment? — Content placed on the right (badge, chevron, action button). ChildContent RenderFragment? — Custom content rendered inside the main content area. Href string? — Makes the item a navigation link. OnClick EventCallback — Click handler for interactive items. Disabled bool false Disable the item (dimmed, non-clickable).