Skip to main content

Page layout

Page layout provides utility components to organize arbitrary web page sections: Header, Main, Sidebar and Footer.

Info

More examples of Layout are available at Koval UI Storybook.

Code example​

import {Page, Header, Content, Main, Footer} from 'koval-ui';

<Page width="fluid">
  <Header>Header content</Header>
  <Content>
    <Sidebar xs={3}>Sidebar content</Sidebar>
    <Main>Main content</Main>
  </Content>
  <Footer>Footer content</Footer>
</Page>;

Page layout anatomy​

Page component​

Info

See all Page props.

Page component serves as a container and works the same as Grid component.

Info

See all Header props.

Header component can be made sticky using the corresponding prop.

Sticky header demo​

Content​

Content wraps page content and sidebar. Works the same as Row component.