Layout

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.

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.

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.