holy grail docs

Holy Grail

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

Published Last updated: 5.0.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

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 demoRead 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

 Layout is in testing phaseConsult the design system team when using Layout.Read and understand the schema fully.Only use the Twig includes, do not use HTML for the time being.Use the side nav to view all Layout demos.

Layout

The foundational template of any given layout.

Published Last updated: 5.0.0 Change log Github NPM
Twig Usage 
{% set content %}
  {% 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 %}
{% include '@bolt-layouts-layout/layout.twig' with {
  content: content,
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Layout (layout.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-layout> tag.

 object —
  • —
content

Content of the layout. While anything can be passed, layout items are preferred.

 any —
  • —
template

Select from a predefined set of layout templates. Numbers represent % of each layout item widths. The @from-* keywords mean "starting from a particular breakpoint".

 array[string] —
  • 50, 50@from-small, 50@from-medium, 67, 67@from-small, 67@from-medium, 75, 75@from-small, 75@from-medium, 25/25/50@from-small, 25/25/50@from-medium, 25/50/25@from-small, 25/50/25@from-medium, 25/75@from-small, 25/75@from-medium, 33/67@from-small, 33/67@from-medium, 50/25/25@from-small, 50/25/25@from-medium, 67/33@from-small, 67/33@from-medium, 75/25@from-small, 75/25@from-medium, halves, halves@from-small, halves@from-medium, thirds@from-small, thirds@from-medium, fourths@from-small, fourths@from-medium, tiles, tiles@from-small, tiles@from-medium, flag, flag@from-small, flag@from-medium
gutter

Set the horizontal spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
row_gutter

Set the vertical spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
padding_top

Set the top padding of the layout.

 string medium
  • none, small, medium, large, xlarge
padding_bottom

Set the bottom padding of the layout.

 string medium
  • none, small, medium, large, xlarge
align_items

Control the horizontal alignment of all layout items.

 string center
  • start, center, end
valign_items

Control the vertical alignment of all layout items. Unset is required for setting equal-height layout items, do not set this prop if that is the intention.

 string —
  • start, center, end
background

A content container that delivers important messages to the user.

 object —
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
    • opacity

      Overlay opacity

      • none, light, medium, heavy, full
    • shape_group

      Add a Bolt Background Shapes group.

      • A, B, none
    • shape_alignment

      Alignment of shape group.

      • left or right
    • fill

      Type of fill to use for the overlay.

      • color, gradient, linear-gradient, radial-gradient
    • fill_color

      Color of the fill to use in the overlay.

      • default, pink, navy, black
    • focal_point

      Where the opacity background should originate.

        • horizontal

          Currently only reverses gradient on 'left'.

          • center, left, right
    • content_items

      An array of objects to place in the background.Works with Image and Shape components.Video option is deprecated.

      • [items]:
        • Type:any
    • overlay

      Use opacity instead

      • —
    • shapeGroup

      Use shape_group instead.

      • —
    • shapeAlignment

      Use shape_alignment instead.

      • —
    • fillColor

      Use fill_color instead.

      • —
    • focalPoint

      Use focal_point instead.

      • —
    • contentItems

      Use content_items instead.

      • —
Layout item (layout-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-layout-item> tag.

 object —
  • —
content

Content of the layout item.

 any —
  • —
valign_self

Control the vertical alignment of the layout item. This will ignore the vertical alignment set on the layout.

 string —
  • start, center, end, start-offset, end-offset
order

Bring the layout item to the start or the end of the layout. Only use this if the order of layout items need to be adjusted at specific breakpoints. The @from-* keywords mean "starting from a particular breakpoint".

 string —
  • first, last, first@from-small, first@from-medium, last@from-small, last@from-medium
Install Install 
npm install @bolt/layouts-layout
Dependencies @bolt/core-v3.x

site docs

Site

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

Published Last updated: 5.0.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>