Box

Import

import { Box } from '@contentful/f36-components';
// or
import { Box } from '@contentful/f36-core';

Examples

Margins & Paddings

Margins and paddings for Box component are based on our spacing system.

Here is an overview of spacings that are available:

• spacing2Xs
• spacingXs
• spacingXs
• spacingS
• spacingM
• spacingL
• spacingXl
• spacing2Xl
• spacing3Xl
• spacing4Xl

Here is a good example that demonstrates how you can apply margin and padding properties to the Box component:

Hide code
function BoxSpacingExample() {
  const SmallContainerBox = () => (
    <Box
      as="span"
      style={{
        display: 'block',
        width: '50px',
        height: '50px',
        backgroundColor: tokens.gray100,
      }}
    />
  );

  return (
    <Flex style={{ backgroundColor: tokens.gray300 }}>
      <Box
        padding="spacingXs"
        marginRight="spacingM"
        style={{
          backgroundColor: tokens.red500,
        }}
      >
        <SmallContainerBox />
      </Box>
      <Box
        padding="spacingXs"
        marginRight="spacingM"
        style={{
          backgroundColor: tokens.blue500,
        }}
      >
        <SmallContainerBox />
      </Box>
    </Flex>
  );
}
function BoxSpacingExample() {
  const SmallContainerBox = () => (
    <Box
      as="span"
      style={{
        display: 'block',
        width: '50px',
        height: '50px',
        backgroundColor: tokens.gray100,
      }}
    />
  );

  return (
    <Flex style={{ backgroundColor: tokens.gray300 }}>
      <Box
        padding="spacingXs"
        marginRight="spacingM"
        style={{
          backgroundColor: tokens.red500,
        }}
      >
        <SmallContainerBox />
      </Box>
      <Box
        padding="spacingXs"
        marginRight="spacingM"
        style={{
          backgroundColor: tokens.blue500,
        }}
      >
        <SmallContainerBox />
      </Box>
    </Flex>
  );
}
Open in Playground

as property

If you want to keep all the styling you've applied to a component but just switch what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime.

Hide code
function BoxSpacingExample() {
  return (
    <Flex alignItems="center">
      <Box as="span" display="inline" marginRight="spacingL">
        I am span
      </Box>
      <Box as="code" display="inline" marginRight="spacingL">
        I am code
      </Box>
    </Flex>
  );
}
function BoxSpacingExample() {
  return (
    <Flex alignItems="center">
      <Box as="span" display="inline" marginRight="spacingL">
        I am span
      </Box>
      <Box as="code" display="inline" marginRight="spacingL">
        I am code
      </Box>
    </Flex>
  );
}
Open in Playground

Props (API reference)