Skip to content
Flow-UILive

Sections

Grouping and arranging widgets: vertical stacks, carousels and grids.

json
{
  "id": "sec_popular",
  "layout": {
    "arrangement": "carousel",
    "columns": 2,
    "item_spacing": 8,
    "insets": { "top": 12, "left": 16, "right": 16, "bottom": 0 }
  },
  "header": {},
  "widgets": []
}

Section#

FieldTypeDefaultDescription
idStringStable identity, recommended. Generated when absent.
layoutSectionLayoutArrangement and spacing.
headerWidgetOne widget that pins while the section scrolls under it.
widgets[Widget]The section's content, decoded lossily.

SectionLayout#

FieldTypeDefaultDescription
arrangementStringverticalvertical, carousel or grid. Unknown strings fall back to vertical.
columnsInt2Grid column count. Ignored elsewhere.
item_spacingDouble0Points between widgets.
insetsInsetsSpace around the whole section.

Arrangement behavior#

  • vertical stacks widgets with item_spacing between them.
  • carousel scrolls horizontally with view aligned snapping. Widget layout.width fractions control card width.
  • grid uses columns flexible columns with item_spacing in both axes.