Active
Magic Light
Smart home lighting automation
Super Widget Pro
Beta Test
Overview
PrettyCard is a visually rich navigation card component supporting image or color backgrounds, gradient overlays, badges, menus, and flexible bottom content rows (stats, text, buttons).
Key Features
- Image backgrounds with automatic gradient overlays for text readability
- Color backgrounds with optional watermark icons
- Flexible bottom rows: stats (colored boxes), text (left/right), buttons
- Badge and hamburger menu support
- Automatic text contrast based on background color
Examples
Image Background
Cards with image backgrounds automatically apply gradient overlays for text readability.
Color Background
Solid color backgrounds with optional watermark icons for visual categorization.
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
2 fields
Updated 2 weeks ago
Stats Row
Display key metrics in colored value boxes.
Beta
Smart Mower
Autonomous lawn care robot
AGrade
85Score
350%NPS
Buttons Row
Action buttons stretched across the card width.
Combined Rows
Cards support up to 3 bottom rows in any combination.
Badge & Menu
Optional badge and hamburger menu for card actions.
Active
Sony Camera
Professional photography equipment
Super Widget Pro
Performance Test
Loading State
Skeleton placeholder while card data loads.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique identifier for the card |
title | string | - | Card title displayed prominently |
href | string | - | Link destination when clicking the top section |
description | string | - | Optional subtitle below the title |
badge | { label, variant? } | - | Optional badge with label and variant |
menu | MenuItem[] | - | Optional hamburger menu items |
background | ImageBg | ColorBg | - | Background configuration (image or color) |
bottomRows | BottomRow[] | - | Array of bottom content rows (0-3) |
isLoading | boolean | - | Show loading skeleton state |
Interfaces
Background Types
| Type | Properties | Description |
|---|---|---|
image | imageUrl, color?, imagePosition? | Image URL with optional color overlay and position |
color | color, icon? | Solid color with optional watermark icon |
Bottom Row Types
| Type | Properties | Description |
|---|---|---|
stats | items: { label, value, color?, href? }[] | Colored stat boxes with label, value, and optional href |
text | left?, right?: { content, href?, muted? } | Left/right justified text with optional badges |
buttons | items: { label, icon?, href?, onClick? }[] | Action buttons with icon, label, and click/href |
Usage
import { PrettyCard } from '@/ui/components';
// Image background card
<PrettyCard
id="project-1"
title="My Project"
description="Smart home automation"
href="/projects/1"
badge={{ label: 'Active', variant: 'success' }}
background={{
type: 'image',
imageUrl: '/project.jpg',
}}
bottomRows={[
{
type: 'stats',
items: [
{ label: 'Tasks', value: 12, color: 'bg-blue-500' },
{ label: 'Done', value: 8, color: 'bg-emerald-500' },
],
},
{
type: 'text',
left: { content: 'Hardware Division' },
right: { content: 'Beta Test', muted: true },
},
]}
/>
// Color background card with icon
<PrettyCard
id="insight-1"
title="Issue"
description="Report bugs and problems"
href="/insights/issue"
background={{
type: 'color',
color: '#ef4444',
icon: faBug,
}}
bottomRows={[
{
type: 'text',
left: { content: '3 fields' },
right: { content: 'Updated 3 months ago', muted: true },
},
]}
/>