This is the main content. The site layout is at least 100% of viewport height and the footer is always positioned on the bottom.
{% 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 %}| 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 |
object
| — |
|
|
footer
|
The footer of the site. |
any
| — |
|
npm install @bolt/layouts-sitecontent is already rendered inside a <main> element, do not pass another <main> element to the prop.header and footer are freeform, the props are expecting <header> and <footer> elements repectively.<header>, <main>, and <footer> as immediate children. No additional elements can be a child..c-bolt-site class.{% 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 %}<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>