All components

Accordion

Open this example in a new tab

Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="default-example">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="default-example-heading-1">
          Section A
        </span>
      </h2>
    </div>
    <div id="default-example-content-1" class="govuk-accordion__section-content">
      <p class="govuk-body">
        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
      </p>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="default-example-heading-2">
          Section B
        </span>
      </h2>
    </div>
    <div id="default-example-content-2" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 2</li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  id: "default-example",
  items: [
    {
      heading: {
        text: "Section A"
      },
      content: {
        text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    },
    {
      heading: {
        text: "Section B"
      },
      content: {
        html:
          '<ul class="govuk-list govuk-list--bullet">\n' +
          "  <li>Example item 2</li>\n" +
          "</ul>\n"
      }
    }
  ]
}) }}

Back link

Open this example in a new tab

Code

Markup

<a href="#" class="govuk-back-link">Back</a>

Macro

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}

{{ govukBackLink({}) }}

Breadcrumbs

Open this example in a new tab

Code

Markup

<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
    </li>
  </ol>
</nav>

Macro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Section",
      href: "/section"
    },
    {
      text: "Sub-section",
      href: "/section/sub-section"
    }
  ]
}) }}

Button

Open this example in a new tab

Code

Markup

<button type="submit" class="govuk-button" data-module="govuk-button">
  Save and continue
</button>

Macro

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

{{ govukButton({
  text: "Save and continue"
}) }}

Character count

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-info"></textarea>
  <div id="more-detail-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  name: "more-detail",
  id: "more-detail",
  maxlength: 10,
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Checkboxes

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british">
      <label class="govuk-label govuk-checkboxes__label" for="nationality">
        British
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
      <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
        Irish
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
      <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
        Citizen of another country
      </label>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  name: "nationality",
  items: [
    {
      value: "british",
      text: "British"
    },
    {
      value: "irish",
      text: "Irish"
    },
    {
      value: "other",
      text: "Citizen of another country"
    }
  ]
}) }}

Cookie banner

Open this example in a new tab

Code

Markup

<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookie banner">
  <div class="govuk-cookie-banner__message govuk-width-container">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h2 class="govuk-cookie-banner__heading govuk-heading-m">
          Cookies on this government service
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">We use analytics cookies to help understand how users use our service.</p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Accept analytics cookies
      </button>
      <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </div>

  </div>
</div>

Macro

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{{ govukCookieBanner({
  messages: [
    {
      headingText: "Cookies on this government service",
      text: "We use analytics cookies to help understand how users use our service.",
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    }
  ]
}) }}

Date input

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <div class="govuk-date-input" id="dob">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" type="text" inputmode="numeric">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" type="text" inputmode="numeric">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="year" type="text" inputmode="numeric">
      </div>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  id: "dob"
}) }}

Details

Open this example in a new tab

Code

Markup

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
  </div>
</details>

Macro

{% from "govuk/components/details/macro.njk" import govukDetails %}

{{ govukDetails({
  summaryText: "Help with nationality",
  text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
}) }}

Error message

Open this example in a new tab

Code

Markup

<p class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message about full name goes here
</p>

Macro

{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  text: "Error message about full name goes here"
}) }}

Error summary

Open this example in a new tab

Code

Markup

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem
    </h2>
    <div class="govuk-error-summary__body">
        <ul class="govuk-list govuk-error-summary__list">
          <li>
            <a href="#example-error-1">The date your passport was issued must be in the past</a>
          </li>
          <li>
            <a href="#example-error-2">Enter a postcode, like AA1 1AA</a>
          </li>
        </ul>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "The date your passport was issued must be in the past",
      href: "#example-error-1"
    },
    {
      text: "Enter a postcode, like AA1 1AA",
      href: "#example-error-2"
    }
  ]
}) }}

Exit this page

Open this example in a new tab

Code

Markup

<div class="govuk-exit-this-page" data-module="govuk-exit-this-page">
  <a href="/full-page-examples/announcements" role="button" draggable="false" class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" rel="nofollow noreferrer">
    <span class="govuk-visually-hidden">Emergency</span> Exit this page
  </a>
</div>

Macro

{% from "govuk/components/exit-this-page/macro.njk" import govukExitThisPage %}

{{ govukExitThisPage({
  redirectUrl: "/full-page-examples/announcements",
  id: null,
  classes: null,
  attributes: {}
}) }}

Fieldset

