### Create Button for Detailed Guide in Whitehall Publisher Source: https://design-system.service.gov.uk/patterns/start-using-a-service This Markdown snippet is used within Whitehall Publisher's 'detailed guide' format to create a button. The button acts as a 'start point' linking to the first page of a service. Ensure the URL is correct for your service's first page. ```markdown {button start}[Button text goes here](https://servicename.service.gov.uk/first-page-within-service){/button} ``` -------------------------------- ### GOV.UK Frontend Back Link Example Source: https://design-system.service.gov.uk/styles/page-template A simple example of the GOV.UK Frontend Back Link component, providing users a clear way to navigate to the previous page. It requires a destination URL. ```html {{ govukBackLink({ href: "#", text: "Back" }) }} ``` -------------------------------- ### HTML Link Example Source: https://design-system.service.gov.uk/styles/links A basic HTML example of a standard link within a paragraph. This demonstrates the default styling for links in the GOV.UK Design System. ```html

Jump to HTML example.

``` -------------------------------- ### Example of Service navigation component (Nunjucks) Source: https://design-system.service.gov.uk/components/service-navigation A Nunjucks code example demonstrating the structure of the Service navigation component. This includes navigation items with links, text, and an active state indicator. It assumes the availability of Nunjucks templating. ```html { "navigation": [ { "href": "/", "text": "Navigation item 1" }, { "href": "#", "text": "Navigation item 2", "active": true }, { "href": "#", "text": "Navigation item 3" } ] } ``` -------------------------------- ### Presenting Results Page - HTML and Nunjucks Examples Source: https://design-system.service.gov.uk/patterns/check-a-service-is-suitable Provides HTML and Nunjucks code examples for a results page that informs users about their eligibility to use a service. Includes elements like phase banners, back links, main content headings, body text, and action buttons. ```html

Prototype This isn't a real service – it is an example.

Back

You're eligible to transport goods

Based on your answers, you are eligble to transport goods.

``` ```nunjucks {% from "govuk/components/back-link/macro.njk" import govukBackLink %} {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %} {% from "govuk/components/button/macro.njk" import govukButton %} {% block beforeContent %} {{ govukPhaseBanner({ tag: { text: "Prototype" }, html: "This isn't a real service – it is an example." }) }} {{ govukBackLink({ href: "#", text: "Back" }) }} {% endblock %} {% block content %}

You're eligible to transport goods

Based on your answers, you are eligble to transport goods.

{{ govukButton({ text: "Continue" }) }}
{% endblock %} ``` -------------------------------- ### GOV.UK Frontend Skip Link Example Source: https://design-system.service.gov.uk/styles/page-template An example of the GOV.UK Frontend Skip Link component, which provides users with a way to bypass navigation and jump directly to the main content of the page. It's typically configured with a target element ID. ```html {{ govukSkipLink({ href: "#main-content", text: "Skip to main content" }) }} ``` -------------------------------- ### HTML Example: Numbered List Source: https://design-system.service.gov.uk/styles/lists This HTML example showcases a numbered list for sequential information within the GOV.UK Design System. It employs the 'govuk-list--number' class to render ordered items, suitable for steps or processes where sequence matters. Each list item is expected to be a complete sentence and ends with a full stop. ```html
  1. Delivery address.
  2. Payment.
  3. Confirmation.
``` -------------------------------- ### GOV.UK Select Component Example (Nunjucks) Source: https://design-system.service.gov.uk/components/select Example of how to use the `govukSelect` macro from the GOV.UK Design System. This macro renders an HTML select element with various configuration options including ID, name, label, hint, error message, and a list of items. It requires the Nunjucks templating engine. ```Nunjucks {% from "govuk/components/select/macro.njk" import govukSelect %} {{ govukSelect({ id: "location", name: "location", label: { text: "Choose location" }, hint: { text: "This can be different to where you went before" }, errorMessage: { text: "Select a location" }, items: [ { value: "choose", text: "Choose location", selected: true }, { value: "eastmidlands", text: "East Midlands" }, { value: "eastofengland", text: "East of England" }, { value: "london", text: "London" }, { value: "northeast", text: "North East" }, { value: "northwest", text: "North West" }, { value: "southeast", text: "South East" }, { value: "southwest", text: "South West" }, { value: "westmidlands", text: "West Midlands" }, { value: "yorkshire", text: "Yorkshire and the Humber" } ] }) }} ``` -------------------------------- ### HTML Task List with 'Cannot start yet' status Source: https://design-system.service.gov.uk/patterns/complete-multiple-tasks Displays a task list using HTML, including a task with the 'Cannot start yet' status. This status is represented by grey text without a background colour, and the task row is not linked. This is useful when a task cannot be initiated because a prerequisite task has not been finished. ```html ``` -------------------------------- ### HTML Tabs Component Example Source: https://design-system.service.gov.uk/components/tabs This HTML code demonstrates the structure of the GOV.UK Design System tabs component. It includes a tab list and content panels for different time periods. Dependencies include the GOV.UK Frontend toolkit. ```html

Contents

