Forma 36 - Stack

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>
  );
}
Open in Playground

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>
  );
}
Open in Playground

Props (API reference)

Name	Type	Default
alignContent	"end" string & {} "baseline" "inherit" "initial" "start" "center" "-moz-initial" "revert" "revert-layer" "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" "revert-layer" "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" "revert-layer" "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 string & {} "none" "auto" "inherit" "initial" "content" "-moz-initial" "revert" "revert-layer" "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" "revert-layer" "unset" "fit-content" "max-content" "min-content" "-moz-fit-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	string & {} "inherit" "initial" "-moz-initial" "revert" "revert-layer" "unset" number & {} Defines how much a flexbox item should grow if there's space available.
flexShrink	string & {} "inherit" "initial" "-moz-initial" "revert" "revert-layer" "unset" number & {} Defines how much a flexbox item should shrink if there's not enough space available.
flexWrap	"inherit" "initial" "wrap" "-moz-initial" "revert" "revert-layer" "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" "revert-layer" "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" "revert-layer" "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" "revert-layer" "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	string & {} "inherit" "initial" "-moz-initial" "revert" "revert-layer" "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

Import

Examples

Horizontal Stack

Vertical Stack

Props (API reference)

Name

Type

Default

Help improve this page