Listing Card
A 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 Sale
Featured
Luxury Villa in Dubai Hills
Dubai Hills Estate, Dubai
Villa
Stunning 5-bedroom villa with private pool and garden
5
6
4,500 sqft
Private Pool
Garden
Smart Home
+2
8,500,000 AED
E-commerce Product
Best Seller
20% Off
Premium Wireless Headphones
Brand Name
High-quality wireless headphones with noise cancellation
4.8
234
Noise Cancelling
Wireless
Fast Charging
$299.99
Job Listing
Full Time
Remote OK
Senior Frontend Developer
Dubai, UAE
Tech
Join our team to build cutting-edge web applications
Posted 2 days ago
React
TypeScript
Next.js
15,000 - 20,000 AED/month
Use Cases
🏠
Real Estate
🛍️
E-commerce
💼
Job Boards
📝
Blog
🏪
Marketplace
🎨
Portfolio
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 | LucideIcon | — | 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 |