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.

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

API

Layout API
Property Description Type Accepted Default
vertical Sets the orientation of the layout to vertical. Used for achieving layout columns. Boolean true, false false
Layout Header API
Name Description
default Slot for layout header default content.
Layout Content API
Name Description
default Slot for layout content default content.
Layout Footer API
Name Description
default Slot for layout footer default content.
Layout Aside API
Name Description
default Slot for layout aside default content.