Card
Variants, padding, gap, elevation, borderless, sectioned banners, and composable sub-components.
Card
variant="default"
Saadiyat Lagoons
Abu Dhabi, UAE
Total listings
Active portfolio this month
+12% vs last month
Instant match
AI-powered buyer–seller matching across 40,000+ listings.
Hover to see lift · interactive
variant="surface"
Saadiyat Lagoons
Abu Dhabi, UAE
Total listings
Active portfolio this month
+12% vs last month
Instant match
AI-powered buyer–seller matching across 40,000+ listings.
Hover to see lift · interactive
variant="ghost"
Saadiyat Lagoons
Abu Dhabi, UAE
Total listings
Active portfolio this month
+12% vs last month
Instant match
AI-powered buyer–seller matching across 40,000+ listings.
Hover to see lift · interactive
padding
Listing
Abu Dhabi
Listing
Abu Dhabi
Listing
Abu Dhabi
Listing
Abu Dhabi
Listing
Abu Dhabi
gap
elevation
borderless
Default
Border + shadow visible
borderless not set
Borderless
No border, no shadow
borderless
sectioned — header band + content container
sectioned splits the card into a full-bleed neutral-weakest header with a content container tucked below it — the container's rounded top corners reveal the header colour behind them. The card drops its own padding — each of CardBanner, CardContent and CardFooter supplies its own.
Property details
Saadiyat Lagoons · AL-2403
Enquiry
ActiveTotal listings
+12% vs last month
CardBanner size — padding + title scale
size on CardBanner scales its padding and the nested CardTitle's type token — xs → t-h6, sm → t-h5, md → t-h4, lg → t-h3 (default), xl → t-h2.
Overview
size="xs"
Portfolio summary
Overview
size="sm"
Portfolio summary
Overview
size="md"
Portfolio summary
Overview
size="lg"
Portfolio summary
Overview
size="xl"
Portfolio summary
Sub-components
CardHeader + CardTitle
CardDescription below the title.
With Inset image
Inset bleeds to top, left, and right edges.
Yas Island Residences
Abu Dhabi · Off-plan