Layout
Beta

Install the component dependency:

Include a React component in your project:

Start your layout with this default template to achieve standard outer spacing and title style.

If you're using actions, be sure to stay limited to a small number of items (ie, 2-3).

Page title

Name
Value
Description
Default
actions
React.element[]
Actionable elements to place in the top-right
heading
Required
React.element
Heading element to display as page title

Use this layout for any 1/3, 2/3-proportioned layouts.

A
B
C
D
Name
Value
Description
Default
aside
Required
React.element
Content for aside
asidePosition
first | last
Aside position (from AsideLayout.asidePositions)
first
main
Required
React.element
Main content

This layout will provide a set number of columns for an arbitrary number of items. If more items than columns are provided, they will flow into rows.

A
B
C
D
E
F
Name
Value
Description
Default
count
two | three | four | six
Number of columns in a row at full width
four

These layout components respond to viewport changes. Basic, sane defaults for content reflow engages once the page width sufficiently increases. That standard breakpoint is above 768px.

Breakpoint:
768px

Use the standard spacing, components and line height, and everything lays out nicely along a vertical grid.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad