Use front matter options to customise the appearance, content and behaviour of this layout.

For example, this page has the following options:

layout: collection
order: 4
title: Collection
description: Layout for a paginated list of pages.
paginationHeading: Example collection
pagination:
  data: example
  size: 2
example:
  - url: "#"
    data:
      date: 2021-09-08
      title: Design changes after research round three
      description: Here are the changes we made after our third round of user research.
  - url: "#"
    data:
      date: 2021-08-27
      title: Helping users better find our service
      description: Reviewing the user onboarding journey.
  - url: "#"
    data:
      date: 2021-08-17
      title: Design changes after our second research session
      description: Updating our start page after further user research.
  - url: "#"
    data:
      date: 2021-08-08
      title: Getting to know our users better
      description: What we learnt from our first round of user research.
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.

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

Name Type Description
paginationHeading string Heading for the list of paginated pages.
pagination object Required. Pages to show in the paginated list. Learn more about pagination in the documentation for Eleventy.

Example collection

  1. Design changes after research round three

    Here are the changes we made after our third round of user research.

  2. Helping users better find our service

    Reviewing the user onboarding journey.