Listing Card
View on StorybookStorybookA flexible card component for displaying listings, products, properties, jobs, and more
Basic Usage
Modern Apartment
Downtown Dubai
Beautiful 2-bedroom apartment with stunning views
1,200,000 AED
Real Estate Listing
For SaleFeatured
Luxury Villa in Dubai Hills
Dubai Hills Estate, Dubai
Stunning 5-bedroom villa with private pool and garden
5
6
4,500 sqft
Private PoolGardenSmart Home+2
8,500,000 AED
E-commerce Product
Best Seller20% Off
Premium Wireless Headphones
Brand Name
High-quality wireless headphones with noise cancellation
4.8
234
Noise CancellingWirelessFast Charging
$299.99
Job Listing
Full TimeRemote OK
Senior Frontend Developer
Dubai, UAE
Join our team to build cutting-edge web applications
Posted 2 days ago
ReactTypeScriptNext.js
15,000 - 20,000 AED/month
Type Definitions
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
titleRequired | string | — | Main title of the listing |
subtitle | string | React.ReactNode | — | Subtitle or location text |
description | string | — | Short description (truncated to 2 lines) |
price | string | React.ReactNode | — | Price or main value to display |
placeholderIcon | IconComponent | — | Icon when no image is provided |
badges | ListingCardBadge[] | — | Badges on top left of image |
actions | ListingCardAction[] | — | Action buttons on top right |
stats | ListingCardStat[] | — | Stats/specs to display |
tags | ListingCardTag[] | — | Tags/amenities to display |
maxTags | number | 3 | Max tags before "+N more" |
typeBadge | string | — | Type badge next to title |
ctaText | string | — | Call-to-action button text |
featured | boolean | false | Featured card styling |
imageAspect | 'square' | 'video' | 'wide' | 'video' | Image aspect ratio |
Best Practices
Do
- ✓ Use consistent image aspect ratios in card grids
- ✓ Show key info (price, status) prominently
- ✓ Include a clear call-to-action
Don't
- ✗ Don't overcrowd with too much metadata
- ✗ Don't use for non-listing content — use Card instead
- ✗ Don't hide the primary action behind hover effects