G
Horizontal Grid
Horizontally scrolling grid with a fixed number of rows.
type: "horizontal_grid"layoutscontainer
rows: 1 (Single Row)
Horizontal scroll carousel — default rows=1
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Item 1",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 120
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Item 2",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 120
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Item 3",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 120
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Item 4",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"background": {
"palette": "error",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 120
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 1,
"spacing": 8
}
}
}
}Quick Start
Quick Start
{
"type": "horizontal_grid",
"data": {}
}Style Fields
Layout Fields
| Field | Type | Default | Description |
|---|---|---|---|
spacing | int | 0 | Space between children in dp (same for both axes) |
rows | int | 1 | Number of rows in the grid |
content_padding | padding | — | Padding inside the scrollable area |
grid_span | int | 2 | Span in parent grid (default 2, unlike other containers) |
Parent Layout Fields
Examples
rows: 2
6 items chunked into 3 columns × 2 rows
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "1",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "2",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "3",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "4",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "5",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "6",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "warning",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 2,
"spacing": 8
}
}
}
}rows: 3
9 items chunked into 3 columns × 3 rows
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "A",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "B",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "C",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "D",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "E",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "F",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "G",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "H",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "I",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"textAlign": "center",
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 6
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 3,
"spacing": 6
}
}
}
}Uneven Items (5 items, 2 rows)
Last column has only 1 item (5 ÷ 2 = 2 full + 1 partial)
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "1",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "2",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "primary",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "3",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "4",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "success",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "5",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center",
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 90
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 2,
"spacing": 8
}
}
}
}contentPadding
Inner padding inside the scrollable area
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/grid1/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 100
}
}
}
}
},
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/grid2/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 100
}
}
}
}
},
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/grid3/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 100
}
}
}
}
},
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/grid4/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 100
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 2,
"spacing": 8,
"contentPadding": {
"horizontal": 16,
"vertical": 8
}
}
}
}
}Large Spacing
Same spacing used for both axes (16dp)
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Wide 1",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "purple",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Wide 2",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "purple",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Wide 3",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "purple",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Wide 4",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"textAlign": "center",
"background": {
"palette": "purple",
"shade": 100
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 2,
"spacing": 16
}
}
}
}Background + Border
Grid container with shared style
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "A",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center"
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "B",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center"
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "C",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center"
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "D",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"textAlign": "center"
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 80
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"border": {
"width": 1,
"color": {
"palette": "neutral",
"shade": 200
}
},
"cornerRadius": 12
},
"layout": {
"rows": 2,
"spacing": 8,
"padding": {
"all": 12
}
}
}
}
}3 Rows — Brands Carousel
12 brand logos in 3×4 scrollable grid
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand1/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Toyota",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand2/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "BMW",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand3/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Mercedes",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand4/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Lexus",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand5/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Audi",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand6/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Porsche",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand7/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Honda",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand8/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Nissan",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand9/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Ford",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand10/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Kia",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand11/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Hyundai",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/brand12/80/80",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Chevy",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"textAlign": "center"
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4,
"crossAxis": "center",
"size": {
"width": 72
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 3,
"spacing": 12,
"contentPadding": {
"horizontal": 16
}
}
}
}
}3 Rows — Category Chips
15 chip items scrolling horizontally in 3 rows
{
"type": "horizontal_grid",
"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": 14,
"vertical": 8
}
}
}
}
},
{
"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": 14,
"vertical": 8
}
}
}
}
},
{
"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": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Fashion",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "purple",
"shade": 500
},
"background": {
"palette": "purple",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Furniture",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "warning",
"shade": 500
},
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Services",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "cyan",
"shade": 500
},
"background": {
"palette": "cyan",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Jobs",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "info",
"shade": 500
},
"background": {
"palette": "info",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Pets",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "error",
"shade": 500
},
"background": {
"palette": "error",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Sports",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "success",
"shade": 700
},
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Mobiles",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "primary",
"shade": 700
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Gaming",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "purple",
"shade": 700
},
"background": {
"palette": "purple",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Books",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "neutral",
"shade": 700
},
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Watches",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "warning",
"shade": 700
},
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Boats",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "cyan",
"shade": 700
},
"background": {
"palette": "cyan",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "More",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "neutral",
"shade": 500
},
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 16
},
"layout": {
"padding": {
"horizontal": 14,
"vertical": 8
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 3,
"spacing": 8,
"contentPadding": {
"horizontal": 16
}
}
}
}
}3 Rows — Image Cards
12 image cards with titles in a 3-row scrollable grid
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg1/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Salmiya",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg2/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Hawalli",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg3/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Kuwait City",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg4/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Farwaniya",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg5/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Jahra",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg6/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Mangaf",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg7/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Sabah Salem",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg8/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Mishref",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg9/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Bayan",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg10/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Fintas",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg11/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Mahboula",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/hg12/200/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 100,
"height": 80
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Jleeb",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"maxLines": 1
},
"layout": {
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
}
],
"ui": {
"layout": {
"rows": 3,
"spacing": 10,
"contentPadding": {
"horizontal": 16
}
}
}
}
}3 Rows — Don't Miss Grid
9 promo cards in a 3-row scrollable grid with badges
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm1/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "-30%",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm2/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "NEW",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm3/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "HOT",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "warning",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm4/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "-50%",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm5/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "TOP",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "success",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm6/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "-20%",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm7/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "DEAL",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "purple",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm8/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "NEW",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/dm9/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 8
},
"layout": {
"size": {
"width": 140,
"height": 90
}
}
}
}
},
{
"type": "text",
"data": {
"value": "-40%",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 6,
"vertical": 2
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 4
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 3,
"spacing": 8,
"contentPadding": {
"horizontal": 16
}
}
}
}
}Production Patterns
Real patterns extracted from the 4Sale production API.
Brands Carousel1-row horizontal grid of brand profile chips
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Mercedes",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"horizontal": 16,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "BMW",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"horizontal": 16,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Toyota",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"horizontal": 16,
"vertical": 8
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Lexus",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"horizontal": 16,
"vertical": 8
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 1,
"spacing": 8,
"contentPadding": {
"horizontal": 12
}
}
}
}
}Don't Miss Grid1-row carousel for featured listings inside golden section
{
"type": "horizontal_grid",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Land Cruiser",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"hex": "#7A5A1E"
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Patrol",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"hex": "#7A5A1E"
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Cayenne",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"hex": "#7A5A1E"
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 12
},
"size": {
"width": 100
}
}
}
}
}
],
"ui": {
"layout": {
"rows": 1,
"spacing": 8
}
}
}
}