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