Basic Holy Grail Layout
The Holy Grail layout renders a sidebar on the left and another on the right. It is a top level page layout.
Important Notes:
The sidebars are sticky at and above the medium breakpoint.
The primary sidebar transforms into a modal below the medium breakpoint. User can tap a trigger button to activate the modal. trigger_icon and trigger_label props are available for customizing the icon and label text in the trigger button.
The secondary sidebar disappears entirely below the medium breakpoint. This sidebar is intended for non-essential information.
Holy Grail layout should be used in tandem with Site layout. It would go into the main content area.
Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demo
Read more about holy grail layout on Wikipedia.
Demo
This is a holy grail layout.
Twig
// Set up sidebar templates
{% set sidebar %}
{% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
content: 'Primary sidebar',
} only %}
{% endset %}
{% set secondary_sidebar %}
{% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
content: 'Secondary sidebar',
} only %}
{% endset %}
// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
content: 'This is a holy grail layout.',
sidebar: sidebar,
secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.