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 another i-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.

Content
<i-layout>
    <i-layout-content>
        Content
    </i-layout-content>
</i-layout>

Header
Content
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>

    <i-layout-content>
        Content
    </i-layout-content>
</i-layout>

Header
Content
Footer
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>

    <i-layout-content>
        Content
    </i-layout-content>

    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>

Header
Content
Footer
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>

    <i-layout vertical>
        <i-layout-aside>
            Left Aside
        </i-layout-aside>

        <i-layout-content>
            Content
        </i-layout-content>
    </i-layout>

    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>

Header
Content
Footer
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>

    <i-layout vertical>
        <i-layout-content>
            Content
        </i-layout-content>

        <i-layout-aside>
            Right Aside
        </i-layout-aside>
    </i-layout>

    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>

Header
Content
Footer
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>

    <i-layout vertical>
        <i-layout-aside>
            Left Aside
        </i-layout-aside>

        <i-layout-content>
            Content
        </i-layout-content>

        <i-layout-aside>
            Right Aside
        </i-layout-aside>
    </i-layout>

    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>

Header
Content
Footer
<i-layout vertical>
    <i-layout-aside>
        Left Aside
    </i-layout-aside>

    <i-layout>
        <i-layout-header>
            Header
        </i-layout-header>

        <i-layout-content>
            Content
        </i-layout-content>

        <i-layout-footer>
            Footer
        </i-layout-footer>
    </i-layout>
</i-layout>

Header
Content
Footer
<i-layout vertical>
    <i-layout>
        <i-layout-header>
            Header
        </i-layout-header>

        <i-layout-content>
            Content
        </i-layout-content>

        <i-layout-footer>
            Footer
        </i-layout-footer>
    </i-layout>

    <i-layout-aside>
        Right Aside
    </i-layout-aside>
</i-layout>

Header
Content
Footer
<i-layout vertical>
    <i-layout-aside>
        Left Aside
    </i-layout-aside>

    <i-layout>
        <i-layout-header>
            Header
        </i-layout-header>

        <i-layout-content>
            Content
        </i-layout-content>

        <i-layout-footer>
            Footer
        </i-layout-footer>
    </i-layout>

    <i-layout-aside>
        Right Aside
    </i-layout-aside>
</i-layout>

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