Box

Box is the most abstract layout component that allows to apply margin and padding properties according to the spacing system. By default, it renders a div element.

The Box component is useful because it helps with several common cases:

• Create a layout that uses Forma 36 spacing system
• Compose new component and allow to override element using the as property.

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:

Open in Playground
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>
  );
}
Hide source

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.

Open in Playground
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>
  );
}
Hide source

Props (API reference)

• Name

  as

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  display

  Description

  Sets the display behavior of the element

  "ruby"

  "table"

  "-moz-initial"

  "inherit"

  "initial"

  "revert"

  "unset"

  "block"

  "inline"

  "run-in"

  "-ms-flexbox"

  "-ms-grid"

  "-webkit-flex"

  "flex"

  "flow"

  "flow-root"

  "grid"

  "ruby-base"

  "ruby-base-container"

  "ruby-text"

  "ruby-text-container"

  "table-caption"

  "table-cell"

  "table-column"

  "table-column-group"

  "table-footer-group"

  "table-header-group"

  "table-row"

  "table-row-group"

  "-ms-inline-flexbox"

  "-ms-inline-grid"

  "-webkit-inline-flex"

  "inline-block"

  "inline-flex"

  "inline-grid"

  "inline-list-item"

  "inline-table"

  "contents"

  "list-item"

  "none"

  string & {}
• Name

  margin

  Description

  sets margin to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginBottom

  Description

  sets margin-bottom to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginLeft

  Description

  sets margin-left to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginRight

  Description

  sets margin-right to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginTop

  Description

  sets margin-top to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  padding

  Description

  sets padding to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  paddingBottom

  Description

  sets padding-bottom to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  paddingLeft

  Description

  sets padding-left to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  paddingRight

  Description

  sets padding-right to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  paddingTop

  Description

  sets padding-top to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string