---
name: Layout Examples
route: /guidance-layouts/
---

import { Playground } from 'docz';
import { Content, Vertical, Horizontal, Stretch } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Layout Examples

> This section is in a [series of sections that provide further guidance for success][guidance].

Here are a few layout examples for you to play around with.

## Header Body Footer
A simple `Vertical(Content,Stretch,Content)` takes care of this common layout: 

<Playground style={{height: '200px'}}>
  <Vertical height={'100%'} spacing={0}>
    
    <Content style={{backgroundColor: "lightskyblue"}}>
      Header
    </Content>
    
    <Stretch style={{backgroundColor: "darkorange"}}>
      Body
    </Stretch>
    
    <Content style={{backgroundColor: "lightpink"}}>
      Footer
    </Content>

  </Vertical>
</Playground>

## Header Sidebar Body Sidebar Footer

```
Vertical
  Content-Header
  Horizontal[sizing=stretch] 
    Content-Sidebar, Stretch-Body, Content-Sidebar 
  Content-Footer
```

takes care of this common layout: 

<Playground style={{height: '200px'}}>
  <Vertical height={'100%'} spacing={0}>
    
    <Content style={{backgroundColor: "lightskyblue"}}>
      Header
    </Content>
    
    <Horizontal sizing='stretch' spacing={0}>
      <Content padding={[0,10]} style={{backgroundColor: "limegreen"}}>
        Sidebar 1
      </Content>
      <Stretch style={{backgroundColor: "darkorange"}}>
        Body
      </Stretch>
      <Content padding={[0,10]} style={{backgroundColor: "gold"}}>
        Sidebar 2
      </Content>
    </Horizontal>
    
    <Content style={{backgroundColor: "lightpink"}}>
      Footer
    </Content>

  </Vertical>
</Playground>


[guidance]:../guidance/