Public layout example
With account layout enabled
Adds account layout wrapper around the content passed in to the component
How it looks (preview)
<!DOCTYPE html>
<!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="govuk-template" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>GOV.UK - The best place to find government services and information</title>
<script src="/assets/government-frontend/govuk_publishing_components/vendor/lux/lux-measurer-db6c8505a6690974922b8578eb1f2208d3073807f98d9a048efe9991f8dfc92d.js" async="async"></script>
<script src="/assets/government-frontend/govuk_publishing_components/rum-loader-a65b10e18ceeba3bd8a2eac507c7f2c513cdc82f35097df903fdea87f1dc2e33.js" async="async" data-lux-reporter-script="/assets/government-frontend/govuk_publishing_components/vendor/lux/lux-reporter-48c5bd366fe0d4d9ee3ab6df90274b509ac670dd5a2870e1c181546a94955937.js"></script>
<meta name="govuk:components_gem_version" content="45.6.0" />
<script src="/assets/government-frontend/govuk_publishing_components/load-analytics-062b1680ec0f680bff179f2ff83eaf5a4fe54d4e109df8e98eb78eb59a195a34.js" type="module"></script>
<link rel="stylesheet" href="/assets/government-frontend/application-c357aabf79c6236777c898194d9ab6cc820429fa50731a1ad9185441b1a72cbb.css" media="all" />
<link rel="icon" sizes="48x48" href="/assets/government-frontend/favicon-f54816fc15997bd42cd90e4c50b896a1fc098c0c32957d4e5effbfa9f9b35e53.ico">
<link rel="icon" sizes="any" href="/assets/government-frontend/favicon-50144c9d83e59584c45b249ad9e9abfdd23689876c33f28457df13bbdd9c8688.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/government-frontend/govuk-icon-mask-cdf4265165f8d7f9eec54aa2c1dfbb3d8b6d297c5d7919f0313e0836a5804bb6.svg" color="#0b0c0c">
<link rel="apple-touch-icon" href="/assets/government-frontend/govuk-icon-180-d2d7399ff2ba05372b6b2018cc67053e458a748cceea1a550d804dbec401e3ed.png">
<meta name="theme-color" content="#0b0c0c" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://www.gov.uk/assets/government-frontend/govuk-opengraph-image-03837e1cec82f217cf32514635a13c879b8c400ae3b1c207c5744411658c7635.png">
</head>
<body class="gem-c-layout-for-public govuk-template__body">
<script nonce="ejovNgyJkNY+KMXT+fvUIQ==">
//<![CDATA[
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
//]]>
</script>
<div id="global-cookie-message" data-module="cookie-banner" data-nosnippet="" aria-label="Cookies on GOV.UK" class="gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper" role="region" hidden="hidden">
<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 GOV.UK</h2>
<div tabindex="-1" class="govuk-cookie-banner__content gem-c-cookie-banner__confirmation">
<span class="gem-c-cookie-banner__content"><p class='govuk-body'>We use some essential cookies to make this website work.</p><p class='govuk-body'>We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p><p class='govuk-body'>We also use cookies set by other sites to help us deliver content from their services.</p></span>
<p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden
data-ga4-cookie-banner
data-module="ga4-link-tracker"
data-ga4-track-links-only
data-ga4-set-indexes
data-ga4-link="{"event_name":"navigation","type":"cookie banner","section":"You have accepted additional cookies"}"
>You have accepted additional cookies. <span class="gem-c-cookie-banner__confirmation-message">You can <a class="govuk-link" href="/help/cookies">change your cookie settings</a> at any time.</span></p>
<p class="gem-c-cookie-banner__confirmation-message--rejected govuk-body" hidden>You have rejected additional cookies. <span class="gem-c-cookie-banner__confirmation-message">You can <a class="govuk-link" href="/help/cookies">change your cookie settings</a> at any time.</span></p>
</div>
</div>
</div>
<div class="js-confirmation-buttons govuk-button-group">
<button class="gem-c-button govuk-button" type="submit" data-accept-cookies="true" data-cookie-types="all">Accept additional cookies</button>
<button class="gem-c-button govuk-button" type="submit" data-reject-cookies="true">Reject additional cookies</button>
<a class="govuk-link" href="/help/cookies">View cookies</a>
</div>
<div hidden class="js-hide-button govuk-button-group">
<button
class="gem-c-cookie-banner__hide-button govuk-button"
data-hide-cookie-banner="true"
data-module="ga4-event-tracker"
data-ga4-event="{"event_name":"select_content","type":"cookie banner","action":"closed","section":"You have accepted additional cookies"}" >
Hide this message
</button>
</div>
</div>
</div>
<a class="gem-c-skip-link govuk-skip-link govuk-!-display-none-print" data-module="govuk-skip-link" href="#content">Skip to main content</a>
<header data-module="govuk-header" class="gem-c-layout-header govuk-header gem-c-layout-header--no-bottom-border" role="banner">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-grid-row">
<div class="gem-c-layout-header__logo govuk-grid-column-one-half">
<div class="govuk-header__logo gem-c-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>
<div class="govuk-grid-column-one-half gem-c-layout-header__search govuk-!-display-none-print">
<button
class="search-toggle govuk-js-header-toggle"
data-search-toggle-for="search"
data-button-name="search"
data-show-text="Show search"
data-hide-text="Hide search"
aria-controls="search-73ea0f9f"
>
Show search
</button>
<form
action="/search"
class="gem-c-layout-header__search-form govuk-clearfix govuk-!-display-none-print"
id="search-73ea0f9f"
method="get"
role="search"
>
<div class="gem-c-search govuk-!-display-none-print govuk-!-margin-bottom-0 gem-c-search--no-border gem-c-search--on-white" data-module="gem-toggle-input-class-on-focus">
<label for="site-search-text" class="gem-c-search__label">Search on GOV.UK</label>
<div class="gem-c-search__item-wrapper">
<div class="js-search-input-wrapper">
<input enterkeyhint="search" class="gem-c-search__item gem-c-search__input js-class-toggle" id="site-search-text" name="q" title="Search" type="search" value="" autocorrect="off" autocapitalize="off">
</div>
<div class="gem-c-search__item gem-c-search__submit-wrapper">
<button class="gem-c-search__submit" type="submit" enterkeyhint="search">
Search GOV.UK
<svg
class="gem-c-search__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3" />
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3" />
</svg>
</button> </div>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<div class="">
<div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
</div>
<div class="govuk-width-container">
<div class="gem-c-phase-banner govuk-phase-banner" data-ga4-phase-banner="beta" data-module="ga4-link-tracker" data-ga4-track-links-only="" data-ga4-set-indexes="" data-ga4-link="{"event_name":"navigation","type":"phase banner","section":"This is a new service – your feedback will help us to improve it."}">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">Beta</strong>
<span class="govuk-phase-banner__text">This is a new service – your <a class="govuk-link" href="https://signin.account.gov.uk/contact-us?supportType=PUBLIC">feedback</a> will help us to improve it.</span>
</p></div>
<div class="govuk-grid-row govuk-main-wrapper">
<div class="govuk-grid-column-one-third">
<nav aria-label="Account management" class="gem-c-layout-for-public-account-nav">
<ul class="gem-c-layout-for-public-account-menu">
<li class="gem-c-layout-for-public-account-menu__item ">
<a class="gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state" href="https://home.account.gov.uk">Your GOV.UK One Login</a>
</li>
<li class="gem-c-layout-for-public-account-menu__item ">
<a class="gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state" data-module="explicit-cross-domain-links" href="https://home.account.gov.uk/security">Settings</a>
</li>
</ul>
</nav>
</div>
<div class="govuk-grid-column-two-thirds">
<div id="wrapper">
<main role="main" id="content">
<h2 class="govuk-heading-l">This is a title</h2>
<p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
</main>
</div>
</div>
</div>
</div>
<div class="govuk-width-container">
<div data-module="feedback ga4-event-tracker" class="gem-c-feedback govuk-!-display-none-print">
<div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
<div class="gem-c-feedback__prompt-content">
<div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
<div class="gem-c-feedback__prompt-question-answer">
<h2 class="gem-c-feedback__prompt-question">Is this page useful?</h2>
<ul class="gem-c-feedback__option-list">
<li class="gem-c-feedback__option-list-item govuk-visually-hidden" hidden>
<a class="gem-c-feedback__prompt-link" role="button" hidden="hidden" aria-hidden="true" href="/contact/govuk">
Maybe
</a> </li>
<li class="gem-c-feedback__option-list-item">
<button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"Yes","section":"Is this page useful?","tool_name":"Is this page useful?"}">
Yes <span class="govuk-visually-hidden">this page is useful</span>
</button> </li>
<li class="gem-c-feedback__option-list-item">
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"No","section":"Is this page useful?","tool_name":"Is this page useful?"}">
No <span class="govuk-visually-hidden">this page is not useful</span>
</button> </li>
</ul>
</div>
</div>
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
Thank you for your feedback
</div>
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" aria-expanded="false" aria-controls="something-is-wrong" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page","section":"Is this page useful?","tool_name":"Is this page useful?"}">
Report a problem with this page
</button> </div>
</div>
</div>
<form action="https://www.gov.uk/contact/govuk/problem_reports"
id="something-is-wrong"
class="gem-c-feedback__form js-feedback-form"
method="post"
hidden>
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="gem-c-feedback__error-summary gem-c-feedback__js-show js-errors" tabindex="-1" hidden></div>
<input type="hidden" name="url" value="https://govuk-government-frontend.herokuapp.com/component-guide/layout_for_public/with_account_layout_enabled">
<h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
<p id="feedback_explanation" class="gem-c-feedback__form-paragraph">Don’t include personal or financial information like your National Insurance number or credit card details.</p>
<div class="govuk-visually-hidden" aria-hidden="true">
<label for="giraffe">This field is for robots only. Please leave blank</label>
<input id="giraffe" name="giraffe" type="text" pattern=".{0}" tabindex="-1" autocomplete="off">
</div>
<div class="gem-c-textarea govuk-form-group govuk-!-margin-bottom-6">
<label for="textarea-3a7a1c39" class="gem-c-label govuk-label">What were you doing?</label>
<textarea name="what_doing" class="govuk-textarea" id="textarea-3a7a1c39" rows="3" spellcheck="true" aria-describedby="feedback_explanation">
</textarea>
</div>
<div class="gem-c-textarea govuk-form-group govuk-!-margin-bottom-6">
<label for="textarea-6899160a" class="gem-c-label govuk-label">What went wrong?</label>
<textarea name="what_wrong" class="govuk-textarea" id="textarea-6899160a" rows="3" spellcheck="true">
</textarea>
</div>
<button class="gem-c-button govuk-button" type="submit" data-ga4-event="{"event_name":"form_submit","type":"feedback","text":"Send","section":"Help us improve GOV.UK","tool_name":"Help us improve GOV.UK"}">Send</button>
<button
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
aria-controls="something-is-wrong"
aria-expanded="true">
Cancel
</button>
</div>
</div>
</form>
<script nonce="ejovNgyJkNY+KMXT+fvUIQ==">
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
var input = document.querySelector("#giraffe"),
form = document.querySelector("#something-is-wrong")
form.addEventListener("submit", spamCapture);
function spamCapture(e) {
if (input.value.length !== 0) return;
e.preventDefault();
}
});
//]]>
</script>
<div id="page-is-not-useful" class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
<div class="gem-c-feedback__error-summary js-errors" tabindex="-1" hidden></div>
<h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
<p id="survey_explanation" class="gem-c-feedback__form-paragraph">
To help us improve GOV.UK, we’d like to know more about your visit today.
<a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=no-js" class="govuk-link" target="_blank" rel="noopener noreferrer external">Please fill in this survey (opens in a new tab)</a>.
</p>
<button
class="govuk-button govuk-button--secondary js-close-form"
aria-controls="page-is-not-useful"
aria-expanded="true"
hidden>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
<footer data-module="ga4-link-tracker" class="gem-c-layout-footer govuk-footer gem-c-layout-footer--border" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-grid-column-two-thirds govuk-!-display-none-print">
<h2 class="govuk-footer__heading govuk-heading-m">Services and information</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-2">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"1","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/benefits">Benefits</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"2","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/births-deaths-marriages">Births, death, marriages and care</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"3","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/business">Business and self-employed</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"4","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/childcare-parenting">Childcare and parenting</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"5","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/citizenship">Citizenship and living in the UK</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"6","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/justice">Crime, justice and the law</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"7","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/disabilities">Disabled people</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"8","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/driving">Driving and transport</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"9","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/education">Education and learning</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"10","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/employing-people">Employing people</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"11","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/environment-countryside">Environment and countryside</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"12","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/housing-local-services">Housing and local services</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"13","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/tax">Money and tax</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"14","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/abroad">Passports, travel and living abroad</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"15","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/visas-immigration">Visas and immigration</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"16","index_section":"1","index_section_count":"5","index_total":"16","section":"Services and information"}" href="https://www.gov.uk/browse/working">Working, jobs and pensions</a>
</li>
</ul>
</div>
<div class="govuk-grid-column-one-third govuk-!-display-none-print">
<h2 class="govuk-footer__heading govuk-heading-m">Government activity</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-1">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"1","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/government/organisations">Departments</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"2","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/news-and-communications">News</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"3","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/guidance-and-regulation">Guidance and regulation</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"4","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/research-and-statistics">Research and statistics</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"5","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/policy-papers-and-consultations">Policy papers and consultations</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"6","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/search/transparency-and-freedom-of-information-releases">Transparency</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"7","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/government/how-government-works">How government works</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"8","index_section":"2","index_section_count":"5","index_total":"8","section":"Government activity"}" href="https://www.gov.uk/government/get-involved">Get involved</a>
</li>
</ul>
</div>
</div>
<hr class="govuk-footer__section-break govuk-!-display-none-print">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list govuk-!-display-none-print">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"1","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help">Help</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"2","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/privacy-notice">Privacy</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"3","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/cookies">Cookies</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"4","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/accessibility-statement">Accessibility statement</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"5","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/contact">Contact</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"6","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/help/terms-conditions">Terms and conditions</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" lang="cy" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"7","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/cymraeg">Rhestr o Wasanaethau Cymraeg</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-ga4-link="{"event_name":"navigation","type":"footer","index_link":"8","index_section":"3","index_section_count":"5","index_total":"8","section":"Support links"}" href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a>
</li>
</ul>
<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"
data-ga4-track-links-only
data-ga4-link="{"event_name":"navigation","section":"Licence","index_section":"4","index_link":"1","index_section_count":"5","text":"Open Government Licence v3.0","index_total":"1","type":"footer"}"
>
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"
data-ga4-link="{"event_name":"navigation","section":"Copyright","index_section":"5","index_link":"1","index_section_count":"5","text":"© Crown copyright","index_total":"1","type":"footer"}"
>
<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>
<script src="/assets/government-frontend/application-01a60bd9634d5b54b3f79c12cb1b2d95f8b00bbd24b9b2cf897066f58f75f432.js" type="module"></script>
</body></html>How to call this example
<%= render "govuk_publishing_components/components/layout_for_public", {
show_account_layout: true
} do %>
<h2 class="govuk-heading-l">This is a title</h2>
<p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
<% end %>