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

also known as Content Block

Figma:

Responsive:

Adaptive:

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.