Build basic layouts using Inkline's built-in layout components.

The layout components are used for scaffolding the basic structure of the page:

  • <i-layout> is the main layout wrapper in which i-layout-header, i-layout-aside, i-layout-content, i-layout-footer, or i-layout itself can be nested, and can be placed in any parent container.
  • <i-layout-header> is the header area that can also serve as navigation
  • <i-layout-aside> is a container for side sections (usually a side nav).
  • <i-layout-content> is the main content container
  • <i-layout-footer> is a container for footer elements

Common Layouts

The previewed layouts are styled for documentation purposes only. When using the components, they will only provide the correct element positioning without colors and paddings.

Layouts are based on flexbox, so please make sure your browser fully supports it.

Content With Header
Content With Header and Footer
Content With Left Aside
Content With Right Aside
Content With Left and Right Asides
Layout with Left Aside
Layout with Right Aside
Layout with Left and Right Asides

Components API

Here you can find a list of the various customization options you can use for the layout components as props, as well as available slots.

Layout API
Layout Header API
Layout Content API
Layout Footer API
Layout Aside API

Sass Variables

Here you can find a list of the Sass variables you can use for the layout components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Layout Aside
Layout Header
Layout Footer