Page

a container to provide context for how content should be laid out on a page

The Page component can be customized with any of the properties available in Box.

Props

kind

The type of page layout. See associated theme props.

string
"wide"
"narrow"
"full"
string

React/DOM Properties

At its core, the Page component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

page.wide.alignSelf

How to align the content on a Page.

string
"start"
"center"
"end"
"stretch"

page.wide.width

The min and max width of the content.

object
{ min: "medium", max: "xxlarge" }

page.wide.small

Any valid Box props.

object
{ pad: { horizontal: 'large' }}

page.wide.medium

Any valid Box props.

object
{ pad: { horizontal: 'medium' }}

page.wide.large

Any valid Box props.

object
{ pad: { horizontal: 'large' }}

page.narrow.alignSelf

How to align the content on a Page.

string
"start"
"center"
"end"
"stretch"

page.narrow.width

The min and max width of the content.

object
{ min: "medium", max: "large" }

page.narrow.small

Any valid Box props.

object
{ pad: { horizontal: 'large' }}

page.narrow.medium

Any valid Box props.

object
{ pad: { horizontal: 'medium' }}

page.narrow.large

Any valid Box props.

object
{ pad: { horizontal: 'large' }}

page.full.alignSelf

How to align the content on a Page.

string
"start"
"center"
"end"
"stretch"

page.full.width

The min and max width of the content.

object
{ min: "medium", max: "100%" }

page.full.small

Any valid Box props.

object
{ pad: { horizontal: 'large' }}

page.full.medium

Any valid Box props.

object
{ pad: { horizontal: 'medium' }}

page.full.large

Any valid Box props.

object
{ pad: { horizontal: 'large' }}

PageContent

a container for content within a page

PageContent is a Box with the following properties preset. You can customize it using the properties available in Box.

Props

background

The background of the Page. Use fill: "horizontal" to specify that the background should ignore width restrictions and fill the width of the Page.

string

A color or image url.

"neutral-1"
"url(//my.com/assets/img.png)"
object

{
  color: "neutral-1",
  dark: true,
  opacity: true,
  position: "bottom",
  repeat: "no-repeat",
  size: "cover",
  image: "url(//my.com/assets/img.png)",
  fill: "horizontal
}
              
{ dark: "light-2", light: "dark-2" }
where opacity could be:
"weak"
"medium"
"strong"
true
where position could be:
any CSS for background-position
where repeat could be:
"no-repeat"
"repeat"
"string"
where size could be:
"cover"
"contain"
"string"

React/DOM Properties

At its core, the PageContent component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.