Content

Layout Component
1import { Content } from 'maker-ui'

The Content component controls the positioning of your inner page content (anything after Header and before Footer).

It scans its child nodes for valid layout components like SideNav, Main, or Sidebar and will throw an error if it does not recognize a supported layout.

Props#

Content does not have any special props, but you can still add custom id and className selectors.

PropDescription
css
Type
object
Styles from the css prop will be applied to Content.

Maker UI Options#

The Content component computes all of the dynamic widths and grid layouts for your page. Your options configuration has a content object with the following properties:

PropDescription
maxWidth
Type
string | number | (string | number)[]
The max-width of the main content area. Can be a responsive array.
Default1020
maxWidthSection
Type
string | number | (string | number)[]
The max-width of all nested <Section /> components. Can be a responsive array.
Default1020
breakpoint
Type
string | number
A breakpoint that controls when the grid for main content, sidebars, and the side nav breaks down for mobile. You may also use an index to access a breakpoint in the options.breakpoints array.
Default0
The first index of options.breakpoints
errorBoundary
Type
object
Type
boolean
When true, this will wrap the inner contents of Content in an Error Boundary that you can customize with options.errors.

Accepted Layouts#

The Content component accepts the following layouts:

Content#

1<Content>
2  <Main>{children}</Main>
3</Content>

Sidebar Content#

1<Content>
2  <Sidebar />
3  <Main>{children}</Main>
4</Content>

Content Sidebar#

1<Content>
2  <Main>{children}</Main>
3  <Sidebar />
4</Content>

Sidebar Content Sidebar#

1<Content>
2  <Sidebar />
3  <Main>{children}</Main>
4  <Sidebar />
5</Content>

SideNav Content#

1<Content>
2  <SideNav />
3  <Main>{children}</Main>
4</Content>

Content SideNav#

1<Content>
2  <Main>{children}</Main>
3  <SideNav />
4</Content>
Contents