Layout

The Layout component helps in handling overall layout of a page.

Report Issue Github

Usage

Use the Layout in combination to create a layout.

Basic Usage


<Layout>
  <Layout.Header>
    <Card radius={'none'}>
      <Card.Header title={'header'} />
    </Card>
  </Layout.Header>
  <Layout>
    <Layout.Sider>
      <Card radius={'none'}>
        <Card.Header title={'sider'} />
      </Card>
    </Layout.Sider>
    <Layout.Content>
      <Card radius={'none'}>
        <Card.Header title={'content'} />
      </Card>
    </Layout.Content>
    <Layout.Sider>
      <Card radius={'none'}>
        <Card.Header title={'sider'} />
      </Card>
    </Layout.Sider>
  </Layout>
  <Layout.Footer>
    <Card radius={'none'}>
      <Card.Header title={'footer'} />
    </Card>
  </Layout.Footer>
</Layout>

API

Props

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`PaddingProps`	`Token<PaddingProps>`	-	-
`display`	`Responsive<DisplayValue>`	-	-
`LayoutProps`	`Token<LayoutProps>`	-	-

Grid

Section