Layouts

The structure of a page consists of 3 main parts: header, main content and footer.

<body>
<div class="body-wrap">
<header class="site-header">
<!-- header -->
</header>
<main class="site-content">
<!-- main content, or sections -->
</main>
<footer class="site-footer">
<!-- footer -->
</footer>
</div>
</body>

The <main> tag is a wrapper for the sections.

In React and Vue, we have provided 3 different page layouts in form of components, and you can find them into the /src/layouts/ folder.

React
Vue
React
src/
└── layouts/
├── LayoutAlternative.js
├── LayoutDefault.js
└── LayoutSignin.js
Vue
src/
└── layouts/
├── LayoutAlternative.vue
├── LayoutDefault.vue
└── LayoutSignin.vue
  • Default layout

  • Alternative layout - It includes a different footer version

  • Signin layout - It includes a header version without the navigation and the footer

You can create as many layouts as you want. Remember to import the desired layout when you create a page in React or Vue.