Container

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

also known as Content Block

Figma:

Web:

iOS:

Android:

A11y:

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

Accessibility not available

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

<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>

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.