### Example Button Component (HTML and Nunjucks)

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/get-started/production/index.md

Demonstrates how to use the GOV.UK button component. Provides both HTML and Nunjucks macro examples for integration into your project. Ensure GOV.UK Frontend is installed and configured.

```html
<a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button" id="default-button">Start now</a>
```

```njk
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Start now",
  href: "#",
  id: "default-button",
  classes: "govuk-button--start",
  attributes: {
    "draggable": "false"
  }
}) }}
```

--------------------------------

### Start Button Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/button/index.md

Use a start button for the main call to action on a service’s Start page. These typically use a link tag instead of a button tag as they do not usually submit form data.

```html
<a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
  Start now
  <svg role="presentation" focusable="false" class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17" height="13" viewBox="0 0 17 13">
    <path d="M16.5 6.5L12 1.9l-2.2 2.2 2.7 2.7H0v1h12.6l-2.7 2.7 2.2 2.2 4.5-4.6V6.5z"></path>
  </svg>
</a>
```

```nunjucks
{% from "govuk-prototype-components/lib/macro.njk" import govukButton %}

{{ govukButton({ text: 'Start now', isStartButton: true }) }}
```

--------------------------------

### Install npm Dependencies

Source: https://github.com/alphagov/govuk-design-system/blob/main/README.md

Run this command after cloning the repository to install all necessary Node.js packages for the project.

```shell
npm install
```

--------------------------------

### All Tag Colours Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/tag/index.md

Provides an example of all available tag colours, including additional options beyond the standard ones. This example uses HTML and Nunjucks.

```html
<strong class="govuk-tag">
  Default
</strong>
<strong class="govuk-tag govuk-tag--blue">
  Blue
</strong>
<strong class="govuk-tag govuk-tag--green">
  Green
</strong>
<strong class="govuk-tag govuk-tag--pink">
  Pink
</strong>
<strong class="govuk-tag govuk-tag--red">
  Red
</strong>
<strong class="govuk-tag govuk-tag--yellow">
  Yellow
</strong>
<strong class="govuk-tag govuk-tag--turquoise">
  Turquoise
</strong>
<strong class="govuk-tag govuk-tag--grey">
  Grey
</strong>
```

```nunjucks
{% from "govuk/components/tag/macro.njk" import govukTag %}

{{ govukTag({ text: "Default" }) }}
{{ govukTag({ text: "Blue", classes: "govuk-tag--blue" }) }}
{{ govukTag({ text: "Green", classes: "govuk-tag--green" }) }}
{{ govukTag({ text: "Pink", classes: "govuk-tag--pink" }) }}
{{ govukTag({ text: "Red", classes: "govuk-tag--red" }) }}
{{ govukTag({ text: "Yellow", classes: "govuk-tag--yellow" }) }}
{{ govukTag({ text: "Turquoise", classes: "govuk-tag--turquoise" }) }}
{{ govukTag({ text: "Grey", classes: "govuk-tag--grey" }) }}
```

--------------------------------

### Beta phase banner example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/phase-banner/index.md

Use this example to indicate that the service is in its beta phase. It can be rendered using HTML or Nunjucks.

```html
<div class="govuk-phase-banner govuk-phase-banner--beta">
  <p class="govuk-phase-banner__text">
    This service is in beta. Your <a href="#" class="govuk-link">feedback</a> will help us to improve it.
  </p>
</div>
```

```nunjucks
{% from "govuk-frontend/components/phase-banner/macro.njk" import govukPhaseBanner %}

{{ govukPhaseBanner({
  "classes": "govuk-phase-banner--beta",
  "html": "This service is in beta. Your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
}) }}
```

--------------------------------

### Confirm a phone number example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/confirm-a-phone-number/index.md

This example demonstrates the default implementation of the 'confirm a phone number' pattern. It requires the 'example' macro from '_example.njk' and the 'govukInsetText' macro from 'govuk/components/inset-text/macro.njk'.

```html
<div class="govuk-form-group">
  <label class="govuk-label" for="security-code-input">
    Enter the 6 digit code
  </label>
  <div id="security-code-input-hint" class="govuk-hint">
    We sent it to 07700 900 955
  </div>
  <input class="govuk-input govuk-input--width-10" id="security-code-input" name="security-code-input" type="text" spellcheck="false" autocomplete="one-time-code" pattern="[0-9]*" inputmode="numeric">
</div>

<button class="govuk-button" data-module="govuk-button">
  Continue
</button>
```

```nunjucks
{% from "_example.njk" import example %}

{{ example({ group: "patterns", item: "confirm-a-phone-number", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
```

--------------------------------

### Default select example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/select/index.md

This is a basic example of the select component. It can be rendered using HTML or Nunjucks.

```html
<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Nationalities
  </label>
  <select class="govuk-select" id="select-1" name="select-1">
    <option selected="" value="">Please select a nationality</option>
    <option value="afghan">Afghan</option>
    <option value="albanian">Albanian</option>
  </select>
</div>
```

```nunjucks
{% from "govuk/components/select/macro.njk" import govukSelect %}

{{ govukSelect({
  label: {
    text: "Nationalities"
  },
  id: "select-1",
  name: "select-1",
  items: [
    {
      value: "",
      text: "Please select a nationality",
      selected: true,
      disabled: true
    },
    {
      value: "afghan",
      text: "Afghan"
    },
    {
      value: "albanian",
      text: "Albanian"
    }
  ]
}) }}
```

--------------------------------

### Contact a department or service team - Default example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/contact-a-department-or-service-team/index.md

Basic example of how to display contact information for a department or service team.

```html
<div class="govuk-contact-us">
  <h2 class="govuk-heading-m">
    Contact the team
  </h2>
  <p class="govuk-body">
    You can contact the team by:
  </p>
  <ul class="govuk-list">
    <li>
      calling 0300 123 4567
    </li>
    <li>
      emailing
      <a href="mailto:example@example.com" class="govuk-link">
        example@example.com
      </a>
    </li>
  </ul>
</div>
```

--------------------------------

### Default task list example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/task-list/index.md

Use this example to display a default task list. It includes tasks with names and statuses.

```html
<ol class="app-task-list">
  <li>
    <h2 class="app-task-list__section">
      <span class="app-task-list__section-number">1.</span> What is this section about?
    </h2>

    <ul class="app-task-list__items">
      <li class="app-task-list__item">
        <a class="app-task-list__task-name" href="#">
          What is this task about?
        </a>

        <strong class="govuk-tag app-task-list__tag" role="status">Completed</strong>
      </li>

      <li class="app-task-list__item">
        <a class="app-task-list__task-name" href="#">
          What is this task about?
        </a>

        <strong class="govuk-tag app-task-list__tag" role="status">Completed</strong>
      </li>
    </ul>
  </li>

  <li>
    <h2 class="app-task-list__section">
      <span class="app-task-list__section-number">2.</span> What is this section about?
    </h2>

    <ul class="app-task-list__items">
      <li class="app-task-list__item">
        <a class="app-task-list__task-name" href="#">
          What is this task about?
        </a>

        <strong class="govuk-tag app-task-list__tag" role="status">Cannot start yet</strong>
      </li>

      <li class="app-task-list__item">
        <a class="app-task-list__task-name" href="#">
          What is this task about?
        </a>

        <strong class="govuk-tag app-task-list__tag" role="status">Not started</strong>
      </li>
    </ul>
  </li>
</ol>
```

--------------------------------

### Example Question Page Component

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/question-pages/index.md

This Nunjucks macro renders a default question page example. It's used to include interactive examples within the documentation.

```nunjucks
{{ example({ group: "patterns", item: "question-pages", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
```

--------------------------------

### Radio items with hints example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/radios/index.md

This example demonstrates how to add hints to radio items to provide additional information. It includes HTML and Nunjucks versions.

```html
<div class="govuk-radios" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="waste-agreed-1" name="waste-agreed" type="radio" value="yes" checked>
    <label class="govuk-label govuk-radios__label" for="waste-agreed-1">
      Yes
    </label>
    <div class="govuk-hint govuk-radios__hint">
      You will not need to pay for this service
    </div>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="waste-agreed-2" name="waste-agreed" type="radio" value="no">
    <label class="govuk-label govuk-radios__label" for="waste-agreed-2">
      No
    </label>
    <div class="govuk-hint govuk-radios__hint">
      There will be a charge of £10.50 to arrange a collection
    </div>
  </div>
</div>
```

