Bolt Design System

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.

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>