---
name: Vertical
route: /vertical/
---

import { Playground } from 'docz';
import { Vertical } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Vertical 

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

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

Since `Vertical` follows the [spacing principle][principle-spacing] you can compose / nest `Vertical`s easily. The following example has three `Verticals` in a `Vertical(Vertical(blue,pink),Vertical(blue,pink))` heirarchy but to the user it looks seemless (like a single `Vertical(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.

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

## Alignment
By default `verticalAlign:top` and `horizontalAlign:stretch`. It helps you write simple vertical layouts that start vertically at the top and fill the horizontal space completely: 

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

* `verticalAlign?: 'top' /** default */ | 'center' | 'bottom'` Controls vertical alignment of children. e.g. `verticalAlign='bottom'` gives us:

<Playground>
  <Vertical verticalAlign='bottom' style={{height: '150px'}} spacing={10}>
    <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
    <div style={{backgroundColor: "lightpink"}}>World</div>
    <div style={{backgroundColor: "gold"}}>🌹</div>
  </Vertical>
</Playground>

* `horizontalAlign?: 'stretch' /** default */ | 'left' | 'center' | 'right'` Controls horizontal alignment of children. e.g. `horizontalAlign='left'` gives us:

<Playground>
  <Vertical horizontalAlign='left'>
    <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
    <div style={{backgroundColor: "lightpink"}}>World</div>
    <div style={{backgroundColor: "gold"}}>🌹</div>
  </Vertical>
</Playground>

## Spacing

`Vertical` [supports `spacing`][common-types].

## BaseProps

`Vertical` [supports all `BaseProps`][common-types].

## SizingProp

`Vertical` supports the `sizing` prop as explained in the [sizing principle][principle-sizing].

[common-types]:../common-types/
[principle-spacing]:../principle-spacing/
[principle-sizing]:../principle-sizing/
[defaults]:../defaults/