B
Box
Stack-based layout (ZStack/FrameLayout). Children are layered on top of each other. Largest child defines the size.
type: "box"layoutscontainer
contentAlignment: topStart (default)
Children stack at top-start by default
topStart
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "topStart",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"contentAlignment": "topStart",
"size": {
"width": "fill",
"height": 100
}
}
}
}
}Quick Start
Quick Start
{
"type": "box",
"data": {}
}Style Fields
Layout Fields
| Field | Type | Default | Description |
|---|---|---|---|
content_alignment | enum topStarttopCentertopEndcenterStartcentercenterEndbottomStartbottomCenterbottomEnd | topStart | Default child alignment within the box (9 positions) |
grid_span | int | 1 | Span in parent grid |
Parent Layout Fields
Examples
contentAlignment: center
Children centered both axes
Centered
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Centered",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"contentAlignment": "center",
"size": {
"width": "fill",
"height": 120
}
}
}
}
}contentAlignment: bottomEnd
Children at bottom-end corner
bottomEnd
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "bottomEnd",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"background": {
"palette": "error",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"contentAlignment": "bottomEnd",
"size": {
"width": "fill",
"height": 100
}
}
}
}
}All 9 contentAlignment Positions
Visual reference for all alignment options
TS
CS
BS
TC
C
BC
TE
CE
BE
{
"type": "row",
"data": {
"children": [
{
"type": "column",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "TS",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "topStart",
"size": {
"width": 70,
"height": 50
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "CS",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "centerStart",
"size": {
"width": 70,
"height": 50
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "BS",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "bottomStart",
"size": {
"width": 70,
"height": 50
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "TC",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "success",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "topCenter",
"size": {
"width": 70,
"height": 50
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "C",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "success",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "center",
"size": {
"width": 70,
"height": 50
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "BC",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "success",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "bottomCenter",
"size": {
"width": 70,
"height": 50
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
},
{
"type": "column",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "TE",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "topEnd",
"size": {
"width": 70,
"height": 50
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "CE",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "centerEnd",
"size": {
"width": 70,
"height": 50
}
}
}
}
},
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "BE",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 2
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 100
},
"cornerRadius": 4
},
"layout": {
"contentAlignment": "bottomEnd",
"size": {
"width": 70,
"height": 50
}
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
}
],
"ui": {
"layout": {
"spacing": 4
}
}
}
}Overlapping (ZStack)
Image with a badge overlay at topEnd
NEW
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/box1/300/200",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 12
},
"layout": {
"size": {
"width": "fill",
"height": 200
}
}
}
}
},
{
"type": "text",
"data": {
"value": "NEW",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topEnd",
"padding": {
"all": 8
},
"size": {
"width": "fill"
}
}
}
}
}parentLayout.align Override
Each child overrides its alignment within the box
topStart (default)
center
bottomEnd
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "topStart (default)",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 4
}
}
}
}
},
{
"type": "text",
"data": {
"value": "center",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"background": {
"palette": "success",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 4
}
},
"parentLayout": {
"align": "center"
}
}
}
},
{
"type": "text",
"data": {
"value": "bottomEnd",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"background": {
"palette": "error",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"all": 4
}
},
"parentLayout": {
"align": "bottomEnd"
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 12
},
"layout": {
"contentAlignment": "topStart",
"size": {
"width": "fill",
"height": 120
}
}
}
}
}matchParentSize
Background fills box defined by sibling, foreground centered
FEATURED
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/boxbg/400/200",
"ui": {
"style": {
"contentScale": "crop"
},
"layout": {
"size": {
"width": "fill",
"height": "fill"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "FEATURED",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"hex": "#FFFFFF"
}
}
}
}
}
],
"ui": {
"style": {
"cornerRadius": 12
},
"layout": {
"contentAlignment": "center",
"size": {
"width": "fill",
"height": 160
}
}
}
}
}Avatar + Badge
Profile avatar with verified badge at bottomEnd
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/avatar3/100/100",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 100
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "image",
"data": {
"url": "https://api.iconify.design/mdi/check-decagram.svg",
"ui": {
"style": {
"contentScale": "fit"
},
"layout": {
"size": {
"width": 18,
"height": 18
}
},
"parentLayout": {
"align": "bottomEnd"
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "topStart",
"size": {
"width": 56,
"height": 56
}
}
}
}
}Nested Box
Box within a box
Inner
{
"type": "box",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Inner",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFFFFF"
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "primary",
"shade": 500
},
"cornerRadius": 8
},
"layout": {
"contentAlignment": "center",
"padding": {
"all": 12
}
}
}
}
}
],
"ui": {
"style": {
"background": {
"palette": "primary",
"shade": 100
},
"cornerRadius": 12
},
"layout": {
"contentAlignment": "center",
"padding": {
"all": 24
},
"size": {
"width": "fill"
}
}
}
}
}Production Patterns
Real patterns extracted from the 4Sale production API.
Avatar + Badge OverlayCircular avatar with a verified badge positioned at bottom-end
{
"type": "box",
"data": {
"children": [
{
"type": "image",
"data": {
"url": "https://picsum.photos/seed/avatar2/100/100",
"ui": {
"style": {
"contentScale": "crop",
"cornerRadius": 100
},
"layout": {
"size": {
"width": 56,
"height": 56
}
}
}
}
},
{
"type": "image",
"data": {
"url": "https://api.iconify.design/mdi/check-decagram.svg",
"ui": {
"style": {
"contentScale": "fit"
},
"layout": {
"size": {
"width": 16,
"height": 16
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "bottomEnd",
"size": {
"width": 56,
"height": 56
}
}
}
}
}Golden Pin FrameRotated background frame with card overlay — premium listing
{
"type": "box",
"data": {
"children": [
{
"type": "box",
"data": {
"children": [],
"ui": {
"style": {
"background": {
"palette": "warning",
"shade": 50
},
"cornerRadius": 16,
"rotation": 3
},
"layout": {
"size": {
"width": "fill",
"height": "fill"
}
}
}
}
}
],
"ui": {
"layout": {
"contentAlignment": "center",
"padding": {
"all": 8
},
"size": {
"width": "fill"
}
}
}
}
}