DensityContainer

Import

import { DensityContainer } from '@contentful/f36-density-container';

Examples

Usage

• A low density results in the default experience.
• A high density results in a denser UI, allowing more content and actions to fit on a single screen.

Hide code
function DensityUsage() {
  return (
    <Flex gap="spacing2Xl" alignItems="start" marginTop="spacingM">
      <Box>
        <DensityContainer density="low">
          <Heading as="h2" marginBottom="spacingXs">
            Low density
          </Heading>
          <Box marginBottom="spacingL">
            <Box
              marginTop="spacingS"
              style={{
                backgroundColor: tokens.gray200,
                padding: tokens.spacingS,
                borderRadius: tokens.borderRadiusMedium,
              }}
            >
              <Flex gap="spacingS" alignItems="end">
                <Button variant="primary" size="medium">
                  Medium button
                </Button>
                <Button variant="primary" size="small">
                  Small button
                </Button>
              </Flex>
            </Box>
          </Box>
        </DensityContainer>
      </Box>

      <Box>
        <DensityContainer density="high">
          <Heading as="h2" marginBottom="spacingXs">
            High density
          </Heading>
          <Box marginBottom="spacingL">
            <Box
              marginTop="spacingS"
              style={{
                backgroundColor: tokens.gray200,
                padding: tokens.spacingS,
                borderRadius: tokens.borderRadiusMedium,
              }}
            >
              <Flex gap="spacingS" alignItems="end">
                <Button variant="primary" size="medium">
                  Medium button
                </Button>
                <Button variant="primary" size="small">
                  Small button
                </Button>
              </Flex>
            </Box>
          </Box>
        </DensityContainer>
      </Box>
    </Flex>
  );
}
function DensityUsage() {
  return (
    <Flex gap="spacing2Xl" alignItems="start" marginTop="spacingM">
      <Box>
        <DensityContainer density="low">
          <Heading as="h2" marginBottom="spacingXs">
            Low density
          </Heading>
          <Box marginBottom="spacingL">
            <Box
              marginTop="spacingS"
              style={{
                backgroundColor: tokens.gray200,
                padding: tokens.spacingS,
                borderRadius: tokens.borderRadiusMedium,
              }}
            >
              <Flex gap="spacingS" alignItems="end">
                <Button variant="primary" size="medium">
                  Medium button
                </Button>
                <Button variant="primary" size="small">
                  Small button
                </Button>
              </Flex>
            </Box>
          </Box>
        </DensityContainer>
      </Box>

      <Box>
        <DensityContainer density="high">
          <Heading as="h2" marginBottom="spacingXs">
            High density
          </Heading>
          <Box marginBottom="spacingL">
            <Box
              marginTop="spacingS"
              style={{
                backgroundColor: tokens.gray200,
                padding: tokens.spacingS,
                borderRadius: tokens.borderRadiusMedium,
              }}
            >
              <Flex gap="spacingS" alignItems="end">
                <Button variant="primary" size="medium">
                  Medium button
                </Button>
                <Button variant="primary" size="small">
                  Small button
                </Button>
              </Flex>
            </Box>
          </Box>
        </DensityContainer>
      </Box>
    </Flex>
  );
}
Open in Playground

Density support

To enable density support in your component, use the useDensity hook from @contentful/f36-utils.