```nunjucks
{% from "govuk-frontend/components/radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "waste-agreed",
  name: "waste-agreed",
  items: [
    {
      value: "yes",
      text: "Yes",
      checked: true,
      hint: {
        text: "You will not need to pay for this service"
      }
    },
    {
      value: "no",
      text: "No",
      hint: {
        text: "There will be a charge of £10.50 to arrange a collection"
      }
    }
  ]
}) }}
```

--------------------------------

### Details component - Second example HTML

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/details/index.md

This HTML example demonstrates a details component with a different summary text. It is initially closed.

```html
<details class="govuk-details" data-module="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">Second example</span>
  </summary>
  <div class="govuk-details__text">
    <p class="govuk-body">Content for the second example.</p>
  </div>
</details>
```

--------------------------------

### Default Tabs Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/tabs/index.md

This example shows the default implementation of the tabs component, including both HTML and Nunjucks versions.

```html
<div class="govuk-tabs" data-module="govuk-tabs">
  <ul class="govuk-tabs__list">
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab govuk-tabs__tab--selected" href="#example-default-tab-1">
        Tab 1
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#example-default-tab-2">
        Tab 2
      </a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="example-default-tab-1">
    <h2 class="govuk-heading-l">Content for tab 1</h2>
    <p class="govuk-body">This is the content for the first tab.</p>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="example-default-tab-2">
    <h2 class="govuk-heading-l">Content for tab 2</h2>
    <p class="govuk-body">This is the content for the second tab.</p>
  </div>
</div>
```

```nunjucks
{% from "_example.njk" import example %}

{{ example({ group: "components", item: "tabs", example: "default", html: true, nunjucks: true, open: false, size: "xl", loading: "eager" }) }}
```

--------------------------------

### Multiple Tags Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/tag/index.md

Demonstrates how to use multiple tags to show different statuses. This example uses HTML and Nunjucks.

```html
<strong class="govuk-tag">
  Active
</strong>
<strong class="govuk-tag">
  Inactive
</strong>
```

```nunjucks
{% from "govuk/components/tag/macro.njk" import govukTag %}

{{ govukTag({ text: "Active" }) }}
{{ govukTag({ text: "Inactive" }) }}
```

--------------------------------

### Start Local Server with External Connections Enabled

Source: https://github.com/alphagov/govuk-design-system/blob/main/README.md

To allow connections from other devices on your network, set the ALLOW_EXTERNAL_CONNECTIONS environment variable to true before starting the server.

```shell
ALLOW_EXTERNAL_CONNECTIONS=true npm start
```

--------------------------------

### Default phase banner example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/phase-banner/index.md

Use this example to display a default phase banner. It can be rendered using HTML or Nunjucks.

```html
<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__text">
    This is a new service – your <a href="#" class="govuk-link">feedback</a> will help us improve it.
  </p>
</div>
```

```nunjucks
{% from "govuk-frontend/components/phase-banner/macro.njk" import govukPhaseBanner %}

{{ govukPhaseBanner({
  "html": "This is a new service – your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us improve it."
}) }}
```

--------------------------------

### Second File Upload Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/file-upload/index.md

An alternative default file upload example, useful for demonstrating variations or multiple uploads within a service.

```html
<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-2">
    Upload a document
  </label>
  <input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file">
</div>
```

--------------------------------

### Default Accordion Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/accordion/index.md

This example shows the default configuration for an accordion component. It includes HTML and Nunjucks templating options.

```html
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
  <div class="govuk-accordion__item">
    <h2 class="govuk-accordion__heading">
      <button class="govuk-accordion__open-button" aria-expanded="false" role="button" draggable="false" type="button" id="accordion-default-heading-1">
        Section 1
      </button>
    </h2>
    <div class="govuk-accordion__content" id="accordion-default-content-1" hidden="hidden">
      <p class="govuk-body">Content 1</p>
    </div>
  </div>
  <div class="govuk-accordion__item">
    <h2 class="govuk-accordion__heading">
      <button class="govuk-accordion__open-button" aria-expanded="false" role="button" draggable="false" type="button" id="accordion-default-heading-2">
        Section 2
      </button>
    </h2>
    <div class="govuk-accordion__content" id="accordion-default-content-2" hidden="hidden">
      <p class="govuk-body">Content 2</p>
    </div>
  </div>
</div>
```

```nunjucks
{% from "_example.njk" import example %}

{{ example({ group: "components", item: "accordion", example: "default", html: true, nunjucks: true, open: false, size: "xl", loading: "eager" }) }}
```

--------------------------------

### Second Default Button Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/button/index.md

