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. |
Options for 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
-
Design changes after research round three
Here are the changes we made after our third round of user research.
-
Helping users better find our service
Reviewing the user onboarding journey.