Stack

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

Basically, Stack wraps Flex component and allows you to create vertical and horizontal stacks without specifying alignItems and justifyContent properties.

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

Import

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

Examples

You can change the defaults by using spacing and flexDirection correspondingly.

Horizontal Stack

By default, spacing between all Stack children equals our spacingM token. The default direction is row, so Stack layouts its children horizontally.

Vertical Stack

By changing flexDirection property to column, we make Stack component to layout its children vertically. In this example you can also find an adjusted spacing between children by using spacing property.

Props (API reference)

Name

Type

Default

alignContent
"end"
string & {}
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"

Defines how each line is aligned within a flexbox/grid container.

alignItems
"end"
string & {}
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

alignSelf
"end"
string & {}
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"

Works like align-items, but applies only to a single flexbox item, instead of all of them.

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

children
ReactNode

Child nodes to be rendered in the component

className
string

CSS class to be appended to the root element

flex
0
"none"
string & {}
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"unset"
"fit-content"
"max-content"
"min-content"
number & {}

A shorthand property for flex-grow, flex-shrink, flex-basis

flexBasis
0
string & {}
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"unset"
"fit-content"
"max-content"
"min-content"
"-moz-max-content"
"-moz-min-content"
"-webkit-auto"

Defines the initial size of a flexbox item.

flexDirection
"row"
"column"

Defines how flexbox items are ordered within a flexbox container.

flexGrow
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}

Defines how much a flexbox item should grow if there's space available.

flexShrink
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}

Defines how much a flexbox item should shrink if there's not enough space available.

flexWrap
"inherit"
"initial"
"wrap"
"-moz-initial"
"revert"
"unset"
"nowrap"
"wrap-reverse"

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

fullHeight
false
true

Sets height: 100%

fullWidth
false
true

Sets width: 100%

isInline
false
true

Sets display: inline-flex

justifyContent
"end"
string & {}
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"

Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

justifyItems
"end"
string & {}
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"

Defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

justifySelf
"end"
string & {}
"auto"
"baseline"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"

Sets the way a box is justified inside its alignment container along the appropriate axis.

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

order
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}

Defines the order of a flexbox item

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

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

The space between each stack item

testId
string

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