Row

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

Live Editor

<Row> <Stretch style={{background: "lightskyblue"}}>Hello</Stretch> <Stretch style={{background: "lightpink"}}>World</Stretch> </Row>

<Row>
  <Stretch style={{background: "lightskyblue"}}>Hello</Stretch>
  <Stretch style={{background: "lightpink"}}>World</Stretch>
</Row>

Result

Loading...

Since Row follows the space principle you can compose / nest Rows easily. The following example has two Rows in a Row(Row(blue,pink),Row(blue,pink)) heirarchy but to the user it looks seemless (like a single Row(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

<Row> <Row $scale="stretch"> <Stretch style={{background: "lightskyblue"}}>Hello</Stretch> <Stretch style={{background: "lightpink"}}>World</Stretch> </Row> <Row $scale="stretch"> <Stretch style={{background: "lightskyblue"}}>Hello</Stretch> <Stretch style={{background: "lightpink"}}>World</Stretch> </Row> </Row>

<Row>
  <Row $scale="stretch">
    <Stretch style={{background: "lightskyblue"}}>Hello</Stretch>
    <Stretch style={{background: "lightpink"}}>World</Stretch>
  </Row>
  <Row $scale="stretch">
    <Stretch style={{background: "lightskyblue"}}>Hello</Stretch>
    <Stretch style={{background: "lightpink"}}>World</Stretch>
  </Row>
</Row>

Result

Loading...

Alignment

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

Live Editor

<Row $height={60}> <div style={{background: "lightskyblue"}}>Hello</div> <div style={{background: "lightpink"}}>World</div> </Row>

<Row $height={60}>
  <div style={{background: "lightskyblue"}}>Hello</div>
  <div style={{background: "lightpink"}}>World</div>
</Row>

Result

Loading...

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

Live Editor

<Row $vAlign='start' $height={60}> <div style={{background: "lightskyblue"}}>Hello</div> <div style={{background: "lightpink"}}>World</div> </Row>

<Row $vAlign='start' $height={60}>
  <div style={{background: "lightskyblue"}}>Hello</div>
  <div style={{background: "lightpink"}}>World</div>
</Row>

Result

Loading...

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

Live Editor

<Row $hAlign='end' $height={60}> <div style={{background: "lightskyblue"}}>Hello</div> <div style={{background: "lightpink"}}>World</div> </Row>

<Row $hAlign='end' $height={60}>
  <div style={{background: "lightskyblue"}}>Hello</div>
  <div style={{background: "lightpink"}}>World</div>
</Row>

Result

Loading...

info

$vAlign: 'baseline' is really useful with mixed font sizes

Live Editor

<Row $vAlign='baseline' $space={0}> <div style={{fontSize:'24px'}}>$100</div> <div style={{fontSize:'16px'}}>/month</div> </Row>

<Row $vAlign='baseline' $space={0}>
  <div style={{fontSize:'24px'}}>$100</div>
  <div style={{fontSize:'16px'}}>/month</div>
</Row>

Result

Loading...

Reverse

Row takes $reverse?: boolean that lays out its children in reverse order of how they appear in the dom.

info

Common use case: With bottom of the form previous ---- next buttons, $reverse allows you to have tab order be intutive while the layout being visually appealing (tabbing out of input takes you to "Next"):

Live Editor

<Column> <input/> <Row $reverse={true}> <button>Next</button> <Stretch/> <button>Back</button> </Row> </Column>

<Column>
  <input/>
  <Row $reverse={true}>
    <button>Next</button>
    <Stretch/>
    <button>Back</button>
  </Row>
</Column>

Result

Loading...

Only

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

Live Editor

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

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

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.