Public layout example

With custom header

Allows the header to be replaced with HTML injected by the calling application in a content_for tag named :custom_header.

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/frontend/govuk_publishing_components/vendor/lux/lux-measurer-db6c8505a6690974922b8578eb1f2208d3073807f98d9a048efe9991f8dfc92d.js" async="async"></script>
    <script src="/assets/frontend/govuk_publishing_components/rum-loader-a65b10e18ceeba3bd8a2eac507c7f2c513cdc82f35097df903fdea87f1dc2e33.js" async="async" data-lux-reporter-script="/assets/frontend/govuk_publishing_components/vendor/lux/lux-reporter-48c5bd366fe0d4d9ee3ab6df90274b509ac670dd5a2870e1c181546a94955937.js"></script>

    <meta name="govuk:components_gem_version" content="45.6.1" />
    <script src="/assets/frontend/govuk_publishing_components/load-analytics-c21de422ff741c3f44f494b4044e13ce955a29e42b1575a38339706f2a24b15e.js" type="module"></script>

    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="58wNaKv8pIuvLvnxLzLhzjHV37JUhzJOqogaHr6IJq4wOevDAU8TYaS7kyziSGd5p1ialNZuSyz24M_pLnRGgg" />

    <link rel="stylesheet" href="/assets/frontend/application-52317d426199dc41bb91ca225d09ea009cc40bda1cbb5d9111c02e37222ce2b6.css" media="all" />
    <link rel="icon" sizes="48x48" href="/assets/frontend/favicon-f54816fc15997bd42cd90e4c50b896a1fc098c0c32957d4e5effbfa9f9b35e53.ico">
    <link rel="icon" sizes="any" href="/assets/frontend/favicon-50144c9d83e59584c45b249ad9e9abfdd23689876c33f28457df13bbdd9c8688.svg" type="image/svg+xml">
    <link rel="mask-icon" href="/assets/frontend/govuk-icon-mask-cdf4265165f8d7f9eec54aa2c1dfbb3d8b6d297c5d7919f0313e0836a5804bb6.svg" color="#0b0c0c">
    <link rel="apple-touch-icon" href="/assets/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/frontend/govuk-opengraph-image-03837e1cec82f217cf32514635a13c879b8c400ae3b1c207c5744411658c7635.png">

    
  </head>
  <body class="gem-c-layout-for-public govuk-template__body">
    <script nonce="akBOdqbMzxqMGdMeAKzuHw==">
//<![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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;cookie banner&quot;,&quot;section&quot;:&quot;You have accepted additional cookies&quot;}"
          >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="{&quot;event_name&quot;:&quot;select_content&quot;,&quot;type&quot;:&quot;cookie banner&quot;,&quot;action&quot;:&quot;closed&quot;,&quot;section&quot;:&quot;You have accepted additional cookies&quot;}" >
          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 id="custom-header">I'm a custom header</header>


    

      <div class="">
        <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></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="{&quot;event_name&quot;:&quot;form_submit&quot;,&quot;type&quot;:&quot;feedback&quot;,&quot;text&quot;:&quot;Yes&quot;,&quot;section&quot;:&quot;Is this page useful?&quot;,&quot;tool_name&quot;:&quot;Is this page useful?&quot;}">
              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="{&quot;event_name&quot;:&quot;form_submit&quot;,&quot;type&quot;:&quot;feedback&quot;,&quot;text&quot;:&quot;No&quot;,&quot;section&quot;:&quot;Is this page useful?&quot;,&quot;tool_name&quot;:&quot;Is this page useful?&quot;}">
              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="{&quot;event_name&quot;:&quot;form_submit&quot;,&quot;type&quot;:&quot;feedback&quot;,&quot;text&quot;:&quot;Report a problem with this page&quot;,&quot;section&quot;:&quot;Is this page useful?&quot;,&quot;tool_name&quot;:&quot;Is this page useful?&quot;}">
        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-frontend.herokuapp.com/component-guide/layout_for_public/with_custom_header">

      <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-7b6cb3bb" class="gem-c-label govuk-label">What were you doing?</label>





  <textarea name="what_doing" class="govuk-textarea" id="textarea-7b6cb3bb" 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-cae85209" class="gem-c-label govuk-label">What went wrong?</label>





  <textarea name="what_wrong" class="govuk-textarea" id="textarea-cae85209" rows="3" spellcheck="true">
</textarea>
     
</div>


      


  <button class="gem-c-button govuk-button" type="submit" data-ga4-event="{&quot;event_name&quot;:&quot;form_submit&quot;,&quot;type&quot;:&quot;feedback&quot;,&quot;text&quot;:&quot;Send&quot;,&quot;section&quot;:&quot;Help us improve GOV.UK&quot;,&quot;tool_name&quot;:&quot;Help us improve GOV.UK&quot;}">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="akBOdqbMzxqMGdMeAKzuHw==">
//<![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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;1&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" href="https://www.gov.uk/browse/benefits">Benefits</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;2&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;3&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;4&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;5&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;6&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;7&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;8&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;9&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;10&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;11&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;12&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;13&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;14&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;15&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;16&quot;,&quot;index_section&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;16&quot;,&quot;section&quot;:&quot;Services and information&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;1&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" href="https://www.gov.uk/government/organisations">Departments</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;2&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;3&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;4&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;5&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;6&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;7&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;8&quot;,&quot;index_section&quot;:&quot;2&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Government activity&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;1&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" href="https://www.gov.uk/help">Help</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;2&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;3&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;4&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;5&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" href="https://www.gov.uk/contact">Contact</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;6&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;7&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;footer&quot;,&quot;index_link&quot;:&quot;8&quot;,&quot;index_section&quot;:&quot;3&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;index_total&quot;:&quot;8&quot;,&quot;section&quot;:&quot;Support links&quot;}" 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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;section&quot;:&quot;Licence&quot;,&quot;index_section&quot;:&quot;4&quot;,&quot;index_link&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;text&quot;:&quot;Open Government Licence v3.0&quot;,&quot;index_total&quot;:&quot;1&quot;,&quot;type&quot;:&quot;footer&quot;}"
        >
          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="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;section&quot;:&quot;Copyright&quot;,&quot;index_section&quot;:&quot;5&quot;,&quot;index_link&quot;:&quot;1&quot;,&quot;index_section_count&quot;:&quot;5&quot;,&quot;text&quot;:&quot;© Crown copyright&quot;,&quot;index_total&quot;:&quot;1&quot;,&quot;type&quot;:&quot;footer&quot;}"
      >
        <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/frontend/application-078481b16b1979ff766a8914e5a72aeace43ff9d95202b94f3b4df524ccf5ec0.js" type="module"></script>
</body></html>

How to call this example

<% content_for(:custom_header) do %>
  <header id="custom-header">I'm a custom header</header>
<% end %>
<%= render "govuk_publishing_components/components/layout_for_public", {
} %>