Column

Lays out children in a vertically $spaced layout (default spacing is 24px).

Live Editor

<Column> <div style={{backgroundColor: "lightskyblue"}}>Hello</div> <div style={{backgroundColor: "lightpink"}}>World</div> </Column>

<Column>
  <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
  <div style={{backgroundColor: "lightpink"}}>World</div>
</Column>

Result

Loading...

Since Column follows the space principle you can compose / nest Columns easily. The following example has three Columns in a Column(Column(blue,pink),Column(blue,pink)) heirarchy but to the user it looks seemless (like a single Column(blue,pink,blue,pink)). This ability to nest allows you to easily create and reuse components without having to worry about how they will get used.

Live Editor

<Column> <Column> <div style={{backgroundColor: "lightskyblue"}}>Hello</div> <div style={{backgroundColor: "lightpink"}}>World</div> </Column> <Column> <div style={{backgroundColor: "lightskyblue"}}>Second Hello</div> <div style={{backgroundColor: "lightpink"}}>Second World</div> </Column> </Column>

<Column>
  <Column>
    <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
    <div style={{backgroundColor: "lightpink"}}>World</div>
  </Column>
  <Column>
    <div style={{backgroundColor: "lightskyblue"}}>Second Hello</div>
    <div style={{backgroundColor: "lightpink"}}>Second World</div>
  </Column>
</Column>

Result

Loading...

Alignment

• By default $vAlign:start and $hAlign:stretch. It helps you write simple vertical layouts that start vertically at the top and fill the horizontal $space completely:

Live Editor

<Column> <div style={{backgroundColor: "lightskyblue"}}>Hello</div> <div style={{backgroundColor: "lightpink"}}>World</div> <div style={{backgroundColor: "gold"}}>🌹</div> </Column>

<Column>
  <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
  <div style={{backgroundColor: "lightpink"}}>World</div>
  <div style={{backgroundColor: "gold"}}>🌹</div>
</Column>

Result

Loading...

• $vAlign?: 'start' /** default */ | 'center' | 'end' controls vertical alignment of children. e.g. $vAlign='end' gives us:

Live Editor

<Column $vAlign='end' $height={150} $space={10}> <div style={{backgroundColor: "lightskyblue"}}>Hello</div> <div style={{backgroundColor: "lightpink"}}>World</div> <div style={{backgroundColor: "gold"}}>🌹</div> </Column>

<Column $vAlign='end' $height={150} $space={10}>
  <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
  <div style={{backgroundColor: "lightpink"}}>World</div>
  <div style={{backgroundColor: "gold"}}>🌹</div>
</Column>

Result

Loading...

• $hAlign?: 'stretch' /** default */ | 'start' | 'center' | 'end' Controls horizontal alignment of children. e.g. $hAlign='left' gives us:

Live Editor

<Column $hAlign='left'> <div style={{backgroundColor: "lightskyblue"}}>Hello</div> <div style={{backgroundColor: "lightpink"}}>World</div> <div style={{backgroundColor: "gold"}}>🌹</div> </Column>

<Column $hAlign='left'>
  <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
  <div style={{backgroundColor: "lightpink"}}>World</div>
  <div style={{backgroundColor: "gold"}}>🌹</div>
</Column>

Result

Loading...

Only

You chose to have the component visible $only on mobile or desktop (determined by $bp).

Live Editor

<> <Column $only='desktop'> Only on desktop </Column> <Column $only='mobile'> Only on mobile </Column> </>

<>
  <Column $only='desktop'>
    Only on desktop
  </Column>
  <Column $only='mobile'>
    Only on mobile
  </Column>
</>

Result

Loading...

danger

If you chose to hide an item like this, the parent should have spacing of 0 otherwise there might be some empty space by the sibling.

Space

Column supports the $space prop as explained in the space principle.

Scale

Column supports the $scale prop as explained in the scale principle.

DivProps

Column supports all DivProps.

BaseProps

Column supports all BaseProps.