1. Component Guide
  2. Public layout
  3. With emergency banner
Public layout example

With emergency banner

This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.

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/govuk_publishing_components/vendor/lux/lux-measurer-2953485ff03af7b9ea4c6a6170eeae0e42d13011e7ab0d7f31552c6c68b1ea08.js" async="async"></script>
    <script src="/assets/govuk_publishing_components/rum-loader-1171f0e3b18a5eb1e412e54179151fe13a4eea876b0e879ea42cf20eb46e6ca6.js" async="async"></script>

    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="HpQUh35a11BSaFwtG1rvi3979H0lLWnzedJpcW7QdNlMiPwECIia6GrYhpMpe56XSDj3xZLcxwhSfDIo-KO4Uw" />

    <link rel="stylesheet" media="all" href="/assets/application-a4ef54ae2eead8c38ae91cd7bd4c58fac50bf7471906ed62964950ec74fa6fb3.css" />
    <link rel="stylesheet" media="print" href="/assets/print-f3063f196d3e0f4359fd4d511605aa4ee0aba003eee8f7cd190d6c200f981fe4.css" />
    <!--[if lt IE 9]><script src="/assets/govuk_publishing_components/ie-a4524544a53d57a7e259b4bb966b9c32557c98c920b77e52d09304642b68401a.js" crossorigin="anonymous" integrity="sha256-pFJFRKU9V6fiWbS7lmucMlV8mMkgt35S0JMEZCtoQBo="></script><![endif]-->
    <link rel="shortcut icon" href="/assets/favicon-6921a31b023a41929073393bdad00077436c3835994079bcd2e437261875b2fc.ico" type="image/x-icon" />
    <link rel="mask-icon" href="/assets/govuk-mask-icon-de738c3fcce8ce2a91b67e89787090dc24a5cda0275ab6b75f6226c5b9619d3d.svg" color="#0b0c0c">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/govuk-apple-touch-icon-180x180-ea1cbb1cbbeddfff275dfa6e8e46b84cd530892df79dc4882a8f99b802b49a90.png">
    <link rel="apple-touch-icon" sizes="167x167" href="/assets/govuk-apple-touch-icon-167x167-181e404a50c572923285fb83f0fbd78da6b4e38e3ce52f8e6b8e29da8586450a.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/assets/govuk-apple-touch-icon-152x152-02457fcdcee8d309276305af2233d41bfb8fd055e855727d355e61bce7ffa9bb.png">
    <link rel="apple-touch-icon" href="/assets/govuk-apple-touch-icon-a318f305290c523aed80082456175b46c95350c0eeac93f42e78a71c7a55544e.png">

    <meta name="theme-color" content="#0b0c0c" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta property="og:image" content="/assets/govuk-opengraph-image-a1f7d89ffd0782738b1aeb0da37842d8bd0addbd724b8e58c3edbc7287cc11de.png">

    
  </head>
  <body class="gem-c-layout-for-public govuk-template__body">
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
    </script>
    <a class="gem-c-skip-link govuk-skip-link govuk-!-display-none-print" href="#content">Skip to main content</a>


    <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
  <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="Cookies on GOV.UK">
    <div class="gem-c-cookie-banner__message 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 class="govuk-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>
          </div>
        </div>
      </div>
          <div class="govuk-button-group">
            


  <button class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>


            


  <button class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>


            <a class="govuk-link" href="/help/cookies">View cookies</a>
          </div>
    </div>
  </div>
  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden>
    <p class="gem-c-cookie-banner__confirmation-message" role="alert">You can <a class="govuk-link" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation" href="/help/cookies">change your cookie settings</a> at any time.</p>
    <div class="govuk-button-group">
      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide this message</button>
    </div>
  </div>
</div>


        
<header class="gem-c-layout-header govuk-header gem-c-layout-header--no-bottom-border"  role="banner" data-module="govuk-header">
  <div class="govuk-header__container govuk-width-container">
      <div class="govuk-grid-row">
        <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
          <div class="govuk-header__logo gem-c-header__logo">
  <a href="/" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
    <span class="govuk-header__logotype gem-c-header__logotype">
      <!--[if gt IE 8]><!-->
      <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
        <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
      </svg>
      <!--<![endif]-->
      <!--[if IE 8]>
      <img src="/assets/govuk-logotype-crown-0cdbde943be3a6518a5d7c00b607d134f4d5e3d0e8c68a1bfa2dc81f1f3edc4e.png" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
      <![endif]-->
      <span class="govuk-header__logotype-text">
        GOV.UK
      </span>
    </span>
  </a>
