Vertical linear layout. Children are arranged top-to-bottom.
{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Title",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Subtitle text here",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Caption info",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 400
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 12,
"padding": {
"all": 16
}
}
}
}
}{
"type": "column",
"data": {}
}| Field | Type | Default | Description |
|---|---|---|---|
spacing | int | 0 | Space between children in dp |
main_axis | enum startendcenterspace_betweenspace_aroundspace_evenly | start | Vertical arrangement |
cross_axis | enum startendcenter | start | Horizontal alignment |
wrap | boolean | false | Wrap children (FlowColumn) |
grid_span | int | 1 | Span in parent grid |
{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Centered Column",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
},
{
"type": "text",
"data": {
"value": "All items centered horizontally",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"crossAxis": "center",
"size": {
"width": "fill"
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "250 KD",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Negotiable",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"spacing": 4,
"crossAxis": "end",
"padding": {
"all": 12
},
"size": {
"width": "fill"
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Top",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "neutral",
"shade": 800
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Middle",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Bottom",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "neutral",
"shade": 800
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"mainAxis": "space_between",
"padding": {
"all": 16
},
"size": {
"width": "fill",
"height": 200
}
}
}
}
}{
"type": "column",
"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",
"height": 120
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Centered",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Content is vertically centered",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 600
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"spacing": 8,
"mainAxis": "center",
"crossAxis": "center",
"size": {
"width": "fill",
"height": 160
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "At the bottom",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "neutral",
"shade": 700
}
}
}
}
},
{
"type": "cta",
"data": {
"variant": "filled",
"size": "medium",
"text": "Action",
"ui": {
"layout": {
"size": {
"width": "fill"
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"spacing": 12,
"mainAxis": "end",
"padding": {
"all": 16
},
"size": {
"width": "fill",
"height": 200
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "weight: 1 (top)",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 8
},
"size": {
"width": "fill"
}
},
"parentLayout": {
"weight": 1
}
}
}
},
{
"type": "text",
"data": {
"value": "weight: 2 (bottom)",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 8
},
"size": {
"width": "fill"
}
},
"parentLayout": {
"weight": 2
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"size": {
"width": "fill",
"height": 200
}
}
}
}
}{
"type": "column",
"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"
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Tag 1",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "primary",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 2",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "success",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Tag 3",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "warning",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 8,
"wrap": true,
"size": {
"height": 60
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Top: 24, Bottom: 8, H: 16",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 700
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 8,
"border": {
"width": 1,
"color": {
"palette": "primary",
"shade": 200
}
}
},
"layout": {
"padding": {
"top": 24,
"bottom": 8,
"horizontal": 16
},
"size": {
"width": "fill"
}
}
}
}
}Real patterns extracted from the 4Sale production API.
{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "BMW X5 2024",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "neutral",
"shade": 900
},
"maxLines": 2,
"minLines": 2
}
}
}
},
{
"type": "text",
"data": {
"value": "Automatic · 12,000 km · Black",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 600
},
"maxLines": 1
}
}
}
},
{
"type": "text",
"data": {
"value": "18,900 KD",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
},
{
"type": "text",
"data": {
"value": "5 hours ago",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"padding": {
"all": 8
}
}
}
}
}{
"type": "column",
"data": {
"children": [
{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "لا يفوتك",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"hex": "#FFFFFF"
}
}
}
}
}
],
"ui": {
"layout": {
"mainAxis": "space_between",
"crossAxis": "center",
"padding": {
"horizontal": 12
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"start": {
"hex": "#7A5A1E"
},
"end": {
"hex": "#D4A843"
},
"angle": 0
},
"cornerRadius": 12
},
"layout": {
"padding": {
"vertical": 12
},
"size": {
"width": "fill"
}
}
}
}
}