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.

Page title

NameValueDescriptionDefault
heading
Required
React.elementHeading element to display as page title

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

A
B
C
D
NameValueDescriptionDefault
aside
Required
React.elementContent for aside
asidePositionfirst | lastAside position (from AsideLayout.asidePositions)first
main
Required
React.elementMain 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
NameValueDescriptionDefault
counttwo | three | four | sixNumber of columns in a row at full widthfour

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