Skip to main content

Recipes

Basic container​

The simplest use case is wrapping content with consistent container styling.

Live Editor
function BasicContainerExample() {
  return (
    <Container p={400}>
      This is a basic container with padding.
    </Container>
  );
}

Container with custom padding​

Container accepts all Box system props, allowing you to customize spacing.

Live Editor
function CustomPaddingExample() {
  return (
    <Box display='flex' flexDirection='column' gap={400}>
      <Container p={300}>Container with small padding</Container>
      <Container p={500}>Container with large padding</Container>
    </Box>
  );
}

Full width container​

Use system props to control the width of the container.

Live Editor
function FullWidthExample() {
  return (
    <Container p={400} width={1}>
      This container spans the full width.
    </Container>
  );
}

Container with custom content​

Container can wrap any content, including other components.

Live Editor
function CustomContentExample() {
  return (
    <Container p={400}>
      <Text.Headline mb={300}>Headline in a Container</Text.Headline>
      <Text.Body>
        Body text with additional content. Container provides a clean background
        and border to group related information together.
      </Text.Body>
    </Container>
  );
}

Nested containers​

While not common, containers can be nested when needed.

Live Editor
function NestedContainersExample() {
  return (
    <Container p={400}>
      <Text.Headline mb={300}>Outer Container</Text.Headline>
      <Container p={300} mt={300}>
        <Text.Body>Nested container content</Text.Body>
      </Container>
    </Container>
  );
}

Container as a card-like element​

Combine Container with other components to create card-like layouts.

Live Editor
function CardLikeExample() {
  return (
    <Container p={400}>
      <Box display='flex' justifyContent='space-between' alignItems='center'>
        <Box>
          <Text.SmallSubheadline>Card Title</Text.SmallSubheadline>
          <Text.Byline mt={200}>Additional information</Text.Byline>
        </Box>
        <Button appearance='secondary' size='small'>Action</Button>
      </Box>
    </Container>
  );
}