An example of a second default button, demonstrating how to differentiate if multiple are needed, though generally discouraged.

```html
<button class="govuk-button" data-module="govuk-button">Continue</button>
```

```nunjucks
{% from "govuk-prototype-components/lib/macro.njk" import govukButton %}

{{ govukButton({ text: 'Continue', titleSuffix: 'second' }) }}
```

--------------------------------

### Example of Alt Text for an Image

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/images/index.md

This example demonstrates how to implement alt text for an image. Ensure alt text is concise, meaningful, and describes the content and function of the image.

```html
<img src="/images/my-image.jpg" alt="Description of the image content and function">
```

--------------------------------

### Default radios example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/radios/index.md

This is the default example of the radios component, suitable for most use cases. It includes HTML and Nunjucks versions.

```html
<div class="govuk-radios" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="where-do-you-live-1" name="where-do-you-live" type="radio" value="england">
    <label class="govuk-label govuk-radios__label" for="where-do-you-live-1">
      England
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
    <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
      Scotland
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
    <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
      Wales
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
    <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
      Northern Ireland
    </label>
  </div>
</div>
```

```nunjucks
{% from "govuk-frontend/components/radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "where-do-you-live",
  name: "where-do-you-live",
  items: [
    {
      value: "england",
      text: "England"
    },
    {
      value: "scotland",
      text: "Scotland"
    },
    {
      value: "wales",
      text: "Wales"
    },
    {
      value: "northern-ireland",
      text: "Northern Ireland"
    }
  ]
}) }}
```

--------------------------------

### Default List Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/lists/index.md

This is a basic example of a list. It is used to make blocks of text easier to read and break information into manageable chunks.

```html
<ul>
  <li>Make lists easy to read</li>
  <li>Break information into chunks</li>
</ul>
```

--------------------------------

### Start Local Development Server

Source: https://github.com/alphagov/govuk-design-system/blob/main/README.md

This command builds the project sources, serves the pages, and watches for file changes to enable live reloading during development.

```shell
npm start
```

--------------------------------

### Service navigation with service name and links

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/service-navigation/index.md

This example shows how to display both the service name and navigation links. Ensure navigation links are relevant to the user's current task.

```html
<nav class="govuk-service-navigation" aria-label="Service navigation">
  <h2 class="govuk-service-navigation__title">
    <a class="govuk-service-navigation__link" href="#">Service Name</a>
  </h2>
  <ul class="govuk-service-navigation__list">
    <li class="govuk-service-navigation__item">
      <a class="govuk-service-navigation__link" href="#">Navigation link 1</a>
    </li>
    <li class="govuk-service-navigation__item">
      <a class="govuk-service-navigation__link" href="#">Navigation link 2</a>
    </li>
    <li class="govuk-service-navigation__item">
      <a class="govuk-service-navigation__link" href="#">Navigation link 3</a>
    </li>
  </ul>
</nav>
```

--------------------------------

### Bulleted List Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/lists/index.md

Use bulleted lists when the order of items is not important. Introduce with a lead-in line ending in a colon, start items with a lowercase letter, and do not use a full stop.

```html
<ul>
  <li>make lists easy to read</li>
  <li>break information into chunks</li>
</ul>
```

--------------------------------

### Grid System: Example Combinations

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/layout/index.md

Illustrates how to combine different grid column classes within a `govuk-grid-row` to create complex page layouts.

```html
<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <!-- Content -->
  </div>
  <div class="govuk-grid-column-two-thirds">
    <!-- Content -->
  </div>
</div>
<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-half">
    <!-- Content -->
  </div>
  <div class="govuk-grid-column-one-half">
    <!-- Content -->
  </div>
</div>
```

--------------------------------

### Bank details form with payment choice

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/bank-details/index.md

Adapt this pattern when users can choose how they get paid, for example, by bank transfer or an alternative method. This handles scenarios where not all users have or want to share bank account details online.

```Nunjucks
{{ example({ group: "patterns", item: "bank-details", example: "branch", html: true, nunjucks: true, open: false, size: "xl" }) }}
```

--------------------------------

### Contact a department or service team - All contact information example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/contact-a-department-or-service-team/index.md

Comprehensive example showing various contact channels including phone, email, social media, and opening hours.

```html
<div class="govuk-contact-us">
  <h2 class="govuk-heading-m">
    Contact the team
  </h2>
  <p class="govuk-body">
    You can contact the team by:
  </p>
  <ul class="govuk-list">
    <li>
      calling 0300 123 4567
    </li>
    <li>
      emailing
      <a href="mailto:example@example.com" class="govuk-link">
        example@example.com
      </a>
    </li>
    <li>
      following us on
      <a href="https://www.twitter.com/example" class="govuk-link">
        Twitter
      </a>
    </li>
  </ul>
  <p class="govuk-body">
    Our opening hours are:
  </p>
  <p class="govuk-body">
    Monday to Friday, 9am to 5pm
  </p>
  <p class="govuk-body">
    We aim to respond to emails within 2 working days.
  </p>
  <p class="govuk-body">
    Calls may be recorded for quality and training purposes. Calls cost no more than national calls to 01 and 02 numbers.
  </p>
</div>
```

--------------------------------

### Tabs Component with Second Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/tabs/index.md

Demonstrates an alternative configuration for the tabs component, useful for showcasing different content arrangements or states.

```html
<div class="govuk-tabs" data-module="govuk-tabs">
  <ul class="govuk-tabs__list">
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab govuk-tabs__tab--selected" href="#example-default-tab-1-second">
        Tab 1
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#example-default-tab-2-second">
        Tab 2
      </a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="example-default-tab-1-second">
    <h2 class="govuk-heading-l">Content for tab 1</h2>
    <p class="govuk-body">This is the content for the first tab.</p>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="example-default-tab-2-second">
    <h2 class="govuk-heading-l">Content for tab 2</h2>
    <p class="govuk-body">This is the content for the second tab.</p>
  </div>
</div>
```

```nunjucks
{% from "_example.njk" import example %}

{{ example({ group: "components", item: "tabs", example: "default", html: true, nunjucks: true, open: false, size: "xl", titleSuffix: "second" }) }}
```

--------------------------------

### Default inset text example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/inset-text/index.md

This is a basic example of the inset text component. It can be used with HTML or Nunjucks.

```html
<div class="govuk-inset-text">
  <p class="govuk-body">
    The text in this box is inset.
  </p>
</div>
```

```nunjucks
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  html: "<p class=\"govuk-body\">The text in this box is inset.</p>"
}) }}
```

--------------------------------

### Default notification banner example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/notification-banner/index.md

This is a basic example of a notification banner. It is used to display general information to the user.

```nunjucks
{% from "_example.njk" import example %}

{{ example({ group: "components", item: "notification-banner", example: "default", html: true, nunjucks: true, open: false, size: "s", loading: "eager" }) }}
```

--------------------------------

### Default fieldset example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/fieldset/index.md

This is a basic example of a fieldset component. The legend serves as a heading for the grouped form inputs.

```html
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Personal details
      </h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="example-radios-1" name="example-radios" type="radio" value="1">
        <label class="govuk-label govuk-radios__label" for="example-radios-1">
          Example radio 1
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="example-radios-2" name="example-radios" type="radio" value="2">
        <label class="govuk-label govuk-radios__label" for="example-radios-2">
          Example radio 2
        </label>
      </div>
    </div>
  </fieldset>
</div>
```

--------------------------------

### Default password input example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/password-input/index.md

Use this component whenever you need users to create or enter a password. Ensure to read related patterns for asking users for passwords and creating user accounts.

```html
<div class="govuk-form-group">
  <label class="govuk-label" for="password-input-1">
    Password
  </label>
  <input class="govuk-input govuk-input--width-20" id="password-input-1" name="password-input-1" type="password" autocomplete="new-password">
</div>
```

```nunjucks
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  id: "password-input-1",
  name: "password-input-1",
  autocomplete: "new-password"
}) }}
```

--------------------------------

### Default warning text example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/warning-text/index.md

This is a basic example of the warning text component. The 'Warning' text can be rewritten to be more specific to the context.

```html
<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-warning-text__assistive-text">Warning</span>
    You now have unlimited 10 minute குழந்தைகளுக்கான வீடியோக்கள் to watch.
  </strong>
</div>
```

```nunjucks
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  text: "You now have unlimited 10 minute குழந்தைகளுக்கான வீடியோக்கள் to watch."
}) }}
```

--------------------------------

### Add content at the start of the container

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/page-template/index.md

Use 'containerStart' to add content immediately after the opening `<div class="govuk-width-container">` element. This is suitable for components like Back links or Breadcrumbs.

