Active
Magic Light
Smart home lighting automation
Overview
A responsive card grid component for displaying collections of navigation cards with built-in search and pagination.
Key Features
Card Types
- Image backgrounds with gradient overlays and focal point control
- Solid color backgrounds with optional watermark icons
- Card badges with success/warning/destructive variants
Content Rows
- Stats rows with colored value boxes and optional links
- Text rows with left/right justified content
- Action button rows with multiple buttons
Interactions
- Client-side search filtering with configurable searchable fields
- Configurable pagination with customizable page size
- Hamburger menus for edit, archive, and delete actions
Layout
- Responsive CSS Grid with min/max card width constraints
- Built-in skeleton loading state during data fetch
- Customizable empty state with icon and description
When to Use PrettyCardListBlock
- Displaying programs, projects, or resources as visual navigation cards
- Creating category grids with distinct color-coded backgrounds
- Building searchable/paginated card galleries with rich metadata
Examples
Simple Grid
Basic card grid with image backgrounds and badges. No search or pagination.
Search & Pagination
Enable search bar and pagination controls for large card collections.
Active
Smart Mower 1
Autonomous lawn care robot
70Score
100Users
Division 1
v1.0
Beta
Magic Light 2
Smart home lighting automation
77Score
147Users
Division 2
v2.0
Draft
Pet Tracker 3
GPS tracking for pets
84Score
194Users
Division 3
v3.0
Complete
Arc Reactor 4
Clean energy power source
91Score
241Users
Division 4
v1.0
Active
Home Theater 5
Premium audio experience
98Score
288Users
Division 5
v2.0
Beta
Garden Swing 6
Outdoor relaxation furniture
75Score
335Users
Division 1
v3.0
Showing 1-6 of 18
Page 1 of 3
Color Background Cards
Cards with solid color backgrounds and optional watermark icons. Ideal for categories.
Issue
Report bugs and problems
3 fields
Updated 3 months ago
Praise
Tell us what you love!
2 fields
Updated 3 months ago
Idea
Share your suggestions
4 fields
Updated 1 month ago
Question
Ask for help or clarification
2 fields
Updated 2 weeks ago
Bottom Row Combinations
Cards can include up to 3 bottom rows: stats, text, and buttons.
With Action Menus
Cards with hamburger menus for edit, archive, and delete actions.
Active
Arc Reactor
Clean energy power source
Super Widget Pro
Performance Test
Garden Swing
Outdoor relaxation furniture
Consumer Testing
Active
Loading State
Built-in skeleton loading state for async data fetching.
Empty State
Automatic empty state display when no items are provided.
No items
There are no items to display.
Props Reference
Core Props
Essential props for configuring the card grid layout.
| Prop | Type | Default | Description |
|---|---|---|---|
items | PrettyCardItem[] | required | Array of card items to display |
cardMinWidth | number | 280 | Minimum card width in pixels |
cardMaxWidth | number | 400 | Maximum card width in pixels |
gap | 'sm' | 'md' | 'lg' | 'md' | Gap size between cards |
Feature Toggles
Props for enabling search and pagination features.
| Prop | Type | Default | Description |
|---|---|---|---|
enableSearch | boolean | false | Enable search/filter bar |
searchPlaceholder | string | "Search..." | Placeholder text for search input |
searchFields | (keyof PrettyCardItem)[] | ['title', 'description'] | Fields to search (default: title, description) |
enablePagination | boolean | false | Enable pagination controls |
pageSize | number | 12 | Number of cards per page |
States & Customization
Props for loading states, empty states, and styling.
| Prop | Type | Default | Description |
|---|---|---|---|
isLoading | boolean | false | Show loading skeleton state |
loadingCount | number | 6 | Number of skeleton cards when loading |
emptyIcon | IconDefinition | faFolderOpen | Icon for empty state |
emptyTitle | string | "No items" | Title for empty state |
emptyDescription | string | - | Description for empty state |
className | string | - | Additional class name for wrapper |
Usage
import { PrettyCardListBlock, PrettyCardItem } from '@/ui/blocks';
const items: PrettyCardItem[] = [
{
id: 'project-1',
title: 'My Project',
description: 'Smart home automation',
href: '/projects/1',
badge: { label: 'Active', variant: 'success' },
background: { type: 'image', imageUrl: '/project.jpg' },
},
// ... more items
];
<PrettyCardListBlock items={items} />