govuk-design-guide: document-collections
layout: frontend-template-documentation sectionKey: Frontend templates
Step 1: Duplicate and rename this file to the proposed frontend template you want to include in the Publishing Design Guide website.
When duplicating and renaming this file use lowercase and replace any spaces with a dash (ie. -)
Step 2: Set "eleventyExcludeFromCollections" to "false". This will ensure that the code snippet is commented out and a page will be display withinin the Publishing Design Guide.
eleventyExcludeFromCollections: false
Step 3: Establish the relationship of this frontend template.
The relationship between frontend templates will be demonstrated visually via levels on the left-hand navigation menu. For instance, "GitHub smart answers" is only revealed when the end-user selects "Smart answer" since "GitHub smart answers" a child template to the "Smart answer" frontend template.
eleventyNavigation:
If this frontend template is not associated with or a child to another frontend template, set the field below ("parent") to "Frontend templates"
parent: Frontend templates
Step 4: Input data points according to fields below to the best of your ability. Any fields without any data points will not be displayed on the website.
Name of the frontend tempalte
This is the name of the frontend template (ex. Homepage). It is required to display the title on the page, in the meta data, and in the left-hand navigation menu of the frontend templates page.
title: Document collections
Description of the frontend template
This briefly describes what the frontend template is. It is required to display the description on the page, and in the meta description.
description: Document collections group related documents on a single page that are aimed at a specific audience or reflect a specific theme or topic.
Embedding the figma file of the frontend template
This will display a Figma embed on the page.
To add a Figma embed, copy only the URL within the embed snippet.
figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this frontend template.
How the frontend template works
Briefly descibe how this frontend template works. For instance, listing out what end-user can do on a page that uses this frontend template, as well as it's relation to other pages and its associated frontend templates on GOV.UK.
You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
howItWorks: 'A document collection could be used to publish:
-
a set of forms
-
publications in the same series
-
a mix of document types related to the same task or event
Contents list
The contents list on a document collection page is created automatically from the groups of documents on the page. Each group has a H2 that appears in the contents list.
H2s in the body section are also automatically added to the contents list change made in Jan 2025 (opens in a new tab). Departments might do this when they need to link to external websites which they cannot add to a group. An example of a page with H2s in the body (opens in a new tab).
Contextual sidebar
If a page is part of a document collection, the document collection that it’s part of will automatically appear in the sidebar under the related content section.
If a page is part of multiple collections, all the collections are displayed. Examples: Register a trademark (opens in a new tab), Self Assessment forms and helpsheets for trusts and estates (opens in a new tab).
Rules on how multiple collections are ordered in the sidebar
Collection pages appear in the sidebar under related content links on pages that are part of a document collection. If more than one collection page is listed, they are ordered by the respective item’s position within them.
Example: The content item National curriculum in England: framework for key stages 1 to 4 (opens in a new tab) belongs to 3 document collections. It’s the first item in "National curriculum", so that document collection appears first in the list. It’s the 17th item in the "Schools: statutory guidance" document collection, making this the second link in the sidebar. It is also the 54th item in the "Local-authority-maintained schools: governance" collection, therefore showing this as the third link.
Email sign up links on document collections
Document collections have a "Get emails about this page" button which allows users to sign up for email updates when:
-
there’s a major change to any of the tagged content items listed on the document collection
-
there’s a major change to the document collection page itself
-
the document collection is unpublished and redirected
There’s an exception on some HMRC document collections where users will get emails about the topic instead of the document collection. Find out why they were set up like this (opens in a new tab).'
Live examples of webpages that use this frontend template
List out all the pages on GOV.UK that use this frontend template, by providing: (1) the title of the page, (2) the URL of the page, and (3) indicate whether the page is in Welsh in order for assistive technology to read out the page title correctly.
examples:
To add additional examples duplicate the the fields below (adhering to the formating) but increase the count by one integer.
0: # Both title and link are REQUIRED in order for this information to render on the page. title: 'Self Assessment: detailed information' link: https://www.gov.uk/government/collections/self-assessment-detailed-information welsh: # Options on whether the webpage using this frontend template is in Welsh: # true = The webpage is in Welsh # false = The webpage is not in Welsh, but rather in English false 1: # Both title and link are REQUIRED in order for this information to render on the page. title: 'Multiplication tables check' link: https://www.gov.uk/government/collections/multiplication-tables-check welsh: # Options on whether the webpage using this frontend template is in Welsh: # true = The webpage is in Welsh # false = The webpage is not in Welsh, but rather in English false 2: # Both title and link are REQUIRED in order for this information to render on the page. title: 'Intellectual property: Trade marks' link: https://www.gov.uk/government/collections/intellectual-property-trade-marks welsh: # Options on whether the webpage using this frontend template is in Welsh: # true = The webpage is in Welsh # false = The webpage is not in Welsh, but rather in English false
The Content Data (Production) URL this frontend template
Filter the document type in content data and copy the URL in your browser's address bar.
How is this frontend template built
This will display all the underlying technologies that make-up this template.
contentSchema:
The GOV.UK browser extension can help indentify the content schema for this frontend template.
title: document_collection link: https://docs.publishing.service.gov.uk/content-schemas/document_collection.html
contentType:
The GOV.UK browser extension can help indentify the content type (also known as document type) for this frontend template.
title: document_collection link: https://docs.publishing.service.gov.uk/document-types/document_collection.html
publishingApp:
The GOV.UK browser extension can help indentify the publishing app associated with adding content to this frontend template.
Publishing app options:
# collections publisher
# contacts admin
# content publisher
# content tagger
# local links manager
# mainstream publisher
# manuals publisher
# maslow
# service manual publisher
# short url manager
# special route publisher
# specialist publisher
# travel advice publisher
# whitehall
whitehall
renderingApp:
The GOV.UK browser extension can help indentify which rendering app is used to generate this frontend template.
Rendring app options:
# collections
# email alert frontend
# feedback
# finder frontend
# frontend
# government frontend
# smart answers
# static
government frontend
Components that make-up this frontend template
List out all the components that make-up this frontend template, by (1) providing the name of the component, (2) a link to the documentation for said component, (3) how is this component generated on the page and (4) the associated publishing input fields within the publishing app.
components:
To add additional components duplicate the the fields below (adhering to the formating) but increase the count by one integer.
0: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Layout super navigation header' componentURL: https://components.publishing.service.gov.uk/component-guide/layout_super_navigation_header generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 1: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Breadcrumb' componentURL: ../../../components/breadcrumbs generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Topics taxonomy tags to customise breadcrumbs' 2: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Section break' componentURL: https://design-system.service.gov.uk/styles/section-break/ generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 3: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Single page notification button' componentURL: https://components.publishing.service.gov.uk/component-guide/single_page_notification_button generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 4: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Published dates' componentURL: https://govuk-government-frontend.herokuapp.com/component-guide/published_dates generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 5: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Feedback' componentURL: https://components.publishing.service.gov.uk/component-guide/feedback generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 6: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Layout footer' componentURL: https://components.publishing.service.gov.uk/component-guide/layout_footer generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 7: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Contents list - only appears if 3 or more collections' componentURL: #If a URL is not entered in the field above (componentName) then delete this comment before entering the URL of the documentation for said component. generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 8: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Back to top - only appears if the page is extremely long' componentURL: #If a URL is not entered in the field above (componentName) then delete this comment before entering the URL of the documentation for said component. generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" auto input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 9: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Page title' componentURL: https://components.publishing.service.gov.uk/component-guide/title generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Title (required)' 10: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Lead paragraph' componentURL: https://components.publishing.service.gov.uk/component-guide/lead_paragraph generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Summary (required)' 11: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Metadata block' componentURL: https://components.publishing.service.gov.uk/component-guide/metadata generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'First published date & Associations: Lead organisations' 12: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Govspeak content' componentURL: https://components.publishing.service.gov.uk/component-guide/govspeak generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Body' 13: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Published dates' componentURL: https://govuk-government-frontend.herokuapp.com/component-guide/published_dates generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'First published date & Change note (required)' 14: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Heading - title for individual collection' componentURL: #If a URL is not entered in the field above (componentName) then delete this comment before entering the URL of the documentation for said component. generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 15: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Govspeak content - description for the individual collection' componentURL: #If a URL is not entered in the field above (componentName) then delete this comment before entering the URL of the documentation for said component. generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 16: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Related navigation when displayed within contextual footer' componentURL: #If a URL is not entered in the field above (componentName) then delete this comment before entering the URL of the documentation for said component. generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" publisher input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Taxonomy' 17: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Related navigation when displayed within contextual sidebar' componentURL: #If a URL is not entered in the field above (componentName) then delete this comment before entering the URL of the documentation for said component. generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" # Delete this comment before enter how this component is generated on the page. input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration. 18: # The componentName is REQUIRED in order for this information to be displayed on the page. componentName: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. 'Signup link' componentURL: https://components.publishing.service.gov.uk/component-guide/signup_link generated: # Options how said component is generated page: # auto = "Autogenerated in frontend template" # publisher = "Customized by publisher" # hardcode = "Hardcoded by developer" # Delete this comment before enter how this component is generated on the page. input: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. #If this component can be generated by a publisher via a publihing app the delete this comment before entering that infomration.
Evidence and insights for this frontend template
List out all past documentation/supporting material with regards to or realted to this frontend template. It can include (1) past design documentation, (2) research findings, and (3) presentations.
insights:
To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
0: # A description is REQUIRED in order for this information to render on the page. date: September 2022 description: # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###). 'Collections pages were used as navigation pages for specialist topics (the equivalent of a mainstream browse topic or sub-topic page). We tested with 5 accountants, frequent users of GOV.UK, and using desktop.
Users had no difficulties with the page design, and successfully used the page to navigate. Including a short description under each link within the collection helped users to choose between the options and aided navigation.'
title: 'Prototype testing specialist topics'
link: https://docs.google.com/presentation/d/1pqbXzYPbVs11fuOpa4P9sRv7TLT8wbRTniuO_ANC7sM/edit#slide=id.g10d42026b8_2_0
documentFormat: Google Slides
Existing issues with this frontend template
List of all the issues that are associated with this frontend template, (1) containing the title used to describe the issue on GitHub, and (2) the link to the GitHub issue itself.
issues: