Holy Grail

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

Published Last updated: 5.8.0 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 (holy-grail.twig)
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 (holy-grail-sidebar.twig)
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 (holy-grail-secondary-sidebar.twig)
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 js-cookie