Open this example in a new tab

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    What is your address?
  </legend>
</fieldset>

Macro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "What is your address?"
  }
}) }}

File upload

Open this example in a new tab

Code

Markup

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

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  }
}) }}

Footer

Open this example in a new tab

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

Header

Open this example in a new tab

The standard header as used on information pages on GOV.UK

Code

Markup

<header class="govuk-header" data-module="govuk-header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__logo">
      <a href="/" class="govuk-header__link govuk-header__link--homepage">
        <svg
          focusable="false"
          role="img"
          class="govuk-header__logotype"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 148 30"
          height="30"
          width="148"
          aria-label="GOV.UK"
        >
          <title>GOV.UK</title>
          <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
        </svg>
      </a>
    </div>
  </div>
</header>

Macro

{% from "govuk/components/header/macro.njk" import govukHeader %}

{{ govukHeader({}) }}

Hint

Open this example in a new tab

Code

Markup

<div class="govuk-hint">
  It&#39;s on your National Insurance card, benefit letter, payslip or P60.
For example, &#39;QQ 12 34 56 C&#39;.

</div>

Macro

{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  text:
    "It's on your National Insurance card, benefit letter, payslip or P60.\n" +
    "For example, 'QQ 12 34 56 C'.\n"
}) }}

Input

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example">
    National Insurance number
  </label>
  <input class="govuk-input" id="input-example" name="test-name" type="text">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "National Insurance number"
  },
  id: "input-example",
  name: "test-name"
}) }}

Inset text

Open this example in a new tab

Code

Markup

<div class="govuk-inset-text">
  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
</div>

Macro

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

{{ govukInsetText({
  text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}

Label

Open this example in a new tab

Code

Markup

<label class="govuk-label">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number"
}) }}

Notification banner

Open this example in a new tab

Code

Markup

<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      This publication was withdrawn on 7 March 2014.
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  text: "This publication was withdrawn on 7 March 2014."
}) }}

Pagination

Open this example in a new tab

Code

Markup

<nav class="govuk-pagination" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" href="/previous" rel="prev">
      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
        <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Previous<span class="govuk-visually-hidden"> page</span>
      </span>
    </a>
  </div>
  <ul class="govuk-pagination__list">
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="/page/1" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--current">
      <a class="govuk-link govuk-pagination__link" href="/page/2" aria-label="Page 2" aria-current="page">
        2
      </a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="/page/3" aria-label="Page 3">
        3
      </a>
    </li>
  </ul>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" href="/next" rel="next">
      <span class="govuk-pagination__link-title">
        Next<span class="govuk-visually-hidden"> page</span>
      </span>
      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
        <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
      </svg>
    </a>
  </div>
</nav>

Macro

{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  previous: {
    href: "/previous"
  },
  next: {
    href: "/next"
  },
  items: [
    {
      number: 1,
      href: "/page/1"
    },
    {
      number: 2,
      href: "/page/2",
      current: true
    },
    {
      number: 3,
      href: "/page/3"
    }
  ]
}) }}

Panel

Open this example in a new tab

Code

Markup

<div class="govuk-panel govuk-panel--confirmation">
  <h1 class="govuk-panel__title">
    Application complete
  </h1>
  <div class="govuk-panel__body">
    Your reference number: HDJ2123F
  </div>
</div>

Macro

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{{ govukPanel({
  titleHtml: "Application complete",
  text: "Your reference number: HDJ2123F"
}) }}

Password input

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

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

Phase banner

Open this example in a new tab

Code

Markup

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__content__tag">
      Alpha
    </strong>
    <span class="govuk-phase-banner__text">
      This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.
    </span>
  </p>
</div>

Macro

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

{{ govukPhaseBanner({
  tag: {
    text: "Alpha"
  },
  html: 'This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.'
}) }}

Radios

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <div id="example-default-hint" class="govuk-hint">
    This includes changing your last name or spelling your name differently.
  </div>
  <div class="govuk-radios" data-module="govuk-radios">
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="example-default" name="example-default" type="radio" value="yes">
      <label class="govuk-label govuk-radios__label" for="example-default">
        Yes
      </label>
    </div>
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="example-default-2" name="example-default" type="radio" value="no">
      <label class="govuk-label govuk-radios__label" for="example-default-2">
        No
      </label>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/radios/macro.njk" import govukRadios %}

