holy grail docs

Holy Grail

A page layout with a sidebar on the left and another on the right.

Published Last updated: 4.2.1 Change log Github NPM
Twig Usage 
  // 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 %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Holy Grail
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

The main content area of the layout.

 any —
  • —
sidebar

The primary sidebar of the layout. Sidebar twig template is expected to be passed here.

 object —
  • —
secondary_sidebar

The secondary sidebar of the layout. Secondary sidebar twig template is expected to be passed here.

 object —
  • —
Holy Grail Sidebar
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the primary sidebar.

 any —
  • —
trigger_icon

Set the icon of the trigger button that is shown in smaller viewports.

 string —
  • —
trigger_label

Set the text of the trigger button that is shown in smaller viewports.

 string —
  • —
Holy Grail Secondary Sidebar
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the secondary sidebar.

 any —
  • —
Install Install 
  npm install @bolt/layouts-holy-grail
Dependencies @bolt/components-icon @bolt/core-v3.x

holy grail

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
Primary sidebar
Secondary sidebar
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.

holy grail use case navigation

Use Case: Navigation The Holy Grail layout is commonly used for documentation design where a page would display a book nav and a page level table of contents. Important Notes: The primary sidebar works best with the Side Nav component. The secondary sidebar works best with the Table of Contents component. Demo

Section One

This is a holy grail layout.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Section Two

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.
Twig
// Set up sidebar templates {% set sidebar %} {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with { content: side_nav, trigger_icon: 'documentation', trigger_label: 'Book Navigation', attributes: { class: 't-bolt-gray-xlight', }, } only %} {% endset %} {% set secondary_sidebar %} {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with { content: table_of_contents, } only %} {% endset %} // Pass sidebars to main template {% include '@bolt-layouts-holy-grail/holy-grail.twig' with { content: content, sidebar: sidebar, secondary_sidebar: secondary_sidebar, } only %}
HTML
Not available in plain HTML. Please use Twig.

layout docs

 This layout is in a testing phase, do not use any code examples from the docs for production sites.

site docs

Site

The classic pancake stack site layout that enables the footer to be always positioned on the bottom.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-layouts-site/site.twig' with {
  header: 'This is the header.',
  main: {
    content: 'This is the main content.',
    attributes: {
      'data-foo': 'bar',
    }
  },
  footer: 'This is the footer.',
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
header

The header of the site.

 any —
  • —
main

The main area of the site. This creates the <main> element.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the <main> element.

      • —
    • content

      The main content of the site.

      • —
footer

The footer of the site.

 any —
  • —
Install Install 
  npm install @bolt/layouts-site
Dependencies @bolt/core-v3.x

site

Basic Site Layout Site layout renders the header, main, and footer landmarks of a page. Important Notes: The content is already rendered inside a <main> element, do not pass another <main> element to the prop. The header and footer are freeform, the props are expecting <header> and <footer> elements repectively. The site layout must only contain <header>, <main>, and <footer> as immediate children. No additional elements can be a child. This is the replacement for the .c-bolt-site class. Demo
This is the header.
This is the main content. The site layout is at least 100% of viewport height and the footer is always positioned on the bottom.
This is the footer.
Twig
{% include '@bolt-layouts-site/site.twig' with { header: '<header>This is the header.</header>', main: { content: 'This is the main content.', attributes: { id: 'main-content', } }, footer: '<footer>This is the footer.</footer>', } only %}
HTML
<div class="l-bolt-site"> <header> // This is the header </header> <main id="main-content"> // This is the main content </main> <footer> // This is the footer </footer> </div>