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

Stack

Stack is a layout component that makes it easy to stack elements together and apply a space between them.

Table of contents

How to use Stack

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

  • Used to add spacing between elements in the horizontal or vertical direction

Import

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

Code examples

Margins & Paddings

Stack components inherits behaviour of Box component and allows to pass margins and paddings that are based on our spacing system.

To control the behaviour of the Flex component you can use specific properties that match all main Flexbox related CSS attributes.

Spacing and Direction

By default, spacing between all Stack children equals our spacingM token. The default direction is row. You can change the defaults by using spacing and flexDirection correspondingly.

Props

NameRequiredDefaultTypeDescription
alignItemsAlignItemsDefines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
flexDirection
"row"
"column"
Defines how flexbox items are ordered within a flexbox container.
fullWidth
false
true
Sets width: 100%
isInline
false
true
Sets display: inline-flex
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
spacingSpacingThe space between each stack item
asHTML Tag or React Component, e.g. div, span, etc.
childrenReactNodeChild nodes to be rendered in the component
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