Stack#

Import#

import { Stack } from 'bumbag';

Usage#

The <Stack> component that assists in creating layouts where it's children are evenly spaced.

First

Second

Third

Fourth

Fifth

Editable example

<Stack>
  <Card>First</Card>
  <Card>
    <Stack>
      <Card variant="bordered">Second</Card>
      <Card variant="bordered">Third</Card>
    </Stack>
  </Card>
  <Stack orientation="horizontal">
    <Card>Fourth</Card>
    <Card>Fifth</Card>
  </Stack>
</Stack>

<Stack>
  <Card>First</Card>
  <Card>
    <Stack>
      <Card variant="bordered">Second</Card>
      <Card variant="bordered">Third</Card>
    </Stack>
  </Card>
  <Stack orientation="horizontal">
    <Card>Fourth</Card>
    <Card>Fifth</Card>
  </Stack>
</Stack>

Gap#

You can specify a gap spacing on your <Stack> with the spacing prop.

First

Second

Third

Editable example

<Stack spacing="major-2">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

<Stack spacing="major-2">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

Vertical breakpoints#

You can set a verticalBelow breakpoint, in which the horizontal stack will switch to a vertical orientation under the specified breakpoint.

Try drag the viewport with the slider

Editable example

<Stack orientation="horizontal" verticalBelow="mobile">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

<Stack orientation="horizontal" verticalBelow="mobile">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

Alignments#

Horizontal alignment#

First

Second

Third

First

Second

Third

First

Second

Third

Editable example

<Stack alignX="left">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>
<Stack alignX="center">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>
<Stack alignX="right">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

<Stack alignX="left">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>
<Stack alignX="center">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>
<Stack alignX="right">
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

Vertical alignment#

First

Second

First

Second

First

Second

Editable example

<Stack alignY="top" height="300px" backgroundColor="white700">
  <Card>First</Card>
  <Card>Second</Card>
</Stack>
<Stack alignY="center" height="300px" backgroundColor="primaryTint">
  <Card>First</Card>
  <Card>Second</Card>
</Stack>
<Stack alignY="bottom" height="300px" backgroundColor="white700">
  <Card>First</Card>
  <Card>Second</Card>
</Stack>

<Stack alignY="top" height="300px" backgroundColor="white700">
  <Card>First</Card>
  <Card>Second</Card>
</Stack>
<Stack alignY="center" height="300px" backgroundColor="primaryTint">
  <Card>First</Card>
  <Card>Second</Card>
</Stack>
<Stack alignY="bottom" height="300px" backgroundColor="white700">
  <Card>First</Card>
  <Card>Second</Card>
</Stack>

Stack Props#

orientation "horizontal" | "vertical"

Sets the orientation of the stack component.

spacing string

Sets the spacing between the stack items.

verticalBelow string

Indicates the breakpoint at which the stack should become vertical.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Stack.styles.base

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor lacus lacus, id mattis felis cursus at. Sed mollis eros sem, eu tincidunt lectus interdum sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia lacinia dui id pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec laoreet magna non ornare consectetur. Proin cursus consectetur ligula, et posuere leo. Cras placerat sapien in consectetur aliquet.

Stack.styles.child.base

Stack.styles.vertical

Stack.styles.child.vertical

Stack.styles.horizontal

Stack.styles.child.horizontal

On this page