R
Row
Horizontal linear layout. Children are arranged start-to-end.
type: "row"layoutscontainer
Basic Spacing
Horizontal items with 12dp gap
John Doe
Member since 2023
{
"type": "row",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/row1/100/100",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 48,
"height": 48
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "John Doe",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Member since 2023",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
}
],
"ui": {
"layout": {
"spacing": 12,
"crossAxis": "center"
}
}
}
}Quick Start
Quick Start
{
"type": "row",
"data": {}
}Style Fields
Layout Fields
| Field | Type | Default | Description |
|---|---|---|---|
spacing | int | 0 | Space between children in dp |
main_axis | enum startendcenterspace_betweenspace_aroundspace_evenly | start | Horizontal arrangement |
cross_axis | enum startendcenter | start | Vertical alignment |
wrap | boolean | false | Wrap children (FlowRow) |
grid_span | int | 1 | Span in parent grid |
Parent Layout Fields
Examples
mainAxis: space_between
Auto fills width, items at edges, spacing ignored
Price
250 KD
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Price",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
},
{
"type": "text",
"data": {
"value": "250 KD",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"mainAxis": "space_between",
"crossAxis": "center"
}
}
}
}space_between with 1 child
Falls back to start alignment when ≤1 child
Only child → falls back to start
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Only child → falls back to start",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"mainAxis": "space_between",
"padding": {
"all": 12
},
"size": {
"width": "fill"
}
}
}
}
}mainAxis: center
Center-aligned row
Left
·
Right
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Left",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "·",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 400
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Right",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"mainAxis": "center",
"crossAxis": "center",
"size": {
"width": "fill"
}
}
}
}
}mainAxis: end
Right-aligned children
Action 1
Action 2
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Action 1",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Action 2",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"spacing": 16,
"mainAxis": "end",
"padding": {
"all": 12
},
"size": {
"width": "fill"
}
}
}
}
}mainAxis: space_evenly
Equal space around all children
A
B
C
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "A",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "B",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "C",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 8
}
}
}
}
}
],
"ui": {
"layout": {
"mainAxis": "space_evenly",
"crossAxis": "center",
"size": {
"width": "fill"
}
}
}
}
}crossAxis: center
Vertically centered items of different heights
Small
Medium
Large
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Small",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Medium",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Large",
"ui": {
"style": {
"typography": {
"style": "heading2"
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"spacing": 12,
"crossAxis": "center",
"padding": {
"all": 12
}
}
}
}
}crossAxis: end
Items aligned to bottom
Small
Large
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Small",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Large",
"ui": {
"style": {
"typography": {
"style": "heading2"
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"spacing": 12,
"crossAxis": "end",
"padding": {
"all": 12
}
}
}
}
}weight (Flex)
Children sharing space proportionally
weight: 1
weight: 2
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "weight: 1",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 8
}
},
"parentLayout": {
"weight": 1
}
}
}
},
{
"type": "text",
"data": {
"value": "weight: 2",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 8
}
},
"parentLayout": {
"weight": 2
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"size": {
"width": "fill"
}
}
}
}
}parentLayout: align
Per-child vertical alignment override
Start
Center
End
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Start",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 6
}
},
"parentLayout": {
"align": "start"
}
}
}
},
{
"type": "text",
"data": {
"value": "Center",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 6
}
},
"parentLayout": {
"align": "center"
}
}
}
},
{
"type": "text",
"data": {
"value": "End",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "error",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 6
}
},
"parentLayout": {
"align": "end"
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"spacing": 8,
"padding": {
"all": 8
},
"size": {
"width": "fill",
"height": 80
}
}
}
}
}wrap: true (FlowRow)
Tags that wrap to next line when overflowing
Cars
Electronics
Real Estate
Services
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Cars",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "primary",
"shade": 500
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Electronics",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "energy",
"shade": 500
},
"background": {
"palette": "energy",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Real Estate",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "success",
"shade": 500
},
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Services",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "purple",
"shade": 500
},
"background": {
"palette": "purple",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"wrap": true,
"size": {
"width": 250
}
}
}
}
}Background + Border + Padding
Row styled as a card-like container
4.8 Rating
{
"type": "row",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://api.iconify.design/mdi/star.svg",
"ui": {
"style": {
"contentScale": "fit"
},
"layout": {
"size": {
"width": 20,
"height": 20
}
}
}
}
},
{
"type": "text",
"data": {
"value": "4.8 Rating",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "warning",
"shade": 700
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "warning",
"shade": 50
},
"border": {
"width": 1,
"color": {
"palette": "warning",
"shade": 200
}
},
"cornerRadius": 8
},
"layout": {
"spacing": 6,
"crossAxis": "center",
"padding": {
"horizontal": 12,
"vertical": 8
}
}
}
}
}Production Patterns
Real patterns extracted from the 4Sale production API.
CTA Action RowSpace-between row of 3 icon CTAs — bottom of listing card
{
"type": "row",
"data": {
"children": [
{
"type": "cta",
"data": {
"variant": "icon",
"size": "small",
"buttonType": "icon",
"iconUrl": "https://api.iconify.design/mdi/phone.svg",
"ui": {
"style": {
"backgroundColor": {
"palette": "primary",
"shade": 50
}
}
}
}
},
{
"type": "cta",
"data": {
"variant": "icon",
"size": "small",
"buttonType": "icon",
"iconUrl": "https://api.iconify.design/mdi/whatsapp.svg",
"ui": {
"style": {
"backgroundColor": {
"palette": "success",
"shade": 50
}
}
}
}
},
{
"type": "cta",
"data": {
"variant": "icon",
"size": "small",
"buttonType": "icon",
"iconUrl": "https://api.iconify.design/mdi/information-outline.svg",
"ui": {
"style": {
"backgroundColor": {
"palette": "info",
"shade": 50
}
}
}
}
}
],
"ui": {
"layout": {
"mainAxis": "space_between",
"crossAxis": "center"
}
}
}
}Header RowSection header with title and count
سيارات مستعملة
١,٢٣٤ إعلان متاح
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "سيارات مستعملة",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "١,٢٣٤ إعلان متاح",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"mainAxis": "space_between",
"crossAxis": "center",
"size": {
"width": "fill"
}
}
}
}
}