Layout Examples

We've looked at loooots of examples as we've covered the various components. But you might be aching for more, so here are a few custom layouts that you can play with, built using layland components ❤️

Header Body Footer

info

A simple Column(Content,Stretch,Content) takes care of this common layout:

Live Editor

<Column $height={200} $space={0}> <Content style={{background: "lightskyblue"}}> Header </Content> <Stretch style={{background: "darkorange"}}> Body </Stretch> <Content style={{background: "lightpink"}}> Footer </Content> </Column>

<Column $height={200} $space={0}>
  <Content style={{background: "lightskyblue"}}>
    Header
  </Content>
  
  <Stretch style={{background: "darkorange"}}>
    Body
  </Stretch>
  
  <Content style={{background: "lightpink"}}>
    Footer
  </Content>
</Column>

Result

Loading...

Header Sidebar Body Sidebar Footer

info

Pseudocode:

Column
  Content => Header
  Row {scale=stretch}
    Content => Sidebar, Stretch => Body, Content =>Sidebar 
  Content => Footer

Live Playground:

Live Editor

<Column $height={200} $space={0}> <Content style={{background: "lightskyblue"}}> Header </Content> <Row $space={0} $scale='stretch'> <Content $padding={[0,10]} style={{background: "limegreen"}}> Sidebar 1 </Content> <Stretch style={{background: "darkorange"}}> Body </Stretch> <Content $padding={[0,10]} style={{background: "gold"}}> Sidebar 2 </Content> </Row> <Content style={{background: "lightpink"}}> Footer </Content> </Column>

<Column $height={200} $space={0}>

  <Content style={{background: "lightskyblue"}}>
    Header
  </Content>
  
  <Row $space={0} $scale='stretch'>
    <Content $padding={[0,10]} style={{background: "limegreen"}}>
      Sidebar 1
    </Content>
    <Stretch style={{background: "darkorange"}}>
      Body
    </Stretch>
    <Content $padding={[0,10]} style={{background: "gold"}}>
      Sidebar 2
    </Content>
  </Row>
  
  <Content style={{background: "lightpink"}}>
    Footer
  </Content>

</Column>

Result

Loading...