Bolt Design System

Basic Layout

A layout is the core foundation of any given page. It creates the responsive framework for single-column and multi-column design.

Important Notes:

Layout is versatile enough to handle a variety of page layouts. View full page use case

Demo

Layout item

Twig

// Set up the layout items
{% 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 %}

// Pass layout items to the content prop
{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    '67/33@from-small',
    '75/25@from-medium',
  ],
} only %}

HTML

<bolt-layout template="67/33@from-small 75/25@from-medium">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>