SDUI Playground
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

FieldTypeDefaultDescription
content_alignment
enum
topStarttopCentertopEndcenterStartcentercenterEndbottomStartbottomCenterbottomEnd
topStartDefault child alignment within the box (9 positions)
grid_span
int1Span 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"
        }
      }
    }
  }
}