Active
Project Alpha
Innovative design system implementation
A versatile List Collection component for vertical list layouts with images, stacked content (title, description, meta), and dropdown action menus.
Basic Usage
The simplest form displays a vertical list with default styling and separators between items.
In Progress
Project Beta
Next-generation user interface redesign
Planning
Project Gamma
Mobile app performance optimization
Card Variant
Use variant="card" for elevated cards with shadows.
Active
Q4 Marketing Strategy
Comprehensive plan for product launches
Draft
Brand Guidelines 2024
Updated visual identity standards
Action Menus
Add dropdown action menus to list items using the actions prop. Actions appear as a 3-dots menu on the right side.
Facilitator
Sarah Johnson
Group facilitator, Tuesday evening group
Facilitator
Thabo Nkosi
Programme facilitator, Exodus Recovery Skills
Member
Emma Williams
In active recovery, 6 months
Custom Meta Rendering
Use renderMeta to display badges, icons, or custom components for the meta content.
Active
Facilitator Handbook
Operational guide for running recovery groups
Active
Safeguarding Policy
Member safety and reporting procedures
Draft
Group Marketing Pack
Posters and social assets for your group
Archived
Legacy Programme Notes
Archived session notes from a retired programme
Clickable Items
Make entire list items clickable using href for links or onItemClick for custom handlers.
Props Reference
ListCollectionProps
| Prop | Type | Default | Description |
|---|---|---|---|
items | ListCollectionItem[] | Required | Array of items to display |
size | "default" | "compact" | "default" | Size variant controlling spacing and typography |
variant | "default" | "card" | "default" | Visual style variant |
imageShape | "square" | "circle" | "square" | Shape of item images |
titleStyle | "simple" | "bold" | "simple" | Font weight for titles |
metaPosition | "above-title" | "below-title" | "above-title" | Position of meta content |
limit | number | undefined | Maximum number of items to display |
onItemClick | (item, index) => void | undefined | Handler for item clicks |
renderMeta | (meta, item) => ReactNode | undefined | Custom meta renderer |
renderActions | (item, index) => ReactNode | undefined | Custom actions renderer |
clampTitle | boolean | number | undefined | Clamp title text (true = 2 lines, or specify number) |
clampDescription | boolean | number | undefined | Clamp description text (true = 2 lines, or specify number) |
itemAs | "div" | "article" | "article" | HTML element for items |
className | string | undefined | Additional CSS classes |
ListCollectionItem
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Item title |
description | string | No | Item description |
meta | string | ReactNode | No | Meta content (category, date, status) |
image | string | No | Image URL |
imageAlt | string | No | Alt text for image |
id | string | number | No | Unique identifier |
href | string | No | Link URL (makes item a link) |
onClick | () => void | No | Click handler for this item |
imageShape | "square" | "circle" | No | Override collection imageShape |
titleStyle | "simple" | "bold" | No | Override collection titleStyle |
metaPosition | "above-title" | "below-title" | No | Override collection metaPosition |
actions | ListCollectionAction[] | No | Action menu items |
ariaLabel | string | No | Accessibility label |
ListCollectionAction
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | Yes | Action label |
onClick | () => void | Yes | Action handler |
variant | "default" | "destructive" | No | Action variant |
icon | ReactNode | No | Optional icon |