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.
Name Type Description
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:

Name Type Description
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:

Name Type Description
sections array See items.

Options for items

Name Type Description
text string Title of related content.
href string Link for the related content.

Additional front matter options

In addition to the common front matter options, this layout also has the following options:

Name Type Description
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.