On this page
Overview
Show code, DetailPane.tsx
Variants
Backgrounds
- Default
Panes and side regions. The default.
- Muted
A block that stands apart on a pane, and rows.
- Page
A well inside a pane that returns to the page.
- Raised
A layer on the page, such as a table or a docked panel.
- Recessed
A well on the page that its content rises out of, such as a preview's stage.
Corners
- Large
Panes and large regions. The default.
- Small
Small blocks.
- Rounded ends
A group of controls.
- Square
A band that meets the edges of its container.
Rules
A surface lays out nothing itself: a Column or a Row lays out what it holds, as one element with it.
Use it when
- A region with a background, such as a detail pane or a side panel
- A block that stands apart, such as a summary on a pane
Spacing
Space what a surface holds with the layout inside it, never with margins of its own.