K
Card
Elevated card container. Wraps a single child with elevation and rounded corners.
type: "card"interactivecontainersingle child
Default Card (no shadow)
shadowElevation defaults to 0 — flat white card
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Default Card",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "No shadow elevation, cornerRadius 16dp.",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"padding": {
"all": 16
}
}
}
}
},
"ui": {
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Quick Start
Quick Start
{
"type": "card",
"data": {}
}Style Fields
| Field | Type | Default | Description |
|---|---|---|---|
tonal_elevation | float | 2 | Surface tonal elevation (dp). Renderer fallback. |
shadow_elevation | float | 0 | Shadow elevation (dp). Renderer fallback. |
Layout Fields
| Field | Type | Default | Description |
|---|---|---|---|
grid_span | int | 1 | Span in parent grid |
Parent Layout Fields
Examples
shadowElevation: 2
Subtle shadow lift
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Card Title",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "This card has a subtle shadow at 2dp.",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"padding": {
"all": 16
}
}
}
}
},
"ui": {
"style": {
"shadowElevation": 2,
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}shadowElevation: 8
Prominent shadow for featured content — edge-to-edge image
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/card2/400/200",
"ui": {
"style": {
"contentScale": "crop"
},
"layout": {
"size": {
"width": "fill",
"height": 120
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Featured Listing",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "neutral",
"shade": 900
}
},
"layout": {
"padding": {
"horizontal": 16
}
}
}
}
},
{
"type": "text",
"data": {
"value": "1,500 KD",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "primary",
"shade": 500
}
},
"layout": {
"padding": {
"horizontal": 16,
"bottom": 16
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8
}
}
}
},
"ui": {
"style": {
"cornerRadius": 16,
"shadowElevation": 8
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Border
Card with border instead of shadow
{
"type": "card",
"data": {
"child": {
"type": "text",
"data": {
"value": "Bordered card — no shadow, 1dp neutral border",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 700
}
},
"layout": {
"padding": {
"all": 16
}
}
}
}
},
"ui": {
"style": {
"border": {
"width": 1,
"color": {
"palette": "neutral",
"shade": 200
}
},
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Custom Background
Card with colored background
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Promo Card",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"hex": "#FFFFFF"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "50% off all listings today!",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"hex": "#FFFFFFCC"
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"padding": {
"all": 16
}
}
}
}
},
"ui": {
"style": {
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}cornerRadius: 24
Extra-rounded card
{
"type": "card",
"data": {
"child": {
"type": "text",
"data": {
"value": "Extra rounded corners (24dp)",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "neutral",
"shade": 800
}
},
"layout": {
"padding": {
"all": 20
}
}
}
}
},
"ui": {
"style": {
"cornerRadius": 24,
"shadowElevation": 4
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Card with CTA
Card wrapping content and action button
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Premium Plan",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Get more visibility for your listings with our premium plan.",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
},
{
"type": "cta",
"data": {
"variant": "filled",
"size": "medium",
"text": "Upgrade Now",
"ui": {
"layout": {
"size": {
"width": "fill"
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 12,
"padding": {
"all": 20
}
}
}
}
},
"ui": {
"style": {
"cornerRadius": 12,
"shadowElevation": 4,
"border": {
"width": 1,
"color": {
"palette": "neutral",
"shade": 200
}
}
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Alpha (Opacity)
Semi-transparent card at 60%
{
"type": "card",
"data": {
"child": {
"type": "text",
"data": {
"value": "60% opacity card",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
}
},
"layout": {
"padding": {
"all": 16
}
}
}
}
},
"ui": {
"style": {
"alpha": 0.6,
"shadowElevation": 4,
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Card + Box (Badges + Avatar)
Listing card with image, topStart badge, bottomEnd price, and seller avatar with verified icon
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/cardbox1/400/250",
"ui": {
"style": {
"contentScale": "crop"
},
"layout": {
"size": {
"width": "fill",
"height": "fill"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "FEATURED",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 3
}
}
}
}
},
{
"type": "text",
"data": {
"value": "1,250 KD",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"hex": "#00000099"
},
"cornerRadius": 6
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
},
"parentLayout": {
"align": "bottomEnd"
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topStart",
"size": {
"width": "fill",
"height": 180
}
}
}
}
},
{
"type": "row",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/seller1/100/100",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 100
},
"layout": {
"size": {
"width": 36,
"height": 36
}
}
}
}
},
{
"type": "image",
"data": {
"url": "https://api.iconify.design/mdi/check-decagram.svg",
"ui": {
"style": {
"contentScale": "fit"
},
"layout": {
"size": {
"width": 14,
"height": 14
}
},
"parentLayout": {
"align": "bottomEnd"
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topStart",
"size": {
"width": 36,
"height": 36
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Mercedes-Benz E-Class 2024",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "neutral",
"shade": 900
},
"maxLines": 1
}
}
}
},
{
"type": "text",
"data": {
"value": "Salmiya · 2 hours ago",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 2
},
"parentLayout": {
"weight": 1
}
}
}
}
],
"ui": {
"layout": {
"spacing": 10,
"crossAxis": "center",
"padding": {
"horizontal": 12,
"vertical": 10
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 0,
"size": {
"width": "fill"
}
}
}
}
},
"ui": {
"style": {
"cornerRadius": 12,
"shadowElevation": 4
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Production Patterns
Real patterns extracted from the 4Sale production API.
Elevated Listing CardStandard card with shadow elevation 2 and 16dp radius
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Toyota Camry 2020",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "8,500 KD",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"padding": {
"all": 12
}
}
}
}
},
"ui": {
"style": {
"cornerRadius": 16,
"shadowElevation": 2
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}Bordered CardCard with border and no shadow — secondary style
{
"type": "card",
"data": {
"child": {
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "iPhone 15 Pro Max",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "350 KD",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"padding": {
"all": 12
}
}
}
}
},
"ui": {
"style": {
"cornerRadius": 12,
"shadowElevation": 0,
"border": {
"width": 1,
"color": {
"palette": "neutral",
"shade": 200
}
}
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}