Organise page template options by element, top to bottom

romaricpascal · romaricpascal · commit 2e0965c12602 · 2025-12-02T18:43:50.000Z
After moving the component options to headings rather than a table,
this spike explores how they might be grouped by element (ish).
diff --git a/src/styles/page-template/index.md b/src/styles/page-template/index.md
@@ -81,7 +81,17 @@ To change the components that are included in the page template by default, set
 {% endraw %}
 ```
 
-### Options
+### Update the `<html>` element
+
+#### `htmlClasses` (Variable)
+
+Add a class to the `<html>` element.
+
+#### `htmlLang` (Variable)
+
+Set the language of the whole document. If your `<title>` and `<main>` element are in a different language to the rest of the page, use `htmlLang` to set the language of the rest of the page.
+
+### Update the `<head>` element
 
 #### `assetPath` (Variable)
 
@@ -91,70 +101,74 @@ Specify a path to the <a href="https://frontend.design-system.service.gov.uk/imp
 
 Set the domain for assets where an absolute URL is required, for example the Open Graph image.
 
-#### `beforeContent` (Block)
+#### `head` (Block)
 
-Add content that needs to appear outside `<main>` element.
-For example: The [Back link component](/components/back-link/), [Breadcrumbs component](/components/breadcrumbs/),
-[Phase banner component](/components/phase-banner/).
+Add additional items inside the `<head>` element.
+For example: `<meta name="description" content="My page description">`
 
-#### `bodyAttributes` (Variable)
+#### `headIcons` (Block)
 
-Add attributes to the `<body>` element. Add each attribute and its value in the `bodyAttributes` object.
+Override the default icons used for GOV.UK branded pages.
+For example: `<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">`
 
-#### `bodyClasses` (Variable)
+#### `opengraphImageUrl` (Variable)
 
-Add a class to the `<body>` element.
+Set the URL for the Open Graph image meta tag. The URL must be absolute, including the protocol and domain name. If you're using the refreshed GOV.UK brand, you may need to update this path to point to the updated assets.
 
-#### `bodyEnd` (Block)
+#### `pageTitle` (Block)
 
-Add content just before the closing `<body>` element.
+Override the default page title (`<title>` element).
 
-#### `bodyStart` (Block)
+#### `pageTitleLang` (Variable)
 
-Add content after the opening `<body>` element.
-For example: The [Cookie banner component](/components/cookie-banner/).
+Set the language of the `<title>` element if it's different to `htmlLang`.
 
-#### `containerClasses` (Variable)
+#### `themeColor` (Variable)
 
-Add a class to the container. This is useful if you want to make the page wrapper a fixed width.
+Set the [toolbar colour on some devices](https://developer.chrome.com/blog/support-for-theme-color-in-chrome-39-for-android).
 
-#### `content` (Block)
+### Update the `<body>` element
 
-Add content that needs to appear centered in the `<main>` element.
+#### `bodyAttributes` (Variable)
 
-#### `cspNonce` (Variable)
+Add attributes to the `<body>` element. Add each attribute and its value in the `bodyAttributes` object.
 
-Add a `nonce` attribute to the script for your Content Security Policy (CSP). Provide a nonce that hostile actors cannot guess, as otherwise they can easily find a way around your CSP. However, you should use this attribute only if you’re not able to [include the hash for the inline scripts in your service’s CSP](https://frontend.design-system.service.gov.uk/import-javascript/#if-our-inline-javascript-snippet-is-blocked-by-a-content-security-policy).
+#### `bodyClasses` (Variable)
 
-#### `footer` (Block)
+Add a class to the `<body>` element.
 
-Override the default [Footer component](/components/footer/).
+#### `bodyEnd` (Block)
 
-#### `govukRebrand` (Variable)
+Add content just before the closing `<body>` element.
 
-Enables rebranded styles. If you’ve overridden any blocks that are affected by this, you may have to make manual changes. See the [v5.10.0 release notes](https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.0) for more information.
+#### `bodyStart` (Block)
 
-#### `head` (Block)
+Add content after the opening `<body>` element.
+For example: The [Cookie banner component](/components/cookie-banner/).
 
-Add additional items inside the `<head>` element.
-For example: `<meta name="description" content="My page description">`
+### Update the page's header
 
 #### `header` (Block)
 
 Override the default [Header component](/components/header/).
 
-#### `headIcons` (Block)
+### Update the page's container
 
-Override the default icons used for GOV.UK branded pages.
-For example: `<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">`
+#### `containerClasses` (Variable)
 
-#### `htmlClasses` (Variable)
+Add a class to the container. This is useful if you want to make the page wrapper a fixed width.
 
-Add a class to the `<html>` element.
+#### `beforeContent` (Block)
 
-#### `htmlLang` (Variable)
+Add content that needs to appear outside `<main>` element.
+For example: The [Back link component](/components/back-link/), [Breadcrumbs component](/components/breadcrumbs/),
+[Phase banner component](/components/phase-banner/).
 
-Set the language of the whole document. If your `<title>` and `<main>` element are in a different language to the rest of the page, use `htmlLang` to set the language of the rest of the page.
+### Update the page's main content
+
+#### `content` (Block)
+
+Add content that needs to appear centered in the `<main>` element.
 
 #### `main` (Block)
 
@@ -168,26 +182,26 @@ Add a class to the `<main>` element.
 
 Set the language of the `<main>` element if it's different to `htmlLang`
 
-#### `opengraphImageUrl` (Variable)
+### Update the page's footer
 
-Set the URL for the Open Graph image meta tag. The URL must be absolute, including the protocol and domain name. If you're using the refreshed GOV.UK brand, you may need to update this path to point to the updated assets.
+#### `footer` (Block)
 
-#### `pageTitle` (Block)
+Override the default [Footer component](/components/footer/).
 
-Override the default page title (`<title>` element).
+### Other options
 
-#### `pageTitleLang` (Variable)
+#### `cspNonce` (Variable)
 
-Set the language of the `<title>` element if it's different to `htmlLang`.
+Add a `nonce` attribute to the script for your Content Security Policy (CSP). Provide a nonce that hostile actors cannot guess, as otherwise they can easily find a way around your CSP. However, you should use this attribute only if you’re not able to [include the hash for the inline scripts in your service’s CSP](https://frontend.design-system.service.gov.uk/import-javascript/#if-our-inline-javascript-snippet-is-blocked-by-a-content-security-policy).
 
-#### `skipLink` (Block)
+#### `govukRebrand` (Variable)
 
-Override the default [Skip link component](/components/skip-link/).
+Enables rebranded styles. If you’ve overridden any blocks that are affected by this, you may have to make manual changes. See the [v5.10.0 release notes](https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.0) for more information.
 
-#### `themeColor` (Variable)
+#### `skipLink` (Block)
 
-Set the [toolbar colour on some devices](https://developer.chrome.com/blog/support-for-theme-color-in-chrome-39-for-android).
+Override the default [Skip link component](/components/skip-link/).
 
-#### Exploded view of the page template block areas
+### Exploded view of the page template block areas
 
 {{ example({ group: "styles", item: "page-template", example: "block-areas", html: false, open: false }) }}