{{ govukRadios({
  name: "example-default",
  hint: {
    text: "This includes changing your last name or spelling your name differently."
  },
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Select

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select" id="select-1" name="select-1">
    <option value="1">GOV.UK frontend option 1</option>
    <option value="2" selected>GOV.UK frontend option 2</option>
    <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

Macro

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

{{ govukSelect({
  id: "select-1",
  name: "select-1",
  label: {
    text: "Label text goes here"
  },
  items: [
    {
      value: 1,
      text: "GOV.UK frontend option 1"
    },
    {
      value: 2,
      text: "GOV.UK frontend option 2",
      selected: true
    },
    {
      value: 3,
      text: "GOV.UK frontend option 3",
      disabled: true
    }
  ]
}) }}

Service navigation

Open this example in a new tab

Code

Markup

<div class="govuk-service-navigation"
data-module="govuk-service-navigation"
>
      <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">
      

      
        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
            Menu
          </button>

          <ul class="govuk-service-navigation__list" id="navigation" >

            
              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/1">
                                    
Navigation item 1
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/2">
                                    
Navigation item 2
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/3">
                                    
Navigation item 3
                  </a>
              </li>

              
              <li class="govuk-service-navigation__item">
                  <a class="govuk-service-navigation__link" href="#/4">
                                    
Navigation item 4
                  </a>
              </li>

            </ul>
        </nav>
    </div>

    </div>

  </div>

Macro

{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}

{{ govukServiceNavigation({
  navigation: [
    {
      href: "#/1",
      text: "Navigation item 1"
    },
    {
      href: "#/2",
      text: "Navigation item 2"
    },
    {
      href: "#/3",
      text: "Navigation item 3"
    },
    {
      href: "#/4",
      text: "Navigation item 4"
    }
  ]
}) }}

Skip link

Open this example in a new tab

Code

Markup

<a href="#test-target-element" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>

Macro

{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}

{{ govukSkipLink({
  text: "Skip to main content",
  href: "#test-target-element"
}) }}

Summary list

Open this example in a new tab

Code

Markup

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Name
    </dt>
    <dd class="govuk-summary-list__value">
      Firstname Lastname
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      }
    }
  ]
}) }}

Table

Open this example in a new tab

Code

Markup

<table class="govuk-table">
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">January</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">February</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">March</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
    </tr>
  </tbody>
</table>

Macro

{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  rows: [
    [
      {
        text: "January"
      },
      {
        text: "£85",
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£165",
        format: "numeric"
      },
      {
        text: "£125",
        format: "numeric"
      }
    ]
  ]
}) }}

Tabs

Open this example in a new tab

Code

Markup

<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>
  <ul class="govuk-tabs__list">
    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#past-day">
        Past day
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#past-week">
        Past week
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#past-month">
        Past month
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#past-year">
        Past year
      </a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="past-day">
    <h2 class="govuk-heading-l">Past day</h2>
    <table class="govuk-table">
      <thead class="govuk-table__head">
        <tr class="govuk-table__row">
          <th class="govuk-table__header" scope="col">Case manager</th>
          <th class="govuk-table__header" scope="col">Cases opened</th>
          <th class="govuk-table__header" scope="col">Cases closed</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">David Francis</td>
          <td class="govuk-table__cell">3</td>
          <td class="govuk-table__cell">0</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">Paul Farmer</td>
          <td class="govuk-table__cell">1</td>
          <td class="govuk-table__cell">0</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">Rita Patel</td>
          <td class="govuk-table__cell">2</td>
          <td class="govuk-table__cell">0</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
    <h2 class="govuk-heading-l">Past week</h2>
    <table class="govuk-table">
      <thead class="govuk-table__head">
        <tr class="govuk-table__row">
          <th class="govuk-table__header" scope="col">Case manager</th>
          <th class="govuk-table__header" scope="col">Cases opened</th>
          <th class="govuk-table__header" scope="col">Cases closed</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">David Francis</td>
          <td class="govuk-table__cell">24</td>
          <td class="govuk-table__cell">18</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">Paul Farmer</td>
          <td class="govuk-table__cell">16</td>
          <td class="govuk-table__cell">20</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">Rita Patel</td>
          <td class="govuk-table__cell">24</td>
          <td class="govuk-table__cell">27</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
    <h2 class="govuk-heading-l">Past month</h2>
    <table class="govuk-table">
      <thead class="govuk-table__head">
        <tr class="govuk-table__row">
          <th class="govuk-table__header" scope="col">Case manager</th>
          <th class="govuk-table__header" scope="col">Cases opened</th>
          <th class="govuk-table__header" scope="col">Cases closed</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">David Francis</td>
          <td class="govuk-table__cell">98</td>
          <td class="govuk-table__cell">95</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">Paul Farmer</td>
          <td class="govuk-table__cell">122</td>
          <td class="govuk-table__cell">131</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">Rita Patel</td>
          <td class="govuk-table__cell">126</td>
          <td class="govuk-table__cell">142</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
    <p class="govuk-body">There is no data for this year yet, check back later</p>
  </div>
