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>