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:

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.

Props (API reference)

Name

Type

Default

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

children
ReactNode

className
string

CSS class to be appended to the root element

display
"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 & {}

Sets the display behavior of the element

margin
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin to one of the corresponding spacing tokens

marginBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-left to one of the corresponding spacing tokens

marginRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-right to one of the corresponding spacing tokens

marginTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-top to one of the corresponding spacing tokens

padding
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding to one of the corresponding spacing tokens

paddingBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-bottom to one of the corresponding spacing tokens

paddingLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-left to one of the corresponding spacing tokens

paddingRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-right to one of the corresponding spacing tokens

paddingTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-top to one of the corresponding spacing tokens

testId
string

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