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 whichi-layout-header
,i-layout-aside
,i-layout-content
,i-layout-footer
, or anotheri-layout
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.
Left Aside
Right Aside
Left Aside
Right Aside
Left Aside
Right Aside
Left Aside
Right Aside
Configuration
Props
Use props to modify the component’s design and behavior.
<i-layout>
- Property
vertical
TypeBoolean
Defaultfalse
Description Display the layout on a vertical orientation
Slots
Use slots to insert custom content into well-defined component locations.
<i-layout>
- Property
default
Description Slot for default layout content
<i-layout-header>
- Property
default
Description Slot for default layout header content
<i-layout-content>
- Property
default
Description Slot for default layout content children
<i-layout-aside>
- Property
default
Description Slot for default layout aside content
<i-layout-footer>
- Property
default
Description Slot for default layout footer content
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
<i-layout-aside>
- Property
--width
Value320px
Description The width of the layout aside component