Forma 36 - 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.


function HorizontalStackExample() {
  return (
    <Stack>
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.green500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.red500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.blue500,
        }}
      />
    </Stack>
  );
}function HorizontalStackExample() {
  return (
    <Stack>
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.green500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.red500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.blue500,
        }}
      />
    </Stack>
  );
}

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.


function VerticalStackExample() {
  return (
    <Stack flexDirection="column" spacing="spacingS">
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.green500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.red500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.blue500,
        }}
      />
    </Stack>
  );
}function VerticalStackExample() {
  return (
    <Stack flexDirection="column" spacing="spacingS">
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.green500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.red500,
        }}
      />
      <Box
        style={{
          width: '60px',
          height: '60px',
          color: tokens.colorWhite,
          backgroundColor: tokens.blue500,
        }}
      />
    </Stack>
  );
}

Props (API reference)

Open in Storybook

Name
alignContent
Description
Defines how each line is aligned within a flexbox/grid container.
"end"
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
string & {}
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"
Name
alignItems
Description
Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
"end"
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
string & {}
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"
Name
alignSelf
Description
Works like align-items, but applies only to a single flexbox item, instead of all of them.
"end"
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"unset"
string & {}
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"
Name
as
HTML Tag or React Component (e.g. div, span, etc)
Name
children
Description
Child nodes to be rendered in the component
ReactNode
Name
className
Description
CSS class to be appended to the root element
string
Name
flex
Description
A shorthand property for flex-grow, flex-shrink, flex-basis
0
"none"
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"unset"
"fit-content"
"max-content"
"min-content"
string & {}
number & {}
Name
flexBasis
Description
Defines the initial size of a flexbox item.
0
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"unset"
"fit-content"
"max-content"
"min-content"
string & {}
"-moz-max-content"
"-moz-min-content"
"-webkit-auto"
Name
flexDirection
Description
Defines how flexbox items are ordered within a flexbox container.
"row"
"column"
Name
flexGrow
Description
Defines how much a flexbox item should grow if there's space available.
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}
Name
flexShrink
Description
Defines how much a flexbox item should shrink if there's not enough space available.
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}
Name
flexWrap
Description
Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.
"inherit"
"initial"
"wrap"
"-moz-initial"
"revert"
"unset"
"nowrap"
"wrap-reverse"
Name
fullHeight
Description
Sets height: 100%
false
true
Name
fullWidth
Description
Sets width: 100%
false
true
Name
isInline
Description
Sets display: inline-flex
false
true
Name
justifyContent
Description
Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.
"end"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
string & {}
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"
Name
justifyItems
Description
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.
"end"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
string & {}
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"
Name
justifySelf
Description
Sets the way a box is justified inside its alignment container along the appropriate axis.
"end"
"auto"
"baseline"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"unset"
string & {}
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"
Name
margin
Description
sets margin to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginBottom
Description
sets margin-bottom to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginLeft
Description
sets margin-left to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginRight
Description
sets margin-right to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginTop
Description
sets margin-top to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
order
Description
Defines the order of a flexbox item
"inherit"
"initial"
"-moz-initial"
"revert"
"unset"
number & {}
Name
padding
Description
sets padding to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingBottom
Description
sets padding-bottom to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingLeft
Description
sets padding-left to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingRight
Description
sets padding-right to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
paddingTop
Description
sets padding-top to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
spacing
Description
The space between each stack item
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
testId
Description
A [data-test-id] attribute used for testing purposes
string

Import

Examples

Horizontal Stack

Vertical Stack

Props (API reference)

alignContent

alignItems

alignSelf

as

children

className

flex

flexBasis

flexDirection

flexGrow

flexShrink

flexWrap

fullHeight

fullWidth

isInline

justifyContent

justifyItems

justifySelf

margin

marginBottom

marginLeft

marginRight

marginTop

order

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

spacing

testId

Help improve this page