Column

Examples
Standard Columns
Theme: seekAnz
Column
Column
Column
Theme: seekBusiness
Column
Column
Column
Theme: jobsDbRebrand
Column
Column
Column
Theme: jobsDb
Column
Column
Column
Theme: jobStreet
Column
Column
Column
Theme: jobStreetClassic
Column
Column
Column
Theme: wireframe
Column
Column
Column
Code:
<Columns space="small">
  <Column>
    <Placeholder height={60} label="Column" />
  </Column>
  <Column>
    <Placeholder height={60} label="Column" />
  </Column>
  <Column>
    <Placeholder height={60} label="Column" />
  </Column>
</Columns>
Available widths
Theme: seekAnz
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Theme: seekBusiness
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Theme: jobsDbRebrand
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Theme: jobsDb
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Theme: jobStreet
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Theme: jobStreetClassic
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Theme: wireframe
content
Fluid
1/2
Fluid
1/3
Fluid
2/3
Fluid
1/4
Fluid
3/4
Fluid
1/5
Fluid
2/5
Fluid
3/5
Fluid
4/5
Fluid
Code:
<Stack space="medium">
  <Columns space="small">
    <Column width="content">
      <Placeholder height={60} label="content" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="1/2">
      <Placeholder height={60} label="1/2" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="1/3">
      <Placeholder height={60} label="1/3" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="2/3">
      <Placeholder height={60} label="2/3" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="1/4">
      <Placeholder height={60} label="1/4" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="3/4">
      <Placeholder height={60} label="3/4" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="1/5">
      <Placeholder height={60} label="1/5" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="2/5">
      <Placeholder height={60} label="2/5" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="3/5">
      <Placeholder height={60} label="3/5" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
  <Columns space="small">
    <Column width="4/5">
      <Placeholder height={60} label="4/5" />
    </Column>
    <Column>
      <Placeholder height={60} label="Fluid" />
    </Column>
  </Columns>
</Stack>

Required props

children
ReactNode

Optional props

width
"content" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5"

Further References