This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

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.

Table of contents

How to use Box

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';

Code 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

as property

If you want to keep all the styling you've applied to a component but just switch out 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

NameRequiredDefaultTypeDescription
displayDisplaySets the display behavior of the element
marginSpacingsets margin to one of the corresponding spacing tokens
marginBottomSpacingsets margin-bottom to one of the corresponding spacing tokens
marginLeftSpacingsets margin-left to one of the corresponding spacing tokens
marginRightSpacingsets margin-right to one of the corresponding spacing tokens
marginTopSpacingsets margin-top to one of the corresponding spacing tokens
paddingSpacingsets padding to one of the corresponding spacing tokens
paddingBottomSpacingsets padding-bottom to one of the corresponding spacing tokens
paddingLeftSpacingsets padding-left to one of the corresponding spacing tokens
paddingRightSpacingsets padding-right to one of the corresponding spacing tokens
paddingTopSpacingsets padding-top to one of the corresponding spacing tokens
asHTML Tag or React Component, e.g. div, span, etc.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes