Container

View source on GitHub

See recent changes on GitHub

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

also known as Content Block

Figma:

N/A

Responsive:

Ready

Adaptive:

N/A

Props

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

Accessibility

Variants

Responsive content

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

import { Box, Container, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Box
        color="secondary"
        height="100%"
        paddingX={3}
        paddingY={6}
        width="100%"
      >
        <Container>
          <Box color="default" padding={3}>
            <Text>Centered content</Text>
          </Box>
        </Container>
      </Box>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub