holy grail docs

 This layout is a work in progress.

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.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 Insert description. Important Notes: The content is already rendered inside a <main> element, do not pass another <main> element to the prop. site_content block is also available. The header and footer are freeform, the props are expecting <header> and <footer> elements repectively. site_header and site_footer blocks are also available. 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: 'This is the header.', main: { content: 'This is the main content.', attributes: { 'data-foo': 'bar', } }, footer: 'This is the 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>