OPEN
Weekly Recovery Group
Open, free meetings for anyone in recovery
Displays a responsive grid or list of cards with configurable size, orientation, aspect ratio, and metadata.
Basic Usage
The simplest form displays a grid of cards with default settings.
PROGRAMME
Exodus Recovery Skills
A structured, curriculum-based programme
SUPPORT
Accountability Partners
Pair up for day-to-day support and check-ins
Size Variants
Control the grid density with the size prop. Options range from xs (6 columns on desktop) to xl (2 columns max).
Item 1
Item 2
Item 3
Item 4
Item 1
Description text
Item 2
Description text
Item 3
Description text
Minimal Variant
Remove card borders and shadows for a cleaner look.
OPEN
Weekly Recovery Group
Open, free recovery meetings
PROGRAMME
Exodus Recovery Skills
A structured recovery programme
Horizontal Orientation
Convert the grid into a list view perfect for mobile or sidebar layouts.
OPEN
Weekly Recovery Group
Open, free meetings for anyone in recovery
PROGRAMME
Exodus Recovery Skills
A structured, curriculum-based programme
SUPPORT
Accountability Partners
Pair up for day-to-day support and check-ins
Aspect Ratios
Choose from square, video (16:9), or portrait (3:4) aspect ratios.
Landscape 1
Landscape 2
Landscape 3
Portrait 1
Portrait 2
Image Shapes
Use circular images for profile-style collections.
TEAM
Alex Thompson
Product Manager
TEAM
Jamie Lee
UX Designer
TEAM
Sam Rivers
Developer
Without Images
Cards work beautifully even without images, showing a placeholder icon.
DOCS
Document 1
Important project files
NOTES
Document 2
Meeting notes and agendas
LINKS
Document 3
Resource links
Title Style
Control the title font weight with the titleStyle prop for different visual emphasis.
FEATURED
Featured Product
Premium quality with bold title styling
NEW
New Release
Latest addition to our collection
TRENDING
Best Seller
Most popular item this month
Limiting Items
Display only a specific number of items with the limit prop. Perfect for showing previews or "featured" sections.
Item 1
First item
Item 2
Second item
Item 3
Third item
Combining Styles
Combine different props for unique layouts. Here's a horizontal minimal list with circular avatars:
Alex Thompson
Joined 2 hours ago
Jamie Lee
Joined yesterday
Sam Rivers
Joined last week
Meta Positioning
Control where the meta text appears using the metaPosition prop.
Alpine Adventure
Explore breathtaking mountain trails
FEATURED
Coastal Escape
Relax by the tranquil seaside
POPULAR
City Skyline
NEW
Modern urban architecture
Forest Path
TRENDING
Peaceful woodland trails
Badge Integration
Use the renderMeta prop to display meta information as styled badges from shadcn/ui.
OPEN
Weekly Recovery Group
Open, free meetings for anyone in recovery.
PROGRAMME
Exodus Recovery Skills
A structured, curriculum-based programme.
SUPPORT
Accountability Partners
Pair up for day-to-day support and check-ins.
Action Slots
Add interactive elements like buttons or icons to each card using the renderAction prop.
ACADEMY
Small Group Facilitation
Academy training to certify group facilitators.
PROGRAMME
Vantage Programme
A specialised, closed recovery curriculum.
Footer Content
Add additional information at the bottom of cards using the renderFooter prop.
Facilitator Resources
Marketing and operational materials for your groups.
Updated weeklyFree for all members
Attendance & Check-ins
Track group attendance and member self check-ins.
Updated weeklyFree for all members
Per-Item Customization
Override collection-wide settings for individual items by adding properties directly to each item.
Featured Item
Featured
Special card with custom action
Exclusive content
STANDARD
Regular Item
Standard card with default styling
Custom Position
This card shows meta in footer
CUSTOM
Link Cards
Make cards navigational by adding an href property to items. The cards will become semantic links instead of buttons.
Visual Separators
Add subtle dividers between card sections using the showSeparators prop.
Structured Content
Clear visual separation between sections
ORGANIZED
Clean Layout
Professional appearance with dividers
POLISHED
Text Clamping for Consistent Heights
Use clampTitle and clampDescription props to ensure consistent card heights in grid layouts by limiting text to a specific number of lines.
EXAMPLE
Short Title
Brief description
EXAMPLE
Much Longer Title That Would Normally Span Multiple Lines
This is a much longer description that would typically take up several lines of text, but with clamping enabled it will be truncated to maintain consistent card heights across the grid layout
EXAMPLE
Medium Length Title Here
A moderate amount of description text that falls somewhere in between the other examples
You can also specify custom line counts:
Single Line Title Only
With custom clamping you can specify exactly how many lines to show. This description is limited to just two lines.
Another Single Line Title That Gets Truncated
Another example with two-line description limit. This helps maintain visual consistency while still showing enough content to be useful.
Props
CardCollection
| Prop | Type | Default | Description |
|---|---|---|---|
items | CardCollectionItem[] | - | Array of items to display (required) |
size | "xs" | "s" | "m" | "l" | "xl" | "m" | Grid column density |
variant | "card" | "minimal" | "card" | Card style with or without borders/shadows |
orientation | "vertical" | "horizontal" | "vertical" | Grid layout or list view |
aspectRatio | "square" | "video" | "portrait" | "square" | Image aspect ratio |
imageShape | "square" | "circle" | "square" | Image shape (uses Avatar for circles) |
titleStyle | "simple" | "bold" | "simple" | Title font weight |
limit | number | - | Limit number of displayed items |
className | string | - | Additional CSS classes |
onItemClick | (item, index) => void | - | Click handler for items |
metaPosition | "header" | "footer" | "above-title" | "below-title" | "above-title" | Where to display meta text |
renderMeta | (meta, item) => ReactNode | - | Custom meta renderer (e.g., for Badges) |
renderAction | (item, index) => ReactNode | - | Render action content per item |
renderFooter | (item, index) => ReactNode | - | Render footer content per item |
showSeparators | boolean | false | Show visual separators between sections |
itemAs | "article" | "div" | "article" | Semantic HTML element for cards |
renderItem | (item, index) => ReactNode | - | Custom render function for full control |
clampTitle | boolean | number | - | Clamp title to lines (true = 2 lines, number = custom) |
clampDescription | boolean | number | - | Clamp description to lines (true = 3 lines, number = custom) |
CardCollectionItem
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Item title |
description | string | No | Item description |
image | string | No | Image URL |
meta | string | No | Metadata text |
id | string | number | No | Unique identifier (improves key generation) |
href | string | No | Makes card a navigational link |
action | ReactNode | No | Per-item action content (overrides renderAction) |
footer | ReactNode | No | Per-item footer content (overrides renderFooter) |
metaPosition | "header" | "footer" | "above-title" | "below-title" | No | Per-item meta position override |
ariaLabel | string | No | Custom accessibility label |
Advanced: CardItem Component
For maximum control, you can use the CardItem component directly. This is useful when you need custom layouts or want to build cards programmatically.
Fully Customized
Pro
Complete control over card structure
Updated today
With Separators
Clean visual organization
FEATURED
2.5k views