Past day

Case manager Cases opened Cases closed
David Francis 3 0
Paul Farmer 1 0
Rita Patel 2 0

Past week

Case manager Cases opened Cases closed
David Francis 24 18
Paul Farmer 16 20
Rita Patel 24 27

Past month

Case manager Cases opened Cases closed
David Francis 98 95
Paul Farmer 122 131
Rita Patel 126 142

Past year

``` -------------------------------- ### GOV.UK Footer HTML Example Source: https://design-system.service.gov.uk/components/footer This HTML code defines the structure of the GOV.UK footer component. It includes a crown icon, a main navigation section with a two-column list of services and information links, and is designed to be responsive and accessible. ```html ``` -------------------------------- ### HTML: Start Button Source: https://design-system.service.gov.uk/components/button This HTML snippet demonstrates how to create a 'start now' button using the GOV.UK design system classes. It uses an anchor tag (``) with specific ARIA attributes and a start icon, making it suitable for main calls to action without submitting form data. ```html Start now ``` -------------------------------- ### Initialize GOV.UK Frontend JavaScript Source: https://design-system.service.gov.uk/styles/page-template This JavaScript snippet shows how to import and initialize all GOV.UK Frontend components using the `initAll` function from the provided JavaScript file. This ensures interactive elements function correctly. ```javascript import { initAll } from '/javascripts/govuk-frontend.min.js' initAll() ``` -------------------------------- ### Initialize GOV.UK Frontend JavaScript Source: https://design-system.service.gov.uk/styles/page-template Initializes all GOV.UK Frontend components on the page. This script should be placed at the end of the body to avoid blocking rendering. It depends on the `govuk-frontend.min.js` file. ```html ``` ```nunjucks {# Run JavaScript at end of the , to avoid blocking the initial render. #} ``` -------------------------------- ### GOV.UK Frontend Phase Banner Example Source: https://design-system.service.gov.uk/styles/page-template Demonstrates the GOV.UK Frontend Phase Banner component, used to indicate the current development phase of a service (e.g., Alpha, Beta). It includes a tag and explanatory HTML content with a feedback link. ```html {{ govukPhaseBanner({ tag: { text: "Alpha" }, html: 'This is a new service – your feedback will help us to improve it.' }) }} ``` -------------------------------- ### Basic HTML Structure for GOV.UK Page Source: https://design-system.service.gov.uk/styles/page-template A fundamental HTML structure for a GOV.UK page, including the footer with licensing information and copyright. It references external JavaScript for frontend initialization. ```html All content is available under the Open Government Licence v3.0, except where otherwise stated
``` -------------------------------- ### GOV.UK Footer with Links and Licence Source: https://design-system.service.gov.uk/styles/page-template This HTML snippet defines the footer for a GOV.UK page. It includes meta-items for support links (Help, Cookies, Contact, Terms and conditions) and licence information (Open Government Licence v3.0, Crown copyright). It also references JavaScript for GOV.UK frontend initialization. ```html

Support links

All content is available under the Open Government Licence v3.0, except where otherwise stated
``` -------------------------------- ### HTML Example: Basic List Source: https://design-system.service.gov.uk/styles/lists This HTML snippet demonstrates a basic unordered list used for navigation or links within the GOV.UK Design System. It utilizes the 'govuk-list' class for styling and 'govuk-link' for list item anchors. No external dependencies are required beyond standard HTML structure. ```html ``` -------------------------------- ### Confirmation Page Pattern - HTML and Nunjucks Source: https://design-system.service.gov.uk/patterns/confirmation-pages Code examples for the GOV.UK Design System confirmation page pattern. The HTML provides a static structure, while the Nunjucks example uses a component macro for dynamic generation. Both display a success message with a reference number and next steps. ```html

Application complete

Your reference number
HDJ2123F

We have sent you a confirmation email.

What happens next

We’ve sent your application to Hackney Electoral Register Office.

They will contact you either to confirm your registration, or to ask for more information.

What did you think of this service? (takes 30 seconds)

``` ```nunjucks {% set mainClasses = "govuk-main-wrapper--l" %} {% from "govuk/components/panel/macro.njk" import govukPanel %} {% block content %}
{{ govukPanel({ titleText: "Application complete", html: "Your reference number
HDJ2123F" }) }}

We have sent you a confirmation email.

What happens next

We’ve sent your application to Hackney Electoral Register Office.

They will contact you either to confirm your registration, or to ask for more information.

What did you think of this service? (takes 30 seconds)

{% endblock %} ``` -------------------------------- ### Nunjucks: Start Button Macro Source: https://design-system.service.gov.uk/components/button This Nunjucks macro provides a flexible way to generate GOV.UK buttons, including the 'start' button variant. It accepts various options to customize text, links, and attributes. Ensure HTML content is sanitized if using the 'html' option to prevent cross-site scripting. ```nunjucks {% from "govuk/components/button/macro.njk" import govukButton %} {{ govukButton({ text: "Start now", href: "#", isStartButton: true }) }} ```
Case manager Cases opened Cases closed
David Francis