Layout Components: Rows, Columns, Panels, Tabs

Content components — tables, forms, metrics cards, relation panels — provide the building blocks of a business page. But building blocks need a structure to sit in. Layout components provide that structure.

The four core layout components handle the full range of page composition needs.

Rows

A Row is a horizontal container. It arranges its children side by side, flowing left to right. Rows are the primary mechanism for creating multi-column page sections.

Use a Row to split a detail page into a main content area and a sidebar. Use a Row to arrange three metrics cards across a dashboard header. Use a Row to position two related-records tables side by side.

Row children size proportionally: a Row with two children defaults to 50/50; drag the divider to change the proportion to 70/30, 40/60, or anything between.

Columns

A Column is a vertical container — the complement to a Row. Columns stack their children vertically, one below the other.

Within a multi-column Row, each column is a Column component. Columns stack the components you place into them: a header panel at top, a form below, a related records table at the bottom.

Columns support internal spacing configuration: the gap between stacked children, padding around the column edges.

Panels

A Panel is a card container — a boxed content area with optional visual decoration. Panels give sections of a page visual boundary and identity.

Panel configuration options include: a header bar with title and optional action buttons, a footer bar, border style (bordered, shadowed, or flat), background color, and internal padding.

Most meaningful content sections on a detail page sit inside a Panel — it's the visual unit that groups related information. Stacked or side-by-side Panels make a page scannable: each Panel is a distinct section with a clear scope.

Tabs

A Tabs component creates a tabbed section — multiple panels accessible via tabs at the top, with only one panel visible at a time.

Tabs are ideal for dense detail pages where all the relevant information doesn't fit comfortably in a single view. Main information in the first tab, activity history in the second, related documents in the third, financial summary in the fourth.

The tab that was last selected is remembered per user, so frequently used tabs are active by default for each person's workflow.

Composing with Layout Components

Real pages compose these components together. A page might have a Panel at the top (header information), below it a Row containing two Columns: the left column with a form Panel and an activity Panel stacked vertically, the right column with a Tabs component containing related-records Panels.

The composition is unconstrained — any component can go anywhere, nested to any depth. The layout components are the scaffolding that makes anything possible.