This layout is in a testing phase, do not use any code examples from the docs for production sites.
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
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>