Page layout

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

Code example

import {Main, Footer, Sidebar, Header, Content, Page} from 'koval-ui';
return (
    <Page>
        <Header>This is Header</Header>
        <Content>
            <Sidebar xs={3}>This is Sidebar</Sidebar>
            <Main>This is Main</Main>
        </Content>
        <Footer>This is Footer</Footer>
    </Page>
);

Page layout demo

Configuration

Page

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

Header

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.

Page content

Sidebar and Main work the same as Col component.

Footer

Footer component always sticks to the bottom of the page.

See all Footer props (opens in a new tab).

Footer demo