Bolt Design System

Sub-template and Nested Layout

A layout can be nested in another layout (i.e. put a layout inside a layout item).

Important Notes:

All templates work with nested layouts, while there is one special template that is specifically designed for nested layouts. full-vertical-push-last-item creates a vertical layout that is 100% height, and its last item is pushed to the bottom. This particular template serves a specific purpose and does not work with the layout’s vertical and horizontal alignments.

Demo

In this layout, there is a parent layout that is handling the 2 columns. Within each column, there is a nested layout that is full height and it pushes its last item to the bottom. Even though the first column is taller than the second column, the last items in each column are aligned to the bottom.

Last layout item pushed to bottom

Nested layout with 2 layout items, this paragraph of text being the first item.

Last layout item pushed to bottom

Now with actual text and a CTA button. Ready to crush business complexity? Our software helps you work smarter, simpler, and faster.

Let’s go!

Twig

// Set up nested layout
{% set nested_layout %}
  {% set layout_items %}
    {% include '@bolt-layouts-layout/layout-item.twig' with {
      content: 'Layout item'
    } only %}
    {% include '@bolt-layouts-layout/layout-item.twig' with {
      content: 'Layout item'
    } only %}
  {% endset %}
  {% include '@bolt-layouts-layout/layout.twig' with {
    content: layout_items,
    template: [
      'full-vertical-push-last-item',
    ],
  } only %}
{% endset %}

// Pass nested layouts to parent layout
{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: nested_layout
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: nested_layout
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    'halves@from-small',
  ],
} only %}

HTML

<bolt-layout template="halves@from-small">
  <bolt-layout-item>
    <bolt-layout template="full-vertical-push-last-item">
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
    </bolt-layout>
  </bolt-layout-item>
  <bolt-layout-item>
    <bolt-layout template="full-vertical-push-last-item">
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
    </bolt-layout>
  </bolt-layout-item>
</bolt-layout>