Product page
Layout for product and marketing pages.
View an example page that uses this layout (opens in a new tab)
This layout, based on the component used on GOV.UK product pages, can be useful if you need a product or marketing page.
To use this layout, make product the value for a page’s layout key:
layout: product
title: Page title
Page content
In addition to common front matter options, this layout also accepts the following options:
| Name | Type | Description |
|---|---|---|
| headingClasses | string | |
| startButton | object | Start button. Appears below the title and any description. |
| startButton.text | string | Text for the start button (default is ‘Get started’). |
| startButton.href | string | URL or page 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. |
| groups | Array | Card groups. See groups. |
| Name | Type | Description |
|---|---|---|
| title | string | Title for group of cards. |
| caption | string | Heading caption that sits above the title for the group of cards. |
| description | string | Description for the group of cards. |
| items | Array | Card items. See items. |
| Name | Type | Description |
|---|---|---|
| clickable | boolean | |
| feature | boolean | |
| primary | boolean | |
| secondary | boolean | |
| heading | string | |
| headingClasses | string | |
| headingLevel | number | |
| href | string | |
| description | string | |
| image | object | Image shown above post content. |
| image.src | string | Path to post image. |
| image.alt | string | Alternative text for post image. |