</div>

        </div>
          <div class="govuk-grid-column-one-third gem-c-layout-header__search">
            <button
  class="search-toggle js-header-toggle"
  data-search-toggle-for="search"
  data-button-name="search"
  data-show-text="Show search"
  data-hide-text="Hide search"
>
  Show search
</button>
<form
  action="/search"
  class="gem-c-layout-header__search-form govuk-clearfix"
  id="search"
  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">
    <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="">
    <div class="gem-c-search__item gem-c-search__submit-wrapper">
      <button class="gem-c-search__submit" type="submit" data-track-category="headerClicked" data-track-action="searchSubmitted" data-track-label="none" data-module="gem-track-click" 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="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>

      <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>


      <div id="wrapper" class="govuk-width-container">
        
        <main class="govuk-main-wrapper" id="content">
          
        </main>
      </div>

      <div class="govuk-width-container">
        
<div class="gem-c-feedback govuk-!-display-none-print" data-module="feedback">
  
<div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
  <div class="gem-c-feedback__prompt-questions js-prompt-questions">
    <h2 class="gem-c-feedback__prompt-question">Is this page useful?</h2>
    <!-- Maybe button exists only to try and capture clicks by bots -->
    <button data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
      Maybe
    </button>
    
    <ul class="gem-c-feedback__option-list">
      <li class="gem-c-feedback__option-list-item">
        <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">
          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" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false">
          No <span class="govuk-visually-hidden">this page is not useful</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success js-hidden" role="alert">
    Thank you for your feedback
  </div>
  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
    <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
      Report a problem with this page
    </button>
  </div>
</div>

  <form action="/contact/govuk/problem_reports"
  id="something-is-wrong"
  class="gem-c-feedback__form js-feedback-form js-hidden"
  data-track-category="Onsite Feedback"
  data-track-action="GOV.UK Send Form"
  method="post">
  <button
    class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
    data-track-category="Onsite Feedback"
    data-track-action="GOV.UK Close Form"
    aria-controls="something-is-wrong"
    aria-expanded="true">
    Close
  </button>

  <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-hidden js-errors" tabindex="-1"></div>

      <input type="hidden" name="url" value="https://components.publishing.service.gov.uk/component-guide/layout_for_public/with_emergency_banner">

      <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-form-group">

            
  <label for="input-353e24c8" class="gem-c-label govuk-label">What were you doing?</label>







    
    <input aria-describedby="feedback_explanation" class="gem-c-input govuk-input" id="input-353e24c8" name="what_doing" type="text">
</div>

      
<div class="govuk-form-group">

            
  <label for="input-9a88928b" class="gem-c-label govuk-label">What went wrong?</label>







    
    <input class="gem-c-input govuk-input" id="input-9a88928b" name="what_wrong" type="text">
</div>

      


  <button class="gem-c-button govuk-button" type="submit">Send</button>


    </div>
  </div>
</form>

  <form action="/contact/govuk/email-survey-signup"
  id="page-is-not-useful"
  class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form js-hidden"
  data-track-category="yesNoFeedbackForm"
  data-track-action="Send Form"
  method="post">
  <button
    class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
    data-track-category="yesNoFeedbackForm"
    data-track-action="ffFormClose"
    aria-controls="page-is-not-useful"
    aria-expanded="true">
    Close
  </button>

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds" id="survey-wrapper">
      <div class="gem-c-feedback__error-summary js-hidden js-errors" tabindex="-1"></div>

      <input name="email_survey_signup[survey_id]" type="hidden" value="footer_satisfaction_survey">
      <input name="email_survey_signup[survey_source]" type="hidden" value="/component-guide/layout_for_public/with_emergency_banner">

      <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. We’ll send you a link to a feedback form. It will take only 2 minutes to fill in. Don’t worry we won’t send you spam or share your email address with anyone.</p>

      
<div class="govuk-form-group">

            
  <label for="input-8c25e38d" class="gem-c-label govuk-label">Email address</label>







    
    <input aria-describedby="survey_explanation" autocomplete="email" class="gem-c-input govuk-input" id="input-8c25e38d" name="email_survey_signup[email_address]" type="email">
