Use front matter options to customise the appearance, content and behaviour of this layout.
For example, this page has the following options:
layout: product
order: 5
title: Product page
description: Layout for a product or marketing page based on the [Product Page Example](https://github.com/alphagov/product-page-example).
startButton:
href: "#"
text: Start button
image:
src: /assets/homepage-illustration.png
alt: Eleventy’s possum mascot hanging on a red balloon and floating above a laptop.
aside:
title: Aside
content: |
A small portion of content that is **indirectly** related to the main content.
related:
sections:
- title: Related links
items:
- text: Layouts
href: ../../layouts
- text: Options
href: ../../options
subsections:
- title: Eleventy documentation
items:
- text: Front matter data
href: https://www.11ty.dev/docs/data-frontmatter/
Common front matter options
Use these options to customise the appearance, content and behaviour of any layout.
layout |
string |
Page layout. |
includeInBreadcrumbs |
boolean |
Include page as the last item in any breadcrumbs. Default is false . |
order |
number |
Ranking of page in navigation. Lower numbers appear before pages with a higher number. |
title |
string |
Page title. |
description |
string |
Page description. |
opengraphImage |
object |
Open Graph image that appears on social media networks. |
opengraphImage.src |
string |
Path to Open Graph image. Can be a relative or absolute URL. This value overrides opengraphImageUrl in plugin options. |
opengraphImage.alt |
string |
Alternative text for Open Graph image. |
aside |
object |
Small portion of content that is indirectly related to the main content. |
aside.title |
string |
Title for aside. |
aside.content |
string |
Content for aside. Accepts Markdown. |
related |
object |
Related links. See related. |
With one section:
title |
string |
Title for group of related links. Default is 'Related content' . |
items |
array |
See items. |
subsections |
array |
Title for sub-group of related links. |
subsections.title |
string |
|
subsections.items |
array |
See items. |
With multiple sections:
sections |
array |
See items. |
text |
string |
Title of related content. |
href |
string |
Link for the related content. |
In addition to the common front matter options, this layout also has the following options:
startButton |
string |
Start button. Appears below the title and any description. |
startButton.text |
string |
Text for the start button. Default is 'Get started' . |
startButton.href |
string |
The URL that the start button should link to. |
image |
object |
Product image. Appears to the right of the page title, and is hidden on mobile. |
image.src |
string |
Path to product image. |
image.alt |
string |
Alternative text for product image. |