Skip to contentSkip to navigation
DocsDocs

Column

Lays out content one under another with even gaps.

BetaSince 1.0.0
On this page

Overview

Show code, ProjectDetails.tsx

Variants

Gaps

The space between the children is a step of the spacing scale, a little smaller at the compact scale.

Step 1

A heading and its description, a label and its value.

Steps 2–3

Short lines that read as one block, or a compact form.

Step 4

Most content: paragraphs, fields and actions.

Step 5

Groups inside a section, such as a form's fields and its actions.

Steps 6–9

Sections of a page.

Alignment

Each child is as wide as the column by default, or keeps its own width at the start, the middle or the end.

  • Buttons, chips and badges keep their own width in any case.
Show code, CenteredContent.tsx

Rules

Space says what belongs together: a larger gap between sections, and a smaller one inside them.

Use it when

  • Content from top to bottom with even space, such as a heading, text and a form
  • Sections and their contents spaced apart differently, as nested columns
  • Actions stacked across the whole width of a narrow pane
DoA larger gap between sections and a smaller one inside them.
Show code, NestedSpacing.tsx
Don’tOne gap for everything: the sections run together.
Show code, OneGapForAll.tsx

A fill and corners

A Column paints nothing: a fill, a border or corners come from a Surface that the Column lays out.

Related

  • Children side by side, such as a form's actions.

  • Content in columns, such as cards or a main column beside its details.

  • An inset or a size container around content, without a column of its own.

  • A background, an inset and corners around content.

  • A block with a heading, metadata and actions.