Stack

Examples
Space: gutter
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="gutter">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: xxsmall
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="xxsmall">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: xsmall
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="xsmall">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: small
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="small">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: medium
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="medium">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: large
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="large">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: xlarge
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="xlarge">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Space: xxlarge
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack space="xxlarge">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Align to center
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack align="center" space="gutter">
  <Placeholder height={40} width={40} />
  <Placeholder height={40} width={60} />
  <Placeholder height={40} width={80} />
</Stack>
Align to right
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack align="right" space="gutter">
  <Placeholder height={40} width={40} />
  <Placeholder height={40} width={60} />
  <Placeholder height={40} width={80} />
</Stack>
Responsive alignment (e.g. center on mobile, left from tablet upwards)
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack align={["center", "left"]} space="gutter">
  <Placeholder height={40} width={40} />
  <Placeholder height={40} width={60} />
  <Placeholder height={40} width={80} />
</Stack>
Dividers
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Stack dividers={true} space="gutter">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>

Required props

children
ReactNodeNoStrings
space
ResponsiveProp<"medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none">

Optional props

component
"div" | "ol" | "ul"
align
ResponsiveProp<"left" | "right" | "center">
dividers
boolean

Further References