Forma 36

Box

Give feedback

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; and 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:

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.

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)

Name

Type

Default

as
"a"
"abbr"
"address"
"animate"
"animateMotion"
"animateTransform"
"area"
"article"
"aside"
"audio"
"b"
"base"
"bdi"
"bdo"
"big"
"blockquote"
"body"
"br"
"button"
"canvas"
"caption"
"center"
"circle"
"cite"
"clipPath"
"code"
"col"
"colgroup"
"data"
"datalist"
"dd"
"defs"
"del"
"desc"
"details"
"dfn"
"dialog"
"div"
"dl"
"dt"
"ellipse"
"em"
"embed"
"feBlend"
"feColorMatrix"
"feComponentTransfer"
"feComposite"
"feConvolveMatrix"
"feDiffuseLighting"
"feDisplacementMap"
"feDistantLight"
"feDropShadow"
"feFlood"
"feFuncA"
"feFuncB"
"feFuncG"
"feFuncR"
"feGaussianBlur"
"feImage"
"feMerge"
"feMergeNode"
"feMorphology"
"feOffset"
"fePointLight"
"feSpecularLighting"
"feSpotLight"
"feTile"
"feTurbulence"
"fieldset"
"figcaption"
"figure"
"filter"
"footer"
"foreignObject"
"form"
"g"
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"
"head"
"header"
"hgroup"
"hr"
"html"
"i"
"iframe"
"image"
"img"
"input"
"ins"
"kbd"
"keygen"
"label"
"legend"
"li"
"line"
"linearGradient"
"link"
"main"
"map"
"mark"
"marker"
"mask"
"menu"
"menuitem"
"meta"
"metadata"
"meter"
"mpath"
"nav"
"noindex"
"noscript"
"object"
"ol"
"optgroup"
"option"
"output"
"p"
"param"
"path"
"pattern"
"picture"
"polygon"
"polyline"
"pre"
"progress"
"q"
"radialGradient"
"rect"
"rp"
"rt"
"ruby"
"s"
"samp"
"script"
"search"
"section"
"select"
"set"
"slot"
"small"
"source"
"span"
"stop"
"strong"
"style"
"sub"
"summary"
"sup"
"svg"
"switch"
"symbol"
"table"
"tbody"
"td"
"template"
"text"
"textarea"
"textPath"
"tfoot"
"th"
"thead"
"time"
"title"
"tr"
"track"
"tspan"
"u"
"ul"
"use"
"var"
"video"
"view"
"wbr"
"webview"
ComponentClass<any, any>
FunctionComponent<any>

children
ReactNode

className
string

CSS class to be appended to the root element

display
"ruby"
"table"
"-moz-initial"
"inherit"
"initial"
"revert"
"revert-layer"
"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

Help improve this page

Edit on GithubRead the contribution guide