Columns

Examples
No space
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Columns space="none">
  <Column>
    <Placeholder height={60} />
  </Column>
  <Column>
    <Placeholder height={60} />
  </Column>
</Columns>
Custom space, e.g. small
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Columns space="small">
  <Column>
    <Placeholder height={60} />
  </Column>
  <Column>
    <Placeholder height={60} />
  </Column>
</Columns>
Responsive space, e.g. ["small", "large"]
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Columns space={["small", "large"]}>
  <Column>
    <Placeholder height={60} />
  </Column>
  <Column>
    <Placeholder height={60} />
  </Column>
</Columns>
Vertically align to center
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Columns alignY="center" space="small">
  <Column>
    <Placeholder height={60} />
  </Column>
  <Column>
    <Placeholder height={100} />
  </Column>
</Columns>
Vertically align to bottom
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Columns alignY="bottom" space="small">
  <Column>
    <Placeholder height={60} />
  </Column>
  <Column>
    <Placeholder height={100} />
  </Column>
</Columns>
Responsive alignment (e.g. top on mobile, center on tablet upwards)
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Columns alignY={["top", "center"]} space="small">
  <Column>
    <Placeholder height={60} />
  </Column>
  <Column>
    <Placeholder height={100} />
  </Column>
</Columns>
Collapse below tablet
Theme: seekAnz
First
Second
Theme: seekBusiness
First
Second
Theme: jobsDbRebrand
First
Second
Theme: jobsDb
First
Second
Theme: jobStreet
First
Second
Theme: jobStreetClassic
First
Second
Theme: wireframe
First
Second
Code:
<Columns collapseBelow="tablet" space="small">
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>
Collapse below desktop
Theme: seekAnz
First
Second
Theme: seekBusiness
First
Second
Theme: jobsDbRebrand
First
Second
Theme: jobsDb
First
Second
Theme: jobStreet
First
Second
Theme: jobStreetClassic
First
Second
Theme: wireframe
First
Second
Code:
<Columns collapseBelow="desktop" space="small">
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>
Collapse below tablet with custom space, e.g. "small"
Theme: seekAnz
First
Second
Theme: seekBusiness
First
Second
Theme: jobsDbRebrand
First
Second
Theme: jobsDb
First
Second
Theme: jobStreet
First
Second
Theme: jobStreetClassic
First
Second
Theme: wireframe
First
Second
Code:
<Columns collapseBelow="tablet" space="small">
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>
Collapse below desktop with custom space, e.g. "small"
Theme: seekAnz
First
Second
Theme: seekBusiness
First
Second
Theme: jobsDbRebrand
First
Second
Theme: jobsDb
First
Second
Theme: jobStreet
First
Second
Theme: jobStreetClassic
First
Second
Theme: wireframe
First
Second
Code:
<Columns collapseBelow="desktop" space="small">
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>
Collapse below tablet with responsive space, e.g. ["small", "large"]
Theme: seekAnz
First
Second
Theme: seekBusiness
First
Second
Theme: jobsDbRebrand
First
Second
Theme: jobsDb
First
Second
Theme: jobStreet
First
Second
Theme: jobStreetClassic
First
Second
Theme: wireframe
First
Second
Code:
<Columns collapseBelow="tablet" space={["small", "large"]}>
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>
Collapse below desktop with responsive space, e.g. ["small", "medium", "xlarge"]
Theme: seekAnz
First
Second
Theme: seekBusiness
First
Second
Theme: jobsDbRebrand
First
Second
Theme: jobsDb
First
Second
Theme: jobStreet
First
Second
Theme: jobStreetClassic
First
Second
Theme: wireframe
First
Second
Code:
<Columns collapseBelow="desktop" space={["small", "medium", "xlarge"]}>
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>
Reverse
Theme: seekAnz
Second
First
Theme: seekBusiness
Second
First
Theme: jobsDbRebrand
Second
First
Theme: jobsDb
Second
First
Theme: jobStreet
Second
First
Theme: jobStreetClassic
Second
First
Theme: wireframe
Second
First
Code:
<Columns reverse={true} space="small">
  <Column>
    <Placeholder height={60} label="First" />
  </Column>
  <Column>
    <Placeholder height={60} label="Second" />
  </Column>
</Columns>

Required props

children
Column | (ReactElement<ColumnProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null)[]
space
ResponsiveProp<"medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none">

Optional props

collapseBelow
"tablet" | "desktop"
reverse
boolean
alignY
ResponsiveProp<"bottom" | "top" | "center">

Further References