</div>

Macro

{% from "govuk/components/tabs/macro.njk" import govukTabs %}

{{ govukTabs({
  items: [
    {
      label: "Past day",
      id: "past-day",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Past day</h2>\n' +
          '<table class="govuk-table">\n' +
          '  <thead class="govuk-table__head">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <th class="govuk-table__header" scope="col">Case manager</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases opened</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases closed</th>\n' +
          "    </tr>\n" +
          "  </thead>\n" +
          '  <tbody class="govuk-table__body">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">David Francis</td>\n' +
          '      <td class="govuk-table__cell">3</td>\n' +
          '      <td class="govuk-table__cell">0</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Paul Farmer</td>\n' +
          '      <td class="govuk-table__cell">1</td>\n' +
          '      <td class="govuk-table__cell">0</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Rita Patel</td>\n' +
          '      <td class="govuk-table__cell">2</td>\n' +
          '      <td class="govuk-table__cell">0</td>\n' +
          "    </tr>\n" +
          "  </tbody>\n" +
          "</table>\n"
      }
    },
    {
      label: "Past week",
      id: "past-week",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Past week</h2>\n' +
          '<table class="govuk-table">\n' +
          '  <thead class="govuk-table__head">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <th class="govuk-table__header" scope="col">Case manager</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases opened</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases closed</th>\n' +
          "    </tr>\n" +
          "  </thead>\n" +
          '  <tbody class="govuk-table__body">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">David Francis</td>\n' +
          '      <td class="govuk-table__cell">24</td>\n' +
          '      <td class="govuk-table__cell">18</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Paul Farmer</td>\n' +
          '      <td class="govuk-table__cell">16</td>\n' +
          '      <td class="govuk-table__cell">20</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Rita Patel</td>\n' +
          '      <td class="govuk-table__cell">24</td>\n' +
          '      <td class="govuk-table__cell">27</td>\n' +
          "    </tr>\n" +
          "  </tbody>\n" +
          "</table>\n"
      }
    },
    {
      label: "Past month",
      id: "past-month",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Past month</h2>\n' +
          '<table class="govuk-table">\n' +
          '  <thead class="govuk-table__head">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <th class="govuk-table__header" scope="col">Case manager</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases opened</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases closed</th>\n' +
          "    </tr>\n" +
          "  </thead>\n" +
          '  <tbody class="govuk-table__body">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">David Francis</td>\n' +
          '      <td class="govuk-table__cell">98</td>\n' +
          '      <td class="govuk-table__cell">95</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Paul Farmer</td>\n' +
          '      <td class="govuk-table__cell">122</td>\n' +
          '      <td class="govuk-table__cell">131</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Rita Patel</td>\n' +
          '      <td class="govuk-table__cell">126</td>\n' +
          '      <td class="govuk-table__cell">142</td>\n' +
          "    </tr>\n" +
          "  </tbody>\n" +
          "</table>\n"
      }
    },
    {
      label: "Past year",
      id: "past-year",
      panel: {
        text: "There is no data for this year yet, check back later"
      }
    }
  ]
}) }}

Tag

Open this example in a new tab

Code

Markup

<strong class="govuk-tag">
  Alpha
</strong>

Macro

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

{{ govukTag({
  text: "Alpha"
}) }}

Task list

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
        Company Directors
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-1-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">
        Registered company details
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-2-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
        Business plan
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Business plan"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    }
  ]
}) }}

Textarea

Open this example in a new tab

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Warning text

Open this example in a new tab

Code

Markup

<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-visually-hidden">Warning</span>
    You can be fined up to £5,000 if you don’t register.
  </strong>
</div>

Macro

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

{{ govukWarningText({
  text: "You can be fined up to £5,000 if you don’t register.",
  iconFallbackText: "Warning"
}) }}