```Nunjucks
{%- call addNunjucksOption(options, 'containerStart', 'Block') -%}
Add content after the opening `<div class=”govuk-width-container”>` element that limits the width of the page.
For example: the [Back link component](/components/back-link), [Breadcrumbs component](/components/breadcrumbs).
{%- endcall %}
```

--------------------------------

### Equality Information Explainer Screen

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/equality-information/index.md

Use this example to show users why you are asking for equality information and what you will do with it. This is typically displayed before the equality questions themselves.

```html
<div class="govuk-form-group">
  <h2 class="govuk-heading-m">
    Equality information
  </h2>
  <p class="govuk-body">
    We ask for this information to help us understand and improve our services for everyone. It is optional and will be kept confidential.
  </p>
  <p class="govuk-body">
    <a href="/service/equality-information/explainer" target="_blank">Find out more about why we ask for equality information</a>
  </p>
</div>
```

--------------------------------

### Cookie banner example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/cookie-banner/index.md

This is a default example of the cookie banner component. It is intended for general use when a cookie banner is required.

```html
<div class="govuk-cookie-banner">
  <div class="govuk-cookie-banner__content govuk-width-container">
    <h2 class="govuk-cookie-banner__heading">
      <span class="govuk-visually-hidden">Is this page useful?</span>
      <svg class="govuk-cookie-banner__icon" focusable="false" aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16" height="20" width="20">
        <path d="M19.6 1.5l-7.3 7.3c-.5.5-1.3.5-1.8 0L10 8.1 7.5 10.6c-.5.5-1.3.5-1.8 0L0.4 3.2c-.5-.5-.5-1.3 0-1.8l7.3-7.3c.5-.5 1.3-.5 1.8 0l2.5 2.5 2.5-2.5c.5-.5 1.3-.5 1.8 0l7.3 7.3c.5.5.5 1.3 0 1.8z"></path>
      </svg>
      We use cookies on this service to make it work. We also use them to measure how the service is used.
    </h2>
    <div class="govuk-cookie-banner__buttons">
      <form action="/cookies/preferences" method="post">
        <input type="hidden" name="cookies_policy" value='{"essential":true,"settings":true,"usage":true,"campaigns":true}'>
        <button type="submit" class="govuk-button" data-module="govuk-button" name="accept-cookies" value="true">Accept cookies</button>
        <button type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button" name="reject-cookies" value="true">Reject cookies</button>
      </form>
      <a class="govuk-link" href="/cookies">Find out more about cookies</a>
    </div>
  </div>
</div>
```

--------------------------------

### Spaced List Example

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/lists/index.md

This example demonstrates how to add extra spacing between list items when they span multiple lines, improving readability.

```html
<ul class="govuk-list--spaced">
  <li>Make lists easy to read</li>
  <li>Break information into chunks</li>
</ul>
```

--------------------------------

### Summary list with missing information

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/components/summary-list/index.md

This example shows how to display rows where information is missing. A link is provided in the 'value' column to allow users to enter the required information.

```html
<div class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Full name
    </dt>
    <dd class="govuk-summary-list__value">
      Sarah Philips
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> full name</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      <a class="govuk-link" href="#">
        Enter date of birth
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      National insurance number
    </dt>
    <dd class="govuk-summary-list__value">
      QQ 12 34 56 C
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> national insurance number</span>
      </a>
    </dd>
  </div>
</div>
```

--------------------------------

### Create a button in a detailed guide

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/patterns/start-using-a-service/index.md

Use this Markdown to create a button within a detailed guide in Whitehall Publisher. This is for non-mainstream services.

```plaintext
{button start}[Button text goes here](https://servicename.service.gov.uk/first-page-within-service){/button}
```

--------------------------------

### Add content before main content (deprecated)

Source: https://github.com/alphagov/govuk-design-system/blob/main/src/styles/page-template/index.md

The 'beforeContent' option is deprecated and should be replaced by 'containerStart'. It was used to add content outside the `<main>` element.

```Nunjucks
{%- call addNunjucksOption(options, 'beforeContent', 'Block') -%}
Deprecated - Use [`containerStart`](#containerstart-block) instead.
Add content that needs to appear outside the `<main>` element.
For example: the [Back link component](/components/back-link), [Breadcrumbs component](/components/breadcrumbs).
{%- endcall %}
```