Container

Containers are useful in responsively laying out content on different screens.

Props

Component props
Name	Type	Default
`children`	`React.Node`	-

On small screens, the container is the width of the screen. On large screens, it centers the content with a max-width of 800px.

Centered content

<Box color="gray" padding={3}>
  <Container>
    <Box color="white" padding={3}>
      <Text>Centered content</Text>
    </Box>
  </Container>
</Box>

<Box color="gray" padding={3}>
  <Container>
    <Box color="white" padding={3}>
      <Text>Centered content</Text>
    </Box>
  </Container>
</Box>