You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Structure

Layout

Column Options

One Column

A simple column that stretches to fit its parent.

Island Column

A shortened single column. Can be used in small, simple forms.

Equal Sized Columns

There can be 2, 3, and 4 equal width columns in a layout. The gutters can also be configured to be relaxed, compact, or gutters at all.

Two Columns

Three Columns

Four Columns

Support Layout

Support Layouts have one small and one large column to a row.

Left Support Layout

Left-support columns have one small and one large column to a row. This can be useful in dedicated Settings Pages.

Right-Support Layout

Spacing

Layout's gutters can be altered. The default is a compact gutter (16px), but can be relaxed (32px), or remove the gutter.

Multiple Layouts in one Page

An individual page is capable of having multiple layouts, for different contexts. For example, single/islands can be used for notifications and page actions, paired with equal column layouts to show other content.

Align trailing columns

The alignment of columns at the end of a layout can be customized. They can be aligned left, right, or center. They can also be distributed across the row with space between.

Autowrapping Layout Sections

Layout columns work by wrapping children in a <Layout.Section>. By default, the Layout component can auto-wrap this section around each direct child of the component.

Each <div> is automatically wrapped in a <Layout.Section>

Autowrapping can be problematic when abstracting out Layout children. This issue can be avoided by turning off auto-wrapping (via autoSections={false}) and manually adding a <Layout.Section> for each column.

Best Practices

  • The layout in general should be paired with the Page component.
  • Layout Density Guidelines by Material Design.
  • Use equal-width columns when each section has the same importance.
  • For more detailed content usage guidelines, see the Page Layout and Page Header patterns.

Importing

import { Layout } from '@servicetitan/design-system';