</div>

       


  <button class="gem-c-button govuk-button" type="submit">Send me the survey</button>


    </div>
  </div>
</form>

</div>

      </div>

      <footer class="gem-c-layout-footer govuk-footer gem-c-layout-footer--border" role="contentinfo">
  <div class="govuk-width-container" data-module="gem-track-click">
      <div class="govuk-footer__navigation">
            <div class="govuk-grid-column-two-thirds govuk-!-display-none-print">
              <h2 class="govuk-footer__heading govuk-heading-m">Coronavirus (COVID-19)</h2>
                <ul class="govuk-footer__list">
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="coronavirusLinks" data-track-label="Coronavirus (COVID-19): guidance and support" href="/coronavirus">Coronavirus (COVID-19): guidance and support</a>
                      </li>
                </ul>
            </div>
            <div class="govuk-grid-column-one-third govuk-!-display-none-print">
              <h2 class="govuk-footer__heading govuk-heading-m">Brexit</h2>
                <ul class="govuk-footer__list govuk-footer__list--columns-1">
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="transitionLinks" data-track-label="Check what you need to do" href="/brexit">Check what you need to do</a>
                      </li>
                </ul>
            </div>
            <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-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Benefits" href="/browse/benefits">Benefits</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Births, deaths, marriages and care" href="/browse/births-deaths-marriages">Births, deaths, marriages and care</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Business and self-employed" href="/browse/business">Business and self-employed</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Childcare and parenting" href="/browse/childcare-parenting">Childcare and parenting</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Citizenship and living in the UK" href="/browse/citizenship">Citizenship and living in the UK</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Crime, justice and the law" href="/browse/justice">Crime, justice and the law</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Disabled people" href="/browse/disabilities">Disabled people</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Driving and transport" href="/browse/driving">Driving and transport</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Education and learning" href="/browse/education">Education and learning</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Employing people" href="/browse/employing-people">Employing people</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Environment and countryside" href="/browse/environment-countryside">Environment and countryside</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Housing and local services" href="/browse/housing-local-services">Housing and local services</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Money and tax" href="/browse/tax">Money and tax</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Passports, travel and living abroad" href="/browse/abroad">Passports, travel and living abroad</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Visas and immigration" href="/browse/visas-immigration">Visas and immigration</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Working, jobs and pensions" href="/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">Departments and policy</h2>
                <ul class="govuk-footer__list">
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="How government works" href="/government/how-government-works">How government works</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Departments" href="/government/organisations">Departments</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Worldwide" href="/world">Worldwide</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Services" href="/search/services">Services</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Guidance and regulation" href="/search/guidance-and-regulation">Guidance and regulation</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="News and communications" href="/search/news-and-communications">News and communications</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Research and statistics" href="/search/research-and-statistics">Research and statistics</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Policy papers and consultations" href="/search/policy-papers-and-consultations">Policy papers and consultations</a>
                      </li>
                      <li class="govuk-footer__list-item">
                        <a class="govuk-footer__link" data-track-category="footerClicked" data-track-action="footerLinks" data-track-label="Transparency and freedom of information releases" href="/search/transparency-and-freedom-of-information-releases">Transparency and freedom of information releases</a>
                      </li>
                </ul>
            </div>
      </div>

      <hr class="govuk-footer__section-break">
    <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" href="/help">Help</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" href="/help/privacy-notice">Privacy</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" href="/help/cookies">Cookies</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" href="/help/accessibility-statement">Accessibility statement</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" href="/contact">Contact</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" href="/help/terms-conditions">Terms and conditions</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" lang="cy" href="/cymraeg">Rhestr o Wasanaethau Cymraeg</a>
              </li>
              <li class="govuk-footer__inline-list-item">
                <a class="govuk-footer__link" href="/government/organisations/government-digital-service">Government Digital Service</a>
              </li>
          </ul>
        <svg role="presentation" 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="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>
    <script src="/assets/application-d4c1b99ce1386ead49e8165c969b25a258ad6427f730c1d73d71b359cac73b59.js"></script>
</body></html>

How to call this example

<%= render "govuk_publishing_components/components/layout_for_public", {
  emergency_banner: sanitize("<div class=\"govuk-!-padding-top-3 govuk-!-padding-bottom-3\">This is the emergency banner slot</div>")
} %>