Layout Examples

Example 1: KPI Dashboard with 4 Metric Cards

Four Metric widgets side-by-side on Desktop, 2x2 grid on Tablet, stacked on Mobile.

// Pane: kpi-row
// Desktop: 4-column grid (each metric = 3 cols)
// Tablet:  2-column (each metric = 4 cols from 8-col grid)
// Mobile:  single column (each metric = full width)

// Metric 1
{ layout: { colStart:1, colSpan:3 },
  layoutBreakpoints: { tablet:{colSpan:4}, mobile:{colSpan:12} } }

// Metric 2
{ layout: { colStart:4, colSpan:3 },
  layoutBreakpoints: { tablet:{colStart:5,colSpan:4}, mobile:{colStart:1,colSpan:12} } }

// Metric 3
{ layout: { colStart:7, colSpan:3 },
  layoutBreakpoints: { tablet:{colStart:1,colSpan:4}, mobile:{colStart:1,colSpan:12} } }

// Metric 4
{ layout: { colStart:10, colSpan:3 },
  layoutBreakpoints: { tablet:{colStart:5,colSpan:4}, mobile:{colStart:1,colSpan:12} } }

Example 2: Master-Detail with Sidebar

Desktop: 3-col sidebar list + 9-col detail. Mobile: sidebar hidden, detail full-width.

// Pane: master-detail
// Pane layout: type: "grid", columns: 12

// Sidebar list
{ layout: { colStart:1, colSpan:3 }, hideAt:["mobile"] }

// Detail content
{ layout: { colStart:4, colSpan:9 },
  layoutBreakpoints: { mobile:{colStart:1, colSpan:12} } }

// On mobile: sidebar hidden, detail takes full width
// Navigation to detail page passes id via route param

Example 3: Responsive Navigation

Desktop: horizontal top navigation bar. Mobile: vertical hamburger drawer.

// Desktop top-nav widget (flex row)
{
  "widgetId": "top-nav",
  "type": "Container",
  "hideAt": ["mobile"]
}

// Mobile bottom tab bar
{
  "widgetId": "bottom-tabs",
  "type": "Container",
  "hideAt": ["desktop", "tablet"]
}
// Bottom tabs pane:
// { position: fixed, bottom: 0, layout: flex row, justifyContent: space-around }

Example 4: Form + Summary Side Panel

Desktop: form 8 cols, summary panel 4 cols. Tablet: form full width, summary below. Mobile: same as Tablet.

// Form widget
{ layout: { colStart:1, colSpan:8 },
  layoutBreakpoints: { tablet:{colSpan:12} } }

// Summary panel
{ layout: { colStart:9, colSpan:4 },
  layoutBreakpoints: { tablet:{colStart:1,colSpan:12} } }

// On tablet and mobile: summary naturally flows below form
// because colStart:1 with colSpan:12 pushes to next row