Page layout
Page layout provides utility components to organize arbitrary web page sections: Header, Main, Sidebar and Footer.
💡️
More examples of Layout are available at Koval UI
Storybook.
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
❗️
Layout examples may display wrong at small screens.
Configuration
Page
Page component serves as a container and works the same as Grid component.
💡️
See all Page props.
Header
Header component can be made sticky using the corresponding prop.
Sticky header demo
💡️
See all Header props.
Content
Content wraps page content and sidebar. Works the same as Row component.
💡️
See all Content props.
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.
💡️
See all Footer props.