All components
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-heading-1">
Section A
</span>
</h2>
</div>
<div id="accordion-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="accordion-heading-2">
Section B
</span>
</h2>
</div>
<div id="accordion-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({
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"
}
}
]
}) }}Code
Markup
<a href="#" class="govuk-back-link">Back</a>Macro
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{{ govukBackLink({}) }}Breadcrumbs
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"
}
]
}) }}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
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",
maxlength: 10,
label: {
text: "Can you provide more detail?"
}
}) }}Checkboxes
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
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
Code
Markup
<div class="govuk-form-group">
<div class="govuk-date-input" id="date-input">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="date-input-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-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="date-input-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-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="date-input-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="date-input-year" name="year" type="text" inputmode="numeric">
</div>
</div>
</div>
</div>Macro
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{{ govukDateInput(undefined) }}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
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
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
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: {}
}) }}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
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({
name: "file-upload-1",
label: {
text: "Upload a file"
}
}) }}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: header
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({}) }}Code
Markup
<div class="govuk-hint">
It's on your National Insurance card, benefit letter, payslip or P60.
For example, 'QQ 12 34 56 C'.
</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"
}) }}Code
Markup
<div class="govuk-form-group">
<label class="govuk-label" for="test-name">
National Insurance number
</label>
<input class="govuk-input" id="test-name" name="test-name" type="text">
</div>Macro
{% from "govuk/components/input/macro.njk" import govukInput %}
{{ govukInput({
label: {
text: "National Insurance number"
},
name: "test-name"
}) }}Inset text
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."
}) }}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
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
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"
}
]
}) }}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
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
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.'
}) }}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"
}
]
}) }}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({
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
}
]
}) }}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
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"
}
}
]
}) }}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"
}
]
]
}) }}Code
Markup
<div id="tabs" 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"
}
}
]
}) }}Code
Markup
<strong class="govuk-tag">
Alpha
</strong>Macro
{% from "govuk/components/tag/macro.njk" import govukTag %}
{{ govukTag({
text: "Alpha"
}) }}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"
}
}
}
]
}) }}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",
label: {
text: "Can you provide more detail?"
}
}) }}Warning text
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"
}) }}