Skip to main content

User testing

Help us improve this service. Take part in a short online exercise

Header

The ONS header shows users which ONS service they are on.

Open this example in a new tab  
<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Page title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Page title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0'
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

When to use this component

You should use the ONS header at the top of any ONS service.

How to use this component

Internal

The internal service variant of the header. Use the variant parameter with the value internal when implementing for an internal service.

Open this example in a new tab  
<header class="ons-header  ons-header--internal" role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Service title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Service title',
        "logoHref": '#0',
        "variants": 'internal',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0'
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

External survey with sign out button and language toggle

The external header with language selector and save button, should be used across public facing services.

The ghost button in the header moves to the footer when the page width is under the medium breakpoint (less than 740px).

Open this example in a new tab  
<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
        <div class="ons-header__links ons-grid__col ons-col-auto">
          <div class="ons-grid__col ons-col-auto ">
            <ul class="ons-language-links">
              <li class="ons-language-links__item">
                <a href="#0" lang="cy">Cymraeg</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <div class="ons-header__title">Survey title</div>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
          <a href="#0" role="button" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
            <span class="ons-btn__inner">Save and sign out
              <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
                <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Survey title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "button": {
            "text": 'Save and sign out',
            "url": '#0',
            "iconType": 'exit',
            "iconPosition": 'after'
        },
        "language": {
            "languages": [
                {
                    "url": '#0',
                    "ISOCode": 'en',
                    "text": 'English',
                    "buttonAriaLabel": 'Language selector. Current language: English',
                    "chooseLanguage": 'Choose language',
                    "current": true
                },
                {
                    "url": '#0',
                    "ISOCode": 'cy',
                    "text": 'Cymraeg',
                    "buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
                    "chooseLanguage": 'Dewiswch iaith',
                    "current": false
                }
            ]
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

External with navigation

For services that require a main navigation. For mobile users, the navigation will be hidden and a menu button is shown which allows the navigation menu to be open and closed.

Open this example in a new tab  
<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Design system</div>
          </a>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
          <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
            <span class="ons-btn__inner">Menu
              <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-navigation-wrapper">
    <div class="ons-container ons-container--gutterless@xxs@l">
      <nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
        <ul class="ons-navigation__list">
          <li class="ons-navigation__item  ons-navigation__item--active">
            <a class="ons-navigation__link" href="#home">Home</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Guidance</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Foundations</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Components</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Patterns</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Design system',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "navigation": {
            "id": 'main-nav',
            "ariaLabel": 'Main menu',
            "currentPath": '#home',
            "itemsList": [
                {
                    "title": 'Home',
                    "url": '#home'
                },
                {
                    "title": 'Guidance',
                    "url": '#0'
                },
                {
                    "title": 'Foundations',
                    "url": '#0'
                },
                {
                    "title": 'Components',
                    "url": '#0'
                },
                {
                    "title": 'Patterns',
                    "url": '#0'
                }
            ],
            "toggleNavigationButton": {
                "text": 'Menu',
                "ariaLabel": 'Toggle main menu'
            }
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

Displays links in the masthead. For mobile users, if more than one service link is used, the links will be hidden and a menu button is shown which allows the menu to be open and closed.

Open this example in a new tab  
<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
        <div class="ons-header__links ons-grid__col ons-col-auto">
          <div class="ons-grid__col ons-col-auto ons-u-d-no@xxs@m">
            <nav class="ons-header-service-nav ons" aria-label="Services menu">
              <ul class="ons-header-service-nav__list" aria-label="Menu">
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">Help</a>
                </li>
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">My Account</a>
                </li>
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">Sign out</a>
                </li>
              </ul>
            </nav>
          </div>
          <div class="ons-grid__col ons-col-auto ons-u-d-no@m">
            <button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--text-link" aria-label="Toggle services menu" aria-controls="service-links" aria-haspopup="true" aria-expanded="false">
              <span class="ons-btn__inner">Menu
                <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                  <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="service-links" aria-label="Services menu">
      <ul class="ons-header-service-nav__list" aria-label="Menu">
        <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
          <a href="#0" class="ons-header-service-nav__link">Help</a>
        </li>
        <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
          <a href="#0" class="ons-header-service-nav__link">My Account</a>
        </li>
        <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
          <a href="#0" class="ons-header-service-nav__link">Sign out</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Page title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Page title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "serviceLinks": {
            "id": "service-links",
            "ariaLabel": 'Services menu',
            "ariaListLabel": 'Menu',
            "toggleServicesButton": {
                "text": 'Menu',
                "ariaLabel": 'Toggle services menu'
            },
            "itemsList": [
                {
                    "title": "Help",
                    "url": "#0"
                },
                {
                    "title": "My Account",
                    "url": "#0"
                },
                {
                    "title": "Sign out",
                    "url": "#0"
                }
            ]
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

External survey with description

Allows for text to be added below the title by adding the variant description to the header configuration. This should be used when the service would benefit from a description which informs users of what the service provides.

Open this example in a new tab  
<header class="ons-header  ons-header--description" role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Service title</div>
          </a>
          <p class="ons-header__description">This is the description or tagline</p>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
          <a href="#0" role="button" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
            <span class="ons-btn__inner">Save and sign out
              <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
                <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "variants": 'description',
        "title": 'Service title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "description": 'This is the description or tagline',
        "titleLogoHref": '#0',
        "button": {
            "text": 'Save and sign out',
            "url": '#0',
            "iconType": 'exit',
            "iconPosition": 'after'
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

External with multiple levels of navigation

For services that require multiple levels of navigation. When the viewport is below 980px, a menu button is shown which allows the sub navigation menu to be open and closed.

An additional third level can also be displayed in the mobile menu. The third level would be navigation that is presented in the left hand column of a page in desktop view but hidden on small viewports.

Open this example in a new tab  
<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </a></div>
          <div class="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                  <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                  <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                  <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Service manual</div>
          </a>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
          <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
            <span class="ons-btn__inner">Menu
              <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-navigation-wrapper">
    <div class="ons-container ons-container--gutterless@xxs@l">
      <nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
        <ul class="ons-navigation__list">
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Service standard</a>
          </li>
          <li class="ons-navigation__item  ons-navigation__item--active">
            <a class="ons-navigation__link" href="#design-system">Design system</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Accessibility</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Brand guidelines</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Content style guide</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
    <div class="ons-container ons-container--gutterless@xxs@l">
      <ul class="ons-navigation__list ons-navigation__list">
        <li class="ons-navigation__item ons-navigation__item ">
          <a class="ons-navigation__link ons-navigation__link" href="#0">Guidance</a>
        </li>
        <li class="ons-navigation__item ons-navigation__item ">
          <a class="ons-navigation__link ons-navigation__link" href="#0">Foundations</a>
        </li>
        <li class="ons-navigation__item ons-navigation__item ">
          <a class="ons-navigation__link ons-navigation__link" href="#0">Components</a>
        </li>
        <li class="ons-navigation__item ons-navigation__item  ons-navigation__item--active">
          <a class="ons-navigation__link ons-navigation__link" href="#patterns">Patterns</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="ons-u-d-no@l">
    <button type="submit" class="ons-btn ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown" aria-label="Toggle section navigation" aria-controls="sub-nav" aria-haspopup="true" aria-expanded="false">
      <span class="ons-btn__inner">Design system
        <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
          <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
        </svg>
      </span>
    </button>
    <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no proto-ons-js-secondary-nav ons-u-mt-xs" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
      <div class="ons-container ons-container--gutterless@xxs@l">
        <ul class="ons-navigation__list">
          <li class="ons-navigation__item">
            <a class="ons-navigation__link" href="#0">Overview</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Guidance</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Foundations</a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0">Components</a>
          </li>
          <li class="ons-navigation__item  ons-navigation__item--active">
            <a class="ons-navigation__link" href="#patterns">Patterns</a>
            <h3 class="ons-navigation__list-header">Ask users for...</h3>
            <ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
              <li class="ons-navigation__item ons-list__item  ons-navigation__item--active">
                <a class="ons-navigation__link ons-navigation__link--section" href="#patterns">Access codes</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Addresses</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Dates</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Durations</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Email addresses</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Numeric values</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Phone numbers</a>
              </li>
            </ul>
            <h3 class="ons-navigation__list-header">Help users to...</h3>
            <ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Access support in multiple languages</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Change language</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Check answers</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Control cookies</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Correct errors</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Download resources</a>
              </li>
              <li class="ons-navigation__item ons-list__item ">
                <a class="ons-navigation__link ons-navigation__link--section" href="#0">Extend a session</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Service manual',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "navigation": {
            "id": 'main-nav',
            "ariaLabel": 'Main menu',
            "currentPath": '#design-system',
            "currentPageTitle": 'Design system',
            "itemsList": [
                {
                    "title": 'Service standard',
                    "url": '#0'
                },
                {
                    "title": 'Design system',
                    "url": '#design-system'
                },
                {
                    "title": 'Accessibility',
                    "url": '#0'
                },
                {
                    "title": 'Brand guidelines',
                    "url": '#0'
                },
                {
                    "title": 'Content style guide',
                    "url": '#0'
                }
            ],
            "toggleNavigationButton": {
                "text": 'Menu',
                "ariaLabel": 'Toggle main menu'
            },
            "subNavigation": {
                "id": 'sub-nav',
                "overviewURL": '#0',
                "overviewText": 'Overview',
                "ariaLabel": 'Section menu',
                "currentPath": '#patterns',
                "itemsList": [
                    {
                        "title": 'Guidance',
                        "url": '#0'
                    },
                    {
                        "title": 'Foundations',
                        "url": '#0'
                    },
                    {
                        "title": 'Components',
                        "url": '#0'
                    },
                    {
                        "title": 'Patterns',
                        "url": '#patterns',
                        "sections": [
                            {
                                "sectionTitle": 'Ask users for...',
                                "children": [
                                    {
                                        "title": 'Access codes',
                                        "url": '#patterns'
                                    },
                                    {
                                        "title": 'Addresses',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Dates',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Durations',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Email addresses',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Numeric values',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Phone numbers',
                                        "url": '#0'
                                    }
                                ]
                            },
                            {
                                "sectionTitle": 'Help users to...',
                                "children": [
                                    {
                                        "title": 'Access support in multiple languages',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Change language',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Check answers',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Control cookies',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Correct errors',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Download resources',
                                        "url": '#0'
                                    },
                                    {
                                        "title": 'Extend a session',
                                        "url": '#0'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

Open this example in a new tab  
<!doctype html>
<html lang="cy">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
                        <title id="ons-logo-cy-alt">Office for National Statistics logo</title>
                        <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                          <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                          <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                          <path d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
                          <path d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
                          <path d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
                          <path d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
                          <path d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
                          <path d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
                          <path d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
                          <path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
                          <path d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
                          <path d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
                          <path d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
                          <path d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
                          <path d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
                          <path d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
                          <path d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
                          <path d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
                          <path d="M554.49,48.41V11.58h5.4V48.41Z" />
                          <path d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
                          <path d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
                          <path d="M643.63,48.41V11.58H649V48.41Z" />
                        </g>
                      </svg>
                    </a></div>
                  <div class="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
                        <title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
                        <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                          <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                          <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                          <path d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
                          <path d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
                          <path d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
                          <path d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
                          <path d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
                          <path d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
                          <path d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
                          <polygon points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
                          <path d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
                          <path d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
                          <path d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
                          <path d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
                          <path d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
                          <path d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
                          <path d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
                          <path d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
                          <path d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
                          <path d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
                          <polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
                          <path d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
                          <path d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
                          <path d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
                          <polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
                        </g>
                      </svg>
                    </a>
                  </div>
                </div>
                <div class="ons-header__links ons-grid__col ons-col-auto">
                  <div class="ons-grid__col ons-col-auto ">
                    <ul class="ons-language-links">
                      <li class="ons-language-links__item">
                        <a href="#0" lang="en">English</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <a class="ons-header__title-link" href="#0">
                    <div class="ons-header__title">Gwasanaeth Cymraeg</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "layout/_template.njk" %}

{% set pageConfig = {
    "header": {
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-cy',
        "title": 'Gwasanaeth Cymraeg',
        "titleLogoHref": '#0'
    },
    "language": {
        "allLanguagesUrl": '#0',
        "languages": [
            {
                "url": '#0',
                "ISOCode": 'en',
                "text": 'English',
                "buttonAriaLabel": 'Language selector. Current language: English',
                "chooseLanguage": 'Choose language',
                "allLanguages": 'All languages',
                "current": false
            },
            {
                "url": '#0',
                "ISOCode": 'cy',
                "text": 'Cymraeg',
                "buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
                "chooseLanguage": 'Dewiswch iaith',
                "allLanguages": 'Pob iaith',
                "current": true
            }
        ]
    }
} %}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

External with Census branding

Census

Open this example in a new tab  
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Census 2021</title>
    <link rel="stylesheet" href="/css/census.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#902082" />
    <meta name="description" content="Census 2021 is a UK wide population survey">
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="Census 2021">
    <meta property="og:image" content="/favicons/census/en/opengraph.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="Census 2021 is a UK wide population survey">
    <meta property="og:site_name" content="Census 2021">
    <meta property="og:locale" content="en">
    <meta property="og:locale:alternate" content="cy">
    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="Census 2021">
    <meta name="twitter:description" content="Census 2021 is a UK wide population survey">
    <meta name="twitter:image" content="/favicons/census/en/twitter.png">
    <!-- Canonical -->
    <link rel="canonical" href="">
    <link rel="alternate" href="#0" hreflang="en">
    <link rel="alternate" href="#0" hreflang="cy">
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/census/en/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                        <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                        <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                          <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                          <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                          <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                          <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                          <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                          <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                          <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                          <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                          <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                          <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                          <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                          <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                          <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                          <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                          <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                          <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                          <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                          <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                          <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                          <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                          <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                          <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                          <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                          <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                          <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                          <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                          <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                          <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                        </g>
                      </svg>
                    </a></div>
                  <div class="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                        <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                        <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                          <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                          <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                          <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                        </g>
                      </svg>
                    </a>
                  </div>
                </div>
                <div class="ons-header__links ons-grid__col ons-col-auto">
                  <div class="ons-grid__col ons-col-auto ">
                    <ul class="ons-language-links">
                      <li class="ons-language-links__item">
                        <a href="#0" lang="cy">Cymraeg</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
                  <a class="ons-header__title-link" href="#0">
                    <svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
                      <title id="census-logo-en-alt">Census 2021</title>
                      <path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
                      <path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
                      <path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
                      <path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
                      <path d="M81.1,27.36Z" />
                      <path d="M129.43,27.34h0Z" />
                      <path d="M129.42,27.33Z" />
                      <path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
                      <path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
                      <path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
                      <path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
                      <path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
                      <path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
                    </svg>
                  </a>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                  <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
                    <span class="ons-btn__inner">Menu
                      <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                        <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-navigation-wrapper">
            <div class="ons-container ons-container--gutterless@xxs@l">
              <nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                <ul class="ons-navigation__list">
                  <li class="ons-navigation__item  ons-navigation__item--active">
                    <a class="ons-navigation__link" href="#home">Home</a>
                  </li>
                  <li class="ons-navigation__item ">
                    <a class="ons-navigation__link" href="#0">About the census</a>
                  </li>
                  <li class="ons-navigation__item ">
                    <a class="ons-navigation__link" href="#0">Help with your census</a>
                  </li>
                  <li class="ons-navigation__item ">
                    <a class="ons-navigation__link" href="#0">Contact us</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "layout/_template.njk" %}

{% set pageConfig = {
    "title": 'Census 2021',
    "theme": 'census',
    "absoluteUrl": pageInfo.url,
    "headMeta": {
        "description": 'Census 2021 is a UK wide population survey',
        "hrefLangs": [
            {
                "url": '#0',
                "lang": 'en'
            },
            {
                "url": '#0',
                "lang": 'cy'
            }
        ]
    },
    "header": {
        "logoHref": '#0',
        "titleLogo": 'census-logo-en',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "titleLogoAlt": 'Census 2021'
    },
    "language": {
        "allLanguagesUrl": '#0',
        "languages": [
            {
                "url": '#0',
                "ISOCode": 'en',
                "text": 'English',
                "buttonAriaLabel": 'Language selector. Current language: English',
                "chooseLanguage": 'Choose language',
                "allLanguages": 'All languages',
                "current": true
            },
            {
                "url": '#0',
                "ISOCode": 'cy',
                "text": 'Cymraeg',
                "buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
                "chooseLanguage": 'Dewiswch iaith',
                "allLanguages": 'Pob iaith',
                "current": false
            }
        ]
    },
    "navigation": {
        "id": 'main-nav',
        "ariaLabel": 'Main menu',
        "currentPath": '#home',
        "itemsList": [
            {
                "title": 'Home',
                "url": '#home'
            },
            {
                "title": 'About the census',
                "url": '#0'
            },
            {
                "title": 'Help with your census',
                "url": '#0'
            },
            {
                "title": 'Contact us',
                "url": '#0'
            }
        ],
        "toggleNavigationButton": {
            "text": 'Menu',
            "ariaLabel": 'Toggle main menu'
        }
    }
} %}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

Census Welsh

Open this example in a new tab  
<!doctype html>
<html lang="cy">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/census.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#902082" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/census/cy/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/census/cy/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/census/cy/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/census/cy/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/census/cy/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/census/cy/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/census/cy/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
                        <title id="ons-logo-cy-alt">Office for National Statistics logo</title>
                        <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                          <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                          <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                          <path d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
                          <path d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
                          <path d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
                          <path d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
                          <path d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
                          <path d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
                          <path d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
                          <path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
                          <path d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
                          <path d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
                          <path d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
                          <path d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
                          <path d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
                          <path d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
                          <path d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
                          <path d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
                          <path d="M554.49,48.41V11.58h5.4V48.41Z" />
                          <path d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
                          <path d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
                          <path d="M643.63,48.41V11.58H649V48.41Z" />
                        </g>
                      </svg>
                    </a></div>
                  <div class="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
                        <title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
                        <g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
                          <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
                          <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
                          <path d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
                          <path d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
                          <path d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
                          <path d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
                          <path d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
                          <path d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
                          <path d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
                          <polygon points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
                          <path d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
                          <path d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
                          <path d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
                          <path d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
                          <path d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
                          <path d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
                          <path d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
                          <path d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
                          <path d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
                          <path d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
                          <polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
                          <path d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
                          <path d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
                          <path d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
                          <polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
                        </g>
                      </svg>
                    </a>
                  </div>
                </div>
                <div class="ons-header__links ons-grid__col ons-col-auto">
                  <div class="ons-grid__col ons-col-auto ">
                    <ul class="ons-language-links">
                      <li class="ons-language-links__item">
                        <a href="#0" lang="en">English</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <a class="ons-header__title-link" href="#0">
                    <svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="242" height="44" viewBox="0 0 242 44" role="img" aria-labelledby="census-logo-cy-alt">
                      <title id="census-logo-cy-alt">Cyfrifiad 2021</title>
                      <path style="opacity:0.7" d="M623.06,494.45H611.47a4.82,4.82,0,0,1,.14-1c.61-2.44,3.08-3.71,6.08-5.05,3.46-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.6,9.6,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.2,0,1.73-.53,1.73-1.48v-.21C624.79,495,624.26,494.45,623.06,494.45Z" transform="translate(-401.34 -464)" />
                      <path style="opacity:0.7" d="M595.5,474.24c-5.86,0-9.5,4.14-9.5,10.74v2.34c0,6.6,3.57,10.7,9.5,10.7s9.54-4.17,9.54-10.78V485C605,478.34,601.44,474.24,595.5,474.24Zm5.9,13.18c0,4.81-2.12,7.53-5.9,7.53s-5.83-2.76-5.83-7.56v-2.58c0-4.81,2.12-7.56,5.83-7.56s5.9,2.82,5.9,7.63Z" transform="translate(-401.34 -464)" />
                      <path style="opacity:0.7" d="M641.29,494.49h-3.07l0-18.3a1.49,1.49,0,0,0-1.63-1.67h-1.24L628.57,479a2,2,0,0,0,1.88,2.23,2.88,2.88,0,0,0,1.87-.78c.67-.53,1.24-1.17,2.61-2.26v16.29h-3.81c-1.1,0-1.66.46-1.66,1.48v.18c0,1,.56,1.41,1.66,1.41h10.17c1.1,0,1.67-.42,1.67-1.41V496C643,495,642.39,494.49,641.29,494.49Z" transform="translate(-401.34 -464)" />
                      <path style="opacity:0.7" d="M581.72,494.45H570.13a4.26,4.26,0,0,1,.15-1c.6-2.44,3.07-3.71,6.07-5.05,3.47-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.62,9.62,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.21,0,1.74-.53,1.74-1.48v-.21C583.46,495,582.93,494.45,581.72,494.45Z" transform="translate(-401.34 -464)" />
                      <path d="M556.37,464.19a2.7,2.7,0,0,0-2.7,2.69V475a11.56,11.56,0,0,0-4-.71,11.86,11.86,0,1,0,8.67,19.92,2.63,2.63,0,0,0,.72-1.72,1.41,1.41,0,0,0,0-.2V466.88A2.7,2.7,0,0,0,556.37,464.19Zm-2.7,19.11v7.92a6.38,6.38,0,0,1-4,1.41,6.47,6.47,0,1,1,0-12.94,6.36,6.36,0,0,1,4,1.41Z" transform="translate(-401.34 -464)" />
                      <path d="M413.19,479.61a6.41,6.41,0,0,1,4.73,2.07,2.69,2.69,0,0,0,3.94-3.67,11.86,11.86,0,1,0,0,16.14,2.69,2.69,0,0,0-3.94-3.67,6.38,6.38,0,0,1-4.73,2.07,6.47,6.47,0,1,1,0-12.94Z" transform="translate(-401.34 -464)" />
                      <path d="M481.59,474.26A2.69,2.69,0,0,0,478.9,477v18.21a2.69,2.69,0,1,0,5.38,0V477A2.7,2.7,0,0,0,481.59,474.26Z" transform="translate(-401.34 -464)" />
                      <path d="M460.12,464.11a11.89,11.89,0,0,0-8.52,11.38V495a2.7,2.7,0,0,0,5.39,0V481.65h2a2.7,2.7,0,0,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.59-6.19l.07,0a2.69,2.69,0,0,0-1.53-5.16Z" transform="translate(-401.34 -464)" />
                      <path d="M531.5,474.26a2.67,2.67,0,0,0-2.13,1.05,11.86,11.86,0,1,0,0,21.45,2.7,2.7,0,0,0,4.86-1.6V477A2.7,2.7,0,0,0,531.5,474.26Zm-2.69,7.33v9.08a6.39,6.39,0,0,1-4.49,1.83,6.47,6.47,0,0,1,0-12.94,6.37,6.37,0,0,1,4.49,1.83Z" transform="translate(-401.34 -464)" />
                      <path d="M481.61,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,481.61,465.84Z" transform="translate(-401.34 -464)" />
                      <path d="M506.65,474.26A2.7,2.7,0,0,0,504,477v18.21a2.7,2.7,0,1,0,5.39,0V477A2.7,2.7,0,0,0,506.65,474.26Z" transform="translate(-401.34 -464)" />
                      <path d="M506.67,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,506.67,465.84Z" transform="translate(-401.34 -464)" />
                      <path d="M472.08,474.71a11.87,11.87,0,0,0-8.51,11.37v9a2.69,2.69,0,0,0,5.38,0v-9a6.49,6.49,0,0,1,4.6-6.19l.07,0a2.69,2.69,0,0,0-1.54-5.15Z" transform="translate(-401.34 -464)" />
                      <path d="M447.3,477a2.7,2.7,0,0,0-5.39,0v9c0,3.56-2,6.47-5.56,6.47s-5.56-2.91-5.56-6.47v-9a2.7,2.7,0,0,0-5.39,0v9c0,6.53,4.41,11.85,11,11.85a10.66,10.66,0,0,0,5.57-1.51v.16a6.48,6.48,0,0,1-4.6,6.19l-.06,0h0c-1.43.43-.9,1.93-.47,3.36a2.67,2.67,0,0,0,3.34,1.79c4.92-1.44,7.17-6,7.17-11.37V477Z" transform="translate(-401.34 -464)" />
                      <path d="M497.71,464.12a11.86,11.86,0,0,0-8.51,11.37V495a2.69,2.69,0,0,0,5.38,0V481.65h2a2.7,2.7,0,1,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.6-6.19l.07,0a2.7,2.7,0,0,0,1.8-3.36A2.67,2.67,0,0,0,497.71,464.12Z" transform="translate(-401.34 -464)" />
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "layout/_template.njk" %}

{% set pageConfig = {
    "theme": 'census',
    "header": {
        "logoHref": '#0',
        "titleLogo": 'census-logo-cy',
        "mobileLogo": 'ons-logo-stacked-cy',
        "titleLogoAlt": 'Cyfrifiad 2021',
        "titleLogoHref": '#0'
    },
    "language": {
        "allLanguagesUrl": '#0',
        "languages": [
            {
                "url": '#0',
                "ISOCode": 'en',
                "text": 'English',
                "buttonAriaLabel": 'Language selector. Current language: English',
                "chooseLanguage": 'Choose language',
                "allLanguages": 'All languages',
                "current": false
            },
            {
                "url": '#0',
                "ISOCode": 'cy',
                "text": 'Cymraeg',
                "buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
                "chooseLanguage": 'Dewiswch iaith',
                "allLanguages": 'Pob iaith',
                "current": true
            }
        ]
    }
} %}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

Census NISRA

Open this example in a new tab  
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/census.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#902082" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/census/en/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-header__grid-top-tall">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo ons-svg-logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54">
                        <title id="nisra-logo-alt">Northern Ireland Statistics and Research Agency logo</title>
                        <g class="ons-svg-logo__group" fill="#3d7cc9">
                          <path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" />
                        </g>
                        <g class="ons-svg-logo__group" fill="#cddb00">
                          <path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" />
                        </g>
                        <g class="ons-svg-logo__group" fill="#00205c">
                          <path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#00205c">
                          <path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1 c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2 c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4 c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
            h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
            c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
            c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
            c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
            c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
            c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
            c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
            c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
            c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
            c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
            c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
            M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
            c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
            c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
            C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
            C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
            c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
            c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
            c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
            c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
            c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
            M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
            M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
            c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
            c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
            c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
            c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
            v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
            h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
            l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
            c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
            c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
            c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
            c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
            v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
            c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
            c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
            c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
            c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
            c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
            H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
            c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
            c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
            c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
            c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
            l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
            C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
            C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
            c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
            c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
            c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
            c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
            c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
            l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
            c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
            c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
            c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
            c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
            M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
            V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
            c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
            c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
            c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
            C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
            c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
            c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
            C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
            C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
            c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
            c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
            c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
            l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
            c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
            l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
            c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
            C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
            c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
            c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" />
                        </g>
                      </svg>
                    </a></div>
                  <div class="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo ons-svg-logo-tall" xmlns="http://www.w3.org/2000/svg" width="107" height="35" viewBox="0 0 170 54">
                        <title id="nisra-logo-alt">Northern Ireland Statistics and Research Agency logo</title>
                        <g class="ons-svg-logo__group" fill="#3d7cc9">
                          <path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" />
                        </g>
                        <g class="ons-svg-logo__group" fill="#cddb00">
                          <path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" />
                        </g>
                        <g class="ons-svg-logo__group" fill="#00205c">
                          <path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#00205c">
                          <path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1
                    c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2
                    c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4
                    c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2
                    z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z
                    M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
                    h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
                    c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
                    c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
                    c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
                    c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
                    c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
                    c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
                    c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
                    c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
                    c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
                    c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
                    M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
                    c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
                    c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
                    C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
                    C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
                    c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
                    c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
                    c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
                    c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
                    c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
                    M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
                    M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
                    c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
                    c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
                    c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
                    c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
                    v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
                    h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
                    l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
                    c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
                    c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
                    c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
                    c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
                    v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
                    c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
                    c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
                    c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
                    c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
                    c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
                    H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
                    c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
                    c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
                    c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
                    c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
                    l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
                    C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
                    C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
                    c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
                    c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
                    c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
                    c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
                    c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
                    l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
                    c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
                    c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
                    c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
                    c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
                    M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
                    V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
                    c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
                    c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
                    c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
                    C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
                    c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
                    c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
                    C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
                    C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
                    c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
                    c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
                    c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
                    l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
                    c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
                    l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
                    c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
                    C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
                    c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
                    c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" />
                        </g>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
                  <a class="ons-header__title-link" href="#0">
                    <svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
                      <title id="census-logo-en-alt">Census 2021</title>
                      <path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
                      <path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
                      <path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
                      <path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
                      <path d="M81.1,27.36Z" />
                      <path d="M129.43,27.34h0Z" />
                      <path d="M129.42,27.33Z" />
                      <path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
                      <path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
                      <path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
                      <path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
                      <path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
                      <path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
                    </svg>
                  </a>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                  <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
                    <span class="ons-btn__inner">Menu
                      <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                        <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-navigation-wrapper">
            <div class="ons-container ons-container--gutterless@xxs@l">
              <nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                <ul class="ons-navigation__list">
                  <li class="ons-navigation__item  ons-navigation__item--active">
                    <a class="ons-navigation__link" href="#home">Home</a>
                  </li>
                  <li class="ons-navigation__item ">
                    <a class="ons-navigation__link" href="#0">About the census</a>
                  </li>
                  <li class="ons-navigation__item ">
                    <a class="ons-navigation__link" href="#0">Help with your census</a>
                  </li>
                  <li class="ons-navigation__item ">
                    <a class="ons-navigation__link" href="#0">Contact us</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "layout/_template.njk" %}

{% set pageConfig = {
    "theme": 'census',
    "header": {
        "logo": "nisra-logo-en",
        "mobileLogo": "nisra-logo-en-mobile",
        "logoAlt": "Northern Ireland Statistics and Research Agency logo",
        "logoHref": "#0",
        "customHeaderLogo": true,
        "titleLogo": "census-logo-en",
        "titleLogoAlt": "Census 2021",
        "titleLogoHref": '#0'
    },
    "navigation": {
        "id": 'main-nav',
        "ariaLabel": 'Main menu',
        "currentPath": '#home',
        "itemsList": [
            {
                "title": 'Home',
                "url": '#home'
            },
            {
                "title": 'About the census',
                "url": '#0'
            },
            {
                "title": 'Help with your census',
                "url": '#0'
            },
            {
                "title": 'Contact us',
                "url": '#0'
            }
        ],
        "toggleNavigationButton": {
            "text": 'Menu',
            "ariaLabel": 'Toggle main menu'
        }
    }
} %}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

Northern Ireland Department of Finance

Open this example in a new tab  
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-header__grid-top-tall">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large"><a class="ons-header__logo-link" href="https://www.finance-ni.gov.uk/">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="296" height="56" viewBox="0 0 592 112" aria-labelledby="ni-finance-logo-alt">
                        <title id="ni-finance-logo-alt">Northern Ireland Department of Finance logo</title>
                        <g class="ons-svg-logo__group" fill="#001f5b">
                          <path d="M148.45 28.94H116.8v1.86h5.42v40.32h-5.42V73h18.38v-1.77h-5.42V51.76h1.78c5.76 0 6.72 1 7.18 8.38v.34h1.44V41.89h-1.44v.24c-.16 5.49-1 7-4.14 7.61a42.89 42.89 0 0 1-4.8.26V31h3.72a40.34 40.34 0 0 1 6.95.18 7.33 7.33 0 0 1 4.05 2.36c1.6 1.78 2.36 3.64 3.29 8v.26h1.43Z" />
                          <path d="M159.95 46.86h-10.89v1.96h4.38v22.51h-4.38v1.85h15.23v-1.85h-4.34V46.86zM156.58 37.81a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.93-4.06h-.13a3.81 3.81 0 0 0-3.9 3.74v.08a1.71 1.71 0 0 0 0 .32 3.82 3.82 0 0 0 3.67 4ZM192.64 57.1c0-5-.35-6.52-1.95-8.2a10.63 10.63 0 0 0-14.9.92V47H165v1.9h4.48v22.4H165v1.85h14.8v-1.82h-3.9v-7.55c0-7.78.33-10.74 1.6-12.5a5.68 5.68 0 0 1 4.48-2.46 4 4 0 0 1 3.02 1.34c1 1.26 1.27 3.47 1.27 11.33v9.84h-4.07v1.85h14.9v-1.85h-4.48ZM223.15 70.4c-1.18 1-1.28 1-1.68 1-1.12 0-1.18 0-1.18-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.09h.1a3 3 0 0 0 3.06-2.83v-.27a3.1 3.1 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.36-2.46 4.65-2.46a4.37 4.37 0 0 1 3.3 1.18c.67.77.85 1.28.85 5.09v4.25c-10 .24-15.48 3.38-15.48 9 0 3.91 2.87 6.52 7.28 6.52a10.15 10.15 0 0 0 8.36-4.48 5.26 5.26 0 0 0 5.6 4.46 6.9 6.9 0 0 0 4.8-2l.16-.19-1.17-1.43Zm-9.29-10.24v1a15.47 15.47 0 0 1-.85 6.4 5.13 5.13 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.73-3.23v-.07a3.31 3.31 0 0 1 0-.77c0-4 2.78-6 9.06-6.29ZM252.91 57.1c0-5-.33-6.52-1.93-8.2a10.52 10.52 0 0 0-14.84.92V47h-10.91v1.9h4.48v22.4h-4.48v1.85H240v-1.82h-3.94v-7.55c0-7.78.34-10.74 1.6-12.5a5.65 5.65 0 0 1 4.48-2.46 3.94 3.94 0 0 1 3 1.34c1 1.26 1.28 3.47 1.28 11.33v9.84h-4v1.85h14.8v-1.85H253ZM280 64.53c-1.6 4.8-4.48 7.28-8.46 7.28a5.5 5.5 0 0 1-4.32-1.76c-1-1.28-1.35-3.2-1.35-8 0-11.76 1.76-13.62 6.08-13.62 2.11 0 4.24 1 4.24 1.7l-.17.25a5.61 5.61 0 0 0-1.35 3.2A3.21 3.21 0 0 0 277.6 57h.27a3.37 3.37 0 0 0 3.41-3.34 1.7 1.7 0 0 0 0-.45c0-3.65-4.48-6.94-9.3-6.94a13.8 13.8 0 0 0-13.61 14 13.57 13.57 0 0 0 12.8 13.62c5.25 0 8.72-2.87 11.2-9.14l.16-.43h-2.24ZM305.2 64.19c-1.18 4.8-4.48 7.54-8.45 7.54a5.45 5.45 0 0 1-5-2.69c-.77-1.38-.85-2.62-.85-9.07v-1.73h17v-.34c-.51-7.1-5.07-11.66-11.76-11.66s-12.6 6.5-12.6 13.86 6.09 13.82 12.8 13.82a11.21 11.21 0 0 0 11.2-9.6V64h-2.24Zm-14.4-7.85v-1.19c0-4.91 1.38-6.72 5.09-6.72a3.79 3.79 0 0 1 4 2.37 13.51 13.51 0 0 1 .51 5.58ZM47.95 84l-12-6.94V63.01l12-7.01 12.02 7.01v14.05L47.95 84zM47.95 112l-12-6.94V91.01l12-7.01 12.02 7.01v14.05L47.95 112zM24.02 42.05 12 35.01V20.99l12.02-6.94 11.93 6.94v14.02l-11.93 7.04zM24.02 70.05 12 63.01V49.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04z" />
                          <path d="M24.02 98.05 12 91.01V77.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04zM0 56V28l12 7.01v14.05L0 56zM0 84V56l12 7.01v14.05L0 84z" />
                        </g>
                        <g class="ons-svg-logo__group" fill="#8b9064">
                          <path d="m47.95 28-12-7.01V7.01l12-7.01 12.02 7.01v13.98L47.95 28zM47.95 56l-12-6.94V35.01l12-7.01 12.02 7.01v14.05L47.95 56zM72 42.05l-12.03-7.04V20.99L72 14.05l12 6.94v14.02l-12 7.04z" />
                          <path d="m72 70.05-12.03-7.04V49.06L72 42.05l12 7.01v13.95l-12 7.04zM72 98.05l-12.03-7.04V77.06L72 70.05l12 7.01v13.95l-12 7.04zM96 56l-12-6.94V35.01L96 28v28zM96 84l-12-6.94V63.01L96 56v28z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#001f5b">
                          <path d="M126.11 1.6H121v15.06h5.66a5.48 5.48 0 0 0 4.48-2.24 8.14 8.14 0 0 0 1.7-5.33A8.21 8.21 0 0 0 131 3.81a5.93 5.93 0 0 0-4.89-2.21Zm-2.91 1.78h3a4.2 4.2 0 0 1 3.63 1.71A7 7 0 0 1 130.86 9a7.33 7.33 0 0 1-1.18 4.32 4.25 4.25 0 0 1-3.57 1.6h-2.91ZM144.24 11.2a6.7 6.7 0 0 0-1.38-4.48 4.55 4.55 0 0 0-3.53-1.6 5.31 5.31 0 0 0-3.75 1.6 6 6 0 0 0-1.42 4.48 6.4 6.4 0 0 0 1.42 4.24 4.73 4.73 0 0 0 3.75 1.6 5.25 5.25 0 0 0 3-.91 4.42 4.42 0 0 0 1.67-2.37l-1.76-.34a3 3 0 0 1-2.9 2.12 3.4 3.4 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-8-1.34a3.76 3.76 0 0 1 .91-2.24 2.94 2.94 0 0 1 2.24-1 2.77 2.77 0 0 1 1.6.51 3.17 3.17 0 0 1 .95 1.2 8.74 8.74 0 0 1 .33 1.6ZM151.33 5.15A3.75 3.75 0 0 0 148 7.39v-1.9h-1.69v14.89h1.85v-5.15a3.62 3.62 0 0 0 3.2 1.78 3.87 3.87 0 0 0 3.2-1.6 6.64 6.64 0 0 0 1.3-4.21 7 7 0 0 0-1.25-4.26 3.91 3.91 0 0 0-3.28-1.79Zm-.33 1.7A2.25 2.25 0 0 1 153 8a5.44 5.44 0 0 1 .77 3.2 4.84 4.84 0 0 1-.84 3.3 2.48 2.48 0 0 1-3.48.41 2 2 0 0 1-.26-.24 3.1 3.1 0 0 1-1-2V9.44a4.08 4.08 0 0 1 1-1.87 2.9 2.9 0 0 1 1.81-.72ZM166.4 14.4V9.81a5 5 0 0 0-1-3.55 4.42 4.42 0 0 0-3.31-1c-2.86 0-4.48 1-4.91 3.2l1.79.33c.26-1.28 1.26-1.95 3-1.95a3.42 3.42 0 0 1 1.6.34 2 2 0 0 1 .85.85 7.5 7.5 0 0 1 .19 1.77h-1.41a8.16 8.16 0 0 0-4.9 1.09 3.56 3.56 0 0 0-1.44 2.8 3.4 3.4 0 0 0 1 2.46 4 4 0 0 0 2.9 1 3.92 3.92 0 0 0 3.81-2.24 4.9 4.9 0 0 0 .14 1.71h1.87a10.3 10.3 0 0 1-.18-2.22Zm-5.23 1a2.43 2.43 0 0 1-1.71-.51 1.59 1.59 0 0 1-.58-1.35 1.91 1.91 0 0 1 1.12-1.78 6.33 6.33 0 0 1 3.2-.67 10.68 10.68 0 0 1 1.6 0v.69a3.75 3.75 0 0 1-1.28 2.62 3 3 0 0 1-2.37 1.07ZM174.16 5.15a2.73 2.73 0 0 0-1.6.61 4.49 4.49 0 0 0-1.44 2V5.54h-1.7v11.2h1.78v-6a4 4 0 0 1 1-2.75 2.85 2.85 0 0 1 2.24-1h.4V5.25a2 2 0 0 0-.68-.1ZM180.8 15.47c-1.1 0-1.71-.51-1.71-1.6V7h2.46V5.41h-2.35V2.53l-1.78.17v2.79h-1.93v1.6h1.93v6.4a3 3 0 0 0 2.44 3.37 2.48 2.48 0 0 0 .86 0 10.68 10.68 0 0 0 1.6 0v-1.48a12.79 12.79 0 0 1-1.52.09ZM197.12 5.84a3.62 3.62 0 0 0-2-.69 3.76 3.76 0 0 0-3.47 2.47 3.34 3.34 0 0 0-1-1.7 3.21 3.21 0 0 0-2.24-.77 3.79 3.79 0 0 0-3.3 2.24v-1.9h-1.39v11.2h1.79V10a3.21 3.21 0 0 1 .77-2.24 2.19 2.19 0 0 1 3-.66 1.64 1.64 0 0 1 .33.26 2.55 2.55 0 0 1 .67 1.92v7.42h1.86v-6.28a4.06 4.06 0 0 1 .86-2.71 2.48 2.48 0 0 1 1.85-.86 2 2 0 0 1 1.19.43 1.75 1.75 0 0 1 .67.91 6.67 6.67 0 0 1 .19 1.6v7h1.86v-7a9.87 9.87 0 0 0-.26-2.24 4.2 4.2 0 0 0-1.38-1.71ZM210.56 11.2a6.77 6.77 0 0 0-1.34-4.48 4.49 4.49 0 0 0-3.57-1.6 5.2 5.2 0 0 0-3.71 1.6 6 6 0 0 0-1.36 4.48 6.28 6.28 0 0 0 1.42 4.24 4.66 4.66 0 0 0 3.73 1.6 5.25 5.25 0 0 0 3-.91 4.45 4.45 0 0 0 1.79-2.42l-1.79-.33a2.92 2.92 0 0 1-2.87 2.11 3.35 3.35 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-7.86-1.34a3.71 3.71 0 0 1 .92-2.24 2.84 2.84 0 0 1 3.74-.44 3 3 0 0 1 .91 1.2 5.94 5.94 0 0 1 .34 1.6ZM220 5.84a3.75 3.75 0 0 0-2.12-.69 3.87 3.87 0 0 0-3.37 2.24V5.6h-1.71v11.2h1.86v-6.22a4 4 0 0 1 .83-2.72 2.71 2.71 0 0 1 2.11-1 2.07 2.07 0 0 1 1.6.59 2.81 2.81 0 0 1 .61 2.16v7.18h1.77v-6.4a7.22 7.22 0 0 0-.33-2.88A2.72 2.72 0 0 0 220 5.84ZM228.24 15.47c-1.1 0-1.71-.51-1.71-1.6V7H229V5.41h-2.46V2.53l-1.76.17v2.79h-2v1.6h2v6.4a2.93 2.93 0 0 0 2.43 3.33 3.1 3.1 0 0 0 .86 0 14.23 14.23 0 0 0 1.6 0v-1.49a9.62 9.62 0 0 1-1.43.14ZM240.48 5.15a4.69 4.69 0 0 0-3.62 1.6 6.2 6.2 0 0 0-1.44 4.25 7.06 7.06 0 0 0 1.25 4.24 4.56 4.56 0 0 0 3.67 1.68 4.74 4.74 0 0 0 3.82-1.68A6.62 6.62 0 0 0 245.6 11a6.34 6.34 0 0 0-1.34-4.15 4.55 4.55 0 0 0-3.78-1.7Zm0 10.24a2.67 2.67 0 0 1-2.08-1 5.13 5.13 0 0 1-.94-3.39 5 5 0 0 1 .84-3.2 2.73 2.73 0 0 1 2.12-1 2.85 2.85 0 0 1 2.24 1 5.1 5.1 0 0 1 .8 3.42 5 5 0 0 1-.84 3.3 2.88 2.88 0 0 1-2.2.89ZM252.8 1.44a10.71 10.71 0 0 0-1.6-.16 4 4 0 0 0-2.46.75c-.68.5-1 1.6-1 3.39h-1.86V7h1.86v9.6h1.87V7h2.61V5.42h-2.62v-.27a2.23 2.23 0 0 1 .51-1.77 2.13 2.13 0 0 1 1.6-.52 4.63 4.63 0 0 1 1 .18v-1.6ZM353.09 2h-2.24l-4.8 15h1.79l1.34-4.32h5.43l1.6 4.4h2.11L353.17 2Zm.83 9.2h-4.48l2.24-6.72ZM366.62 6.22a3.66 3.66 0 0 0-2.12-.68 3.91 3.91 0 0 0-3.4 2.12V5.87h-1.85v11.2h1.85V11a4.11 4.11 0 0 1 .9-2.76 2.74 2.74 0 0 1 2.13-1 2.11 2.11 0 0 1 1.52.59 3 3 0 0 1 .67 2.24v7.08H368v-6.53a7.22 7.22 0 0 0-.34-2.88 2.73 2.73 0 0 0-1.04-1.52ZM386.5 8.58a4.71 4.71 0 0 0 .7-2.18 4.33 4.33 0 0 0-1.2-2.86 4.81 4.81 0 0 0-3.62-1.41h-5.92v15h1.95v-6.51h4.15l2.75 6.4h2.11l-3-6.94a3.37 3.37 0 0 0 2.08-1.5Zm-8.12-4.72h4a3 3 0 0 1 2 .67 2.24 2.24 0 0 1 .77 1.76 2.68 2.68 0 0 1-.77 2 3 3 0 0 1-2.24.77h-3.84ZM393.6 5.62a4.8 4.8 0 0 0-3.6 1.6 6.45 6.45 0 0 0-1.44 4.24 6.87 6.87 0 0 0 1.33 4.2 4.31 4.31 0 0 0 3.63 1.6 4.61 4.61 0 0 0 3.67-1.6 6.39 6.39 0 0 0 1.45-4.24 6 6 0 0 0-1.36-4.14 4.3 4.3 0 0 0-3.68-1.66Zm0 10.16a2.68 2.68 0 0 1-2.1-1 5 5 0 0 1-.86-3.39 4.9 4.9 0 0 1 .86-3.2 2.6 2.6 0 0 1 2.1-1 2.71 2.71 0 0 1 2.11 1 4.93 4.93 0 0 1 .85 3.31 4.78 4.78 0 0 1-.85 3.3 2.83 2.83 0 0 1-2.19.91ZM400.53 5.87h1.86v11.15h-1.86zM400.46 2h2.03v2.11h-2.03zM412.62 6.22a3.55 3.55 0 0 0-2.09-.68 3.85 3.85 0 0 0-3.39 2.12V5.87h-1.7v11.2h1.89V11a4 4 0 0 1 .81-2.72 2.77 2.77 0 0 1 2.24-1 2.13 2.13 0 0 1 1.6.59 2.91 2.91 0 0 1 .68 2.24v7.08h1.74v-6.57a8.05 8.05 0 0 0-.34-2.88 2.66 2.66 0 0 0-1.44-1.52ZM425.6 7.74a3.58 3.58 0 0 0-3.3-2.12 3.78 3.78 0 0 0-3.37 2.24v-1.8h-1.79v11.2h1.74V11a4.05 4.05 0 0 1 .85-2.7 2.69 2.69 0 0 1 2.24-1 2 2 0 0 1 1.52.57 2.83 2.83 0 0 1 .67 2.24v7.09h1.78v-6.58a8.05 8.05 0 0 0-.34-2.88ZM387.2 38.29a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.88-4.05h-.1a4 4 0 0 0 0 8ZM390.56 47.25h-10.93v1.85h4.48v22.58h-8.37L361.6 29.23h-2.24l-14.91 42.45h-3.2v1.92h11.2v-1.92h-5.59l4.05-12.19h12.8l4 12.19h-5.57v1.92H395v-1.92h-4.48ZM362.88 57.6h-11.2l5.73-16.94ZM413.49 46.66c-2.88 0-5.09 1.85-6.87 5.66v-5.07h-10.91v1.85h4.48v22.58h-4.48v1.92h15.23v-1.92h-4.32v-5.82c0-7.62.68-11.2 2.53-14.56.61-1 1.28-1.6 1.6-1.6s.26 0 .35.68c.16 2.53 1.17 3.81 3.2 3.81a3.45 3.45 0 0 0 3.57-3.33v-.32a4 4 0 0 0-4.05-4ZM440.21 49.6s.27 0 .41.85a2.24 2.24 0 0 0 2.23 2.25h.24a2.68 2.68 0 0 0 2.69-2.65v-.27a3.2 3.2 0 0 0-3.2-3.2h-.32a6.38 6.38 0 0 0-4.48 2.52 11.25 11.25 0 0 0-7.38-2.52c-6.1 0-10.66 4-10.66 9.6a9 9 0 0 0 3.88 7.36c-3.72 2.54-5.59 5.23-5.59 8.2a5.94 5.94 0 0 0 4.37 5.7 6.28 6.28 0 0 0-4.48 5.84c0 4.48 5.49 8.11 12.24 8.11 8 0 14-5.25 14-12.43 0-5.33-2.24-7.34-8-7.34l-10.92.16c-3.2 0-3.81-.77-3.81-2.12s1.45-3.29 4.16-5a10.42 10.42 0 0 0 5 1c6.1 0 10.76-3.87 10.76-9.12a10.13 10.13 0 0 0-2-6c.36-.83.52-.94.86-.94Zm-9.81 14c-3 0-3.81-1.28-3.81-5.84 0-8.55.59-9.22 4-9.22 3 0 3.81.59 3.81 6.4 0 4.8-.18 6.18-.67 7.09a3.77 3.77 0 0 1-3.33 1.54Zm-.24 25.6c-4.66 0-7.78-2.63-7.78-6.59a6.75 6.75 0 0 1 2-4.8h.27a21.91 21.91 0 0 0 3.71.17h3.4a18.58 18.58 0 0 0 2.36 0H438c2.87 0 3.39.83 3.39 2.45-.06 4.83-5 8.8-11.26 8.8Z" />
                          <path d="M469.73 58.58v-.34c-.5-7.1-5.06-11.66-11.76-11.66s-12.59 6.51-12.59 13.85 6.09 13.81 12.8 13.81a11.21 11.21 0 0 0 11.2-9.6v-.34h-2.24v.24c-1.19 4.8-4.48 7.54-8.45 7.54a5.43 5.43 0 0 1-5-2.69c-.76-1.37-.85-2.65-.85-9v-1.6h16.91Zm-11.92-9.91a3.76 3.76 0 0 1 4 2.39 12.92 12.92 0 0 1 .51 5.56h-9.6v-1.18c0-4.91 1.37-6.77 5.09-6.77ZM496.48 70.77c-1.2 1-1.28 1-1.71 1-1.09 0-1.19 0-1.19-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.68 0-10.57 3.2-10.57 6.94a3 3 0 0 0 2.93 3.1h.09a2.92 2.92 0 0 0 3-2.81.71.71 0 0 0 0-.29 3.18 3.18 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.37-2.46 4.64-2.46a4.37 4.37 0 0 1 3.32 1.18c.67.77.84 1.28.84 5.09v4.23c-10 .25-15.5 3.39-15.5 9 0 3.9 2.9 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.23 5.23 0 0 0 5.57 4.48 6.87 6.87 0 0 0 4.8-2l.16-.18-1.2-1.42Zm-9.39-10.29v1a15.15 15.15 0 0 1-.85 6.4 5.16 5.16 0 0 1-4.48 2.94 3.5 3.5 0 0 1-3.76-3.2 3 3 0 0 1 0-.73c0-4.17 2.82-6.09 9.09-6.41ZM524.16 29.33h-10.91v1.85h4.48v20.16a8.42 8.42 0 0 0-7.52-4.48c-6 0-11.2 6.24-11.2 13.68s5.17 14 11.42 14a8.32 8.32 0 0 0 7.28-4.48v4h10.82v-1.92h-4.37Zm-13.44 42.86a4 4 0 0 1-3.47-2.19c-.67-1.34-.85-2.7-.85-8.62 0-6.72.27-9.23.94-10.58a4.18 4.18 0 0 1 3.28-2c3.91 0 6.72 4.91 6.72 11.76s-2.76 11.63-6.62 11.63ZM554.5 70.77c-1.2 1-1.27 1-1.68 1-1.11 0-1.2 0-1.2-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.1h.09a2.94 2.94 0 0 0 3.1-2.77v-.33a3.18 3.18 0 0 0-1-2.24c-.27-.34-.27-.34-.27-.5 0-1 2.38-2.46 4.66-2.46a4.39 4.39 0 0 1 3.29 1.18c.71.77.85 1.28.85 5.09v4.23c-10 .25-15.47 3.39-15.47 9 0 3.9 2.86 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.21 5.21 0 0 0 5.57 4.48 6.69 6.69 0 0 0 4.8-2l.18-.18-1.19-1.42Zm-9.4-10.29v1a15 15 0 0 1-.84 6.4 5.12 5.12 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.75-3.2 5 5 0 0 1 0-.77c-.03-4.13 2.82-6.05 9.07-6.37ZM564.05 38.29a4.12 4.12 0 0 0 4-4 4 4 0 0 0-4-4.05H564a3.8 3.8 0 0 0-4 3.61 1.48 1.48 0 0 0 0 .42 4 4 0 0 0 3.94 4ZM567.44 47.25h-10.82v1.93h4.29V71.7h-4.29v1.93h15.14V71.7h-4.32V47.25zM582.58 56.38c-5.24-.94-6.18-1.71-6.18-3.47a4.88 4.88 0 0 1 5.42-4.24 7.12 7.12 0 0 1 7.09 6.27v.26h1.6l-.25-8.29h-1.46l-.94 2a9.64 9.64 0 0 0-6.16-2.24 8 8 0 0 0-8.23 7.77V55c0 5.23 2.37 7.44 9.14 8.62 5 .76 5.92 2 5.92 3.88a5.15 5.15 0 0 1-5.48 4.8h-.19c-4.14 0-6.52-2.53-8.11-8.72v-.24h-1.44l.16 10.38h1.19l1.44-1.94a9.79 9.79 0 0 0 6.84 2.61 8.72 8.72 0 0 0 8.71-8.73V65c-.02-5-2.53-7.53-9.07-8.62ZM323.46 0h2.24v90.67h-2.24z" />
                        </g>
                      </svg>
                    </a></div>
                  <div class="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="https://www.finance-ni.gov.uk/">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="184" height="35" viewBox="0 0 592 112" aria-labelledby="ni-finance-logo-alt">
                        <title id="ni-finance-logo-alt">Northern Ireland Department of Finance logo</title>
                        <g class="ons-svg-logo__group" fill="#001f5b">
                          <path d="M148.45 28.94H116.8v1.86h5.42v40.32h-5.42V73h18.38v-1.77h-5.42V51.76h1.78c5.76 0 6.72 1 7.18 8.38v.34h1.44V41.89h-1.44v.24c-.16 5.49-1 7-4.14 7.61a42.89 42.89 0 0 1-4.8.26V31h3.72a40.34 40.34 0 0 1 6.95.18 7.33 7.33 0 0 1 4.05 2.36c1.6 1.78 2.36 3.64 3.29 8v.26h1.43Z" />
                          <path d="M159.95 46.86h-10.89v1.96h4.38v22.51h-4.38v1.85h15.23v-1.85h-4.34V46.86zM156.58 37.81a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.93-4.06h-.13a3.81 3.81 0 0 0-3.9 3.74v.08a1.71 1.71 0 0 0 0 .32 3.82 3.82 0 0 0 3.67 4ZM192.64 57.1c0-5-.35-6.52-1.95-8.2a10.63 10.63 0 0 0-14.9.92V47H165v1.9h4.48v22.4H165v1.85h14.8v-1.82h-3.9v-7.55c0-7.78.33-10.74 1.6-12.5a5.68 5.68 0 0 1 4.48-2.46 4 4 0 0 1 3.02 1.34c1 1.26 1.27 3.47 1.27 11.33v9.84h-4.07v1.85h14.9v-1.85h-4.48ZM223.15 70.4c-1.18 1-1.28 1-1.68 1-1.12 0-1.18 0-1.18-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.09h.1a3 3 0 0 0 3.06-2.83v-.27a3.1 3.1 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.36-2.46 4.65-2.46a4.37 4.37 0 0 1 3.3 1.18c.67.77.85 1.28.85 5.09v4.25c-10 .24-15.48 3.38-15.48 9 0 3.91 2.87 6.52 7.28 6.52a10.15 10.15 0 0 0 8.36-4.48 5.26 5.26 0 0 0 5.6 4.46 6.9 6.9 0 0 0 4.8-2l.16-.19-1.17-1.43Zm-9.29-10.24v1a15.47 15.47 0 0 1-.85 6.4 5.13 5.13 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.73-3.23v-.07a3.31 3.31 0 0 1 0-.77c0-4 2.78-6 9.06-6.29ZM252.91 57.1c0-5-.33-6.52-1.93-8.2a10.52 10.52 0 0 0-14.84.92V47h-10.91v1.9h4.48v22.4h-4.48v1.85H240v-1.82h-3.94v-7.55c0-7.78.34-10.74 1.6-12.5a5.65 5.65 0 0 1 4.48-2.46 3.94 3.94 0 0 1 3 1.34c1 1.26 1.28 3.47 1.28 11.33v9.84h-4v1.85h14.8v-1.85H253ZM280 64.53c-1.6 4.8-4.48 7.28-8.46 7.28a5.5 5.5 0 0 1-4.32-1.76c-1-1.28-1.35-3.2-1.35-8 0-11.76 1.76-13.62 6.08-13.62 2.11 0 4.24 1 4.24 1.7l-.17.25a5.61 5.61 0 0 0-1.35 3.2A3.21 3.21 0 0 0 277.6 57h.27a3.37 3.37 0 0 0 3.41-3.34 1.7 1.7 0 0 0 0-.45c0-3.65-4.48-6.94-9.3-6.94a13.8 13.8 0 0 0-13.61 14 13.57 13.57 0 0 0 12.8 13.62c5.25 0 8.72-2.87 11.2-9.14l.16-.43h-2.24ZM305.2 64.19c-1.18 4.8-4.48 7.54-8.45 7.54a5.45 5.45 0 0 1-5-2.69c-.77-1.38-.85-2.62-.85-9.07v-1.73h17v-.34c-.51-7.1-5.07-11.66-11.76-11.66s-12.6 6.5-12.6 13.86 6.09 13.82 12.8 13.82a11.21 11.21 0 0 0 11.2-9.6V64h-2.24Zm-14.4-7.85v-1.19c0-4.91 1.38-6.72 5.09-6.72a3.79 3.79 0 0 1 4 2.37 13.51 13.51 0 0 1 .51 5.58ZM47.95 84l-12-6.94V63.01l12-7.01 12.02 7.01v14.05L47.95 84zM47.95 112l-12-6.94V91.01l12-7.01 12.02 7.01v14.05L47.95 112zM24.02 42.05 12 35.01V20.99l12.02-6.94 11.93 6.94v14.02l-11.93 7.04zM24.02 70.05 12 63.01V49.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04z" />
                          <path d="M24.02 98.05 12 91.01V77.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04zM0 56V28l12 7.01v14.05L0 56zM0 84V56l12 7.01v14.05L0 84z" />
                        </g>
                        <g class="ons-svg-logo__group" fill="#8b9064">
                          <path d="m47.95 28-12-7.01V7.01l12-7.01 12.02 7.01v13.98L47.95 28zM47.95 56l-12-6.94V35.01l12-7.01 12.02 7.01v14.05L47.95 56zM72 42.05l-12.03-7.04V20.99L72 14.05l12 6.94v14.02l-12 7.04z" />
                          <path d="m72 70.05-12.03-7.04V49.06L72 42.05l12 7.01v13.95l-12 7.04zM72 98.05l-12.03-7.04V77.06L72 70.05l12 7.01v13.95l-12 7.04zM96 56l-12-6.94V35.01L96 28v28zM96 84l-12-6.94V63.01L96 56v28z" />
                        </g>
                        <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#001f5b">
                          <path d="M126.11 1.6H121v15.06h5.66a5.48 5.48 0 0 0 4.48-2.24 8.14 8.14 0 0 0 1.7-5.33A8.21 8.21 0 0 0 131 3.81a5.93 5.93 0 0 0-4.89-2.21Zm-2.91 1.78h3a4.2 4.2 0 0 1 3.63 1.71A7 7 0 0 1 130.86 9a7.33 7.33 0 0 1-1.18 4.32 4.25 4.25 0 0 1-3.57 1.6h-2.91ZM144.24 11.2a6.7 6.7 0 0 0-1.38-4.48 4.55 4.55 0 0 0-3.53-1.6 5.31 5.31 0 0 0-3.75 1.6 6 6 0 0 0-1.42 4.48 6.4 6.4 0 0 0 1.42 4.24 4.73 4.73 0 0 0 3.75 1.6 5.25 5.25 0 0 0 3-.91 4.42 4.42 0 0 0 1.67-2.37l-1.76-.34a3 3 0 0 1-2.9 2.12 3.4 3.4 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-8-1.34a3.76 3.76 0 0 1 .91-2.24 2.94 2.94 0 0 1 2.24-1 2.77 2.77 0 0 1 1.6.51 3.17 3.17 0 0 1 .95 1.2 8.74 8.74 0 0 1 .33 1.6ZM151.33 5.15A3.75 3.75 0 0 0 148 7.39v-1.9h-1.69v14.89h1.85v-5.15a3.62 3.62 0 0 0 3.2 1.78 3.87 3.87 0 0 0 3.2-1.6 6.64 6.64 0 0 0 1.3-4.21 7 7 0 0 0-1.25-4.26 3.91 3.91 0 0 0-3.28-1.79Zm-.33 1.7A2.25 2.25 0 0 1 153 8a5.44 5.44 0 0 1 .77 3.2 4.84 4.84 0 0 1-.84 3.3 2.48 2.48 0 0 1-3.48.41 2 2 0 0 1-.26-.24 3.1 3.1 0 0 1-1-2V9.44a4.08 4.08 0 0 1 1-1.87 2.9 2.9 0 0 1 1.81-.72ZM166.4 14.4V9.81a5 5 0 0 0-1-3.55 4.42 4.42 0 0 0-3.31-1c-2.86 0-4.48 1-4.91 3.2l1.79.33c.26-1.28 1.26-1.95 3-1.95a3.42 3.42 0 0 1 1.6.34 2 2 0 0 1 .85.85 7.5 7.5 0 0 1 .19 1.77h-1.41a8.16 8.16 0 0 0-4.9 1.09 3.56 3.56 0 0 0-1.44 2.8 3.4 3.4 0 0 0 1 2.46 4 4 0 0 0 2.9 1 3.92 3.92 0 0 0 3.81-2.24 4.9 4.9 0 0 0 .14 1.71h1.87a10.3 10.3 0 0 1-.18-2.22Zm-5.23 1a2.43 2.43 0 0 1-1.71-.51 1.59 1.59 0 0 1-.58-1.35 1.91 1.91 0 0 1 1.12-1.78 6.33 6.33 0 0 1 3.2-.67 10.68 10.68 0 0 1 1.6 0v.69a3.75 3.75 0 0 1-1.28 2.62 3 3 0 0 1-2.37 1.07ZM174.16 5.15a2.73 2.73 0 0 0-1.6.61 4.49 4.49 0 0 0-1.44 2V5.54h-1.7v11.2h1.78v-6a4 4 0 0 1 1-2.75 2.85 2.85 0 0 1 2.24-1h.4V5.25a2 2 0 0 0-.68-.1ZM180.8 15.47c-1.1 0-1.71-.51-1.71-1.6V7h2.46V5.41h-2.35V2.53l-1.78.17v2.79h-1.93v1.6h1.93v6.4a3 3 0 0 0 2.44 3.37 2.48 2.48 0 0 0 .86 0 10.68 10.68 0 0 0 1.6 0v-1.48a12.79 12.79 0 0 1-1.52.09ZM197.12 5.84a3.62 3.62 0 0 0-2-.69 3.76 3.76 0 0 0-3.47 2.47 3.34 3.34 0 0 0-1-1.7 3.21 3.21 0 0 0-2.24-.77 3.79 3.79 0 0 0-3.3 2.24v-1.9h-1.39v11.2h1.79V10a3.21 3.21 0 0 1 .77-2.24 2.19 2.19 0 0 1 3-.66 1.64 1.64 0 0 1 .33.26 2.55 2.55 0 0 1 .67 1.92v7.42h1.86v-6.28a4.06 4.06 0 0 1 .86-2.71 2.48 2.48 0 0 1 1.85-.86 2 2 0 0 1 1.19.43 1.75 1.75 0 0 1 .67.91 6.67 6.67 0 0 1 .19 1.6v7h1.86v-7a9.87 9.87 0 0 0-.26-2.24 4.2 4.2 0 0 0-1.38-1.71ZM210.56 11.2a6.77 6.77 0 0 0-1.34-4.48 4.49 4.49 0 0 0-3.57-1.6 5.2 5.2 0 0 0-3.71 1.6 6 6 0 0 0-1.36 4.48 6.28 6.28 0 0 0 1.42 4.24 4.66 4.66 0 0 0 3.73 1.6 5.25 5.25 0 0 0 3-.91 4.45 4.45 0 0 0 1.79-2.42l-1.79-.33a2.92 2.92 0 0 1-2.87 2.11 3.35 3.35 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-7.86-1.34a3.71 3.71 0 0 1 .92-2.24 2.84 2.84 0 0 1 3.74-.44 3 3 0 0 1 .91 1.2 5.94 5.94 0 0 1 .34 1.6ZM220 5.84a3.75 3.75 0 0 0-2.12-.69 3.87 3.87 0 0 0-3.37 2.24V5.6h-1.71v11.2h1.86v-6.22a4 4 0 0 1 .83-2.72 2.71 2.71 0 0 1 2.11-1 2.07 2.07 0 0 1 1.6.59 2.81 2.81 0 0 1 .61 2.16v7.18h1.77v-6.4a7.22 7.22 0 0 0-.33-2.88A2.72 2.72 0 0 0 220 5.84ZM228.24 15.47c-1.1 0-1.71-.51-1.71-1.6V7H229V5.41h-2.46V2.53l-1.76.17v2.79h-2v1.6h2v6.4a2.93 2.93 0 0 0 2.43 3.33 3.1 3.1 0 0 0 .86 0 14.23 14.23 0 0 0 1.6 0v-1.49a9.62 9.62 0 0 1-1.43.14ZM240.48 5.15a4.69 4.69 0 0 0-3.62 1.6 6.2 6.2 0 0 0-1.44 4.25 7.06 7.06 0 0 0 1.25 4.24 4.56 4.56 0 0 0 3.67 1.68 4.74 4.74 0 0 0 3.82-1.68A6.62 6.62 0 0 0 245.6 11a6.34 6.34 0 0 0-1.34-4.15 4.55 4.55 0 0 0-3.78-1.7Zm0 10.24a2.67 2.67 0 0 1-2.08-1 5.13 5.13 0 0 1-.94-3.39 5 5 0 0 1 .84-3.2 2.73 2.73 0 0 1 2.12-1 2.85 2.85 0 0 1 2.24 1 5.1 5.1 0 0 1 .8 3.42 5 5 0 0 1-.84 3.3 2.88 2.88 0 0 1-2.2.89ZM252.8 1.44a10.71 10.71 0 0 0-1.6-.16 4 4 0 0 0-2.46.75c-.68.5-1 1.6-1 3.39h-1.86V7h1.86v9.6h1.87V7h2.61V5.42h-2.62v-.27a2.23 2.23 0 0 1 .51-1.77 2.13 2.13 0 0 1 1.6-.52 4.63 4.63 0 0 1 1 .18v-1.6ZM353.09 2h-2.24l-4.8 15h1.79l1.34-4.32h5.43l1.6 4.4h2.11L353.17 2Zm.83 9.2h-4.48l2.24-6.72ZM366.62 6.22a3.66 3.66 0 0 0-2.12-.68 3.91 3.91 0 0 0-3.4 2.12V5.87h-1.85v11.2h1.85V11a4.11 4.11 0 0 1 .9-2.76 2.74 2.74 0 0 1 2.13-1 2.11 2.11 0 0 1 1.52.59 3 3 0 0 1 .67 2.24v7.08H368v-6.53a7.22 7.22 0 0 0-.34-2.88 2.73 2.73 0 0 0-1.04-1.52ZM386.5 8.58a4.71 4.71 0 0 0 .7-2.18 4.33 4.33 0 0 0-1.2-2.86 4.81 4.81 0 0 0-3.62-1.41h-5.92v15h1.95v-6.51h4.15l2.75 6.4h2.11l-3-6.94a3.37 3.37 0 0 0 2.08-1.5Zm-8.12-4.72h4a3 3 0 0 1 2 .67 2.24 2.24 0 0 1 .77 1.76 2.68 2.68 0 0 1-.77 2 3 3 0 0 1-2.24.77h-3.84ZM393.6 5.62a4.8 4.8 0 0 0-3.6 1.6 6.45 6.45 0 0 0-1.44 4.24 6.87 6.87 0 0 0 1.33 4.2 4.31 4.31 0 0 0 3.63 1.6 4.61 4.61 0 0 0 3.67-1.6 6.39 6.39 0 0 0 1.45-4.24 6 6 0 0 0-1.36-4.14 4.3 4.3 0 0 0-3.68-1.66Zm0 10.16a2.68 2.68 0 0 1-2.1-1 5 5 0 0 1-.86-3.39 4.9 4.9 0 0 1 .86-3.2 2.6 2.6 0 0 1 2.1-1 2.71 2.71 0 0 1 2.11 1 4.93 4.93 0 0 1 .85 3.31 4.78 4.78 0 0 1-.85 3.3 2.83 2.83 0 0 1-2.19.91ZM400.53 5.87h1.86v11.15h-1.86zM400.46 2h2.03v2.11h-2.03zM412.62 6.22a3.55 3.55 0 0 0-2.09-.68 3.85 3.85 0 0 0-3.39 2.12V5.87h-1.7v11.2h1.89V11a4 4 0 0 1 .81-2.72 2.77 2.77 0 0 1 2.24-1 2.13 2.13 0 0 1 1.6.59 2.91 2.91 0 0 1 .68 2.24v7.08h1.74v-6.57a8.05 8.05 0 0 0-.34-2.88 2.66 2.66 0 0 0-1.44-1.52ZM425.6 7.74a3.58 3.58 0 0 0-3.3-2.12 3.78 3.78 0 0 0-3.37 2.24v-1.8h-1.79v11.2h1.74V11a4.05 4.05 0 0 1 .85-2.7 2.69 2.69 0 0 1 2.24-1 2 2 0 0 1 1.52.57 2.83 2.83 0 0 1 .67 2.24v7.09h1.78v-6.58a8.05 8.05 0 0 0-.34-2.88ZM387.2 38.29a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.88-4.05h-.1a4 4 0 0 0 0 8ZM390.56 47.25h-10.93v1.85h4.48v22.58h-8.37L361.6 29.23h-2.24l-14.91 42.45h-3.2v1.92h11.2v-1.92h-5.59l4.05-12.19h12.8l4 12.19h-5.57v1.92H395v-1.92h-4.48ZM362.88 57.6h-11.2l5.73-16.94ZM413.49 46.66c-2.88 0-5.09 1.85-6.87 5.66v-5.07h-10.91v1.85h4.48v22.58h-4.48v1.92h15.23v-1.92h-4.32v-5.82c0-7.62.68-11.2 2.53-14.56.61-1 1.28-1.6 1.6-1.6s.26 0 .35.68c.16 2.53 1.17 3.81 3.2 3.81a3.45 3.45 0 0 0 3.57-3.33v-.32a4 4 0 0 0-4.05-4ZM440.21 49.6s.27 0 .41.85a2.24 2.24 0 0 0 2.23 2.25h.24a2.68 2.68 0 0 0 2.69-2.65v-.27a3.2 3.2 0 0 0-3.2-3.2h-.32a6.38 6.38 0 0 0-4.48 2.52 11.25 11.25 0 0 0-7.38-2.52c-6.1 0-10.66 4-10.66 9.6a9 9 0 0 0 3.88 7.36c-3.72 2.54-5.59 5.23-5.59 8.2a5.94 5.94 0 0 0 4.37 5.7 6.28 6.28 0 0 0-4.48 5.84c0 4.48 5.49 8.11 12.24 8.11 8 0 14-5.25 14-12.43 0-5.33-2.24-7.34-8-7.34l-10.92.16c-3.2 0-3.81-.77-3.81-2.12s1.45-3.29 4.16-5a10.42 10.42 0 0 0 5 1c6.1 0 10.76-3.87 10.76-9.12a10.13 10.13 0 0 0-2-6c.36-.83.52-.94.86-.94Zm-9.81 14c-3 0-3.81-1.28-3.81-5.84 0-8.55.59-9.22 4-9.22 3 0 3.81.59 3.81 6.4 0 4.8-.18 6.18-.67 7.09a3.77 3.77 0 0 1-3.33 1.54Zm-.24 25.6c-4.66 0-7.78-2.63-7.78-6.59a6.75 6.75 0 0 1 2-4.8h.27a21.91 21.91 0 0 0 3.71.17h3.4a18.58 18.58 0 0 0 2.36 0H438c2.87 0 3.39.83 3.39 2.45-.06 4.83-5 8.8-11.26 8.8Z" />
                          <path d="M469.73 58.58v-.34c-.5-7.1-5.06-11.66-11.76-11.66s-12.59 6.51-12.59 13.85 6.09 13.81 12.8 13.81a11.21 11.21 0 0 0 11.2-9.6v-.34h-2.24v.24c-1.19 4.8-4.48 7.54-8.45 7.54a5.43 5.43 0 0 1-5-2.69c-.76-1.37-.85-2.65-.85-9v-1.6h16.91Zm-11.92-9.91a3.76 3.76 0 0 1 4 2.39 12.92 12.92 0 0 1 .51 5.56h-9.6v-1.18c0-4.91 1.37-6.77 5.09-6.77ZM496.48 70.77c-1.2 1-1.28 1-1.71 1-1.09 0-1.19 0-1.19-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.68 0-10.57 3.2-10.57 6.94a3 3 0 0 0 2.93 3.1h.09a2.92 2.92 0 0 0 3-2.81.71.71 0 0 0 0-.29 3.18 3.18 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.37-2.46 4.64-2.46a4.37 4.37 0 0 1 3.32 1.18c.67.77.84 1.28.84 5.09v4.23c-10 .25-15.5 3.39-15.5 9 0 3.9 2.9 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.23 5.23 0 0 0 5.57 4.48 6.87 6.87 0 0 0 4.8-2l.16-.18-1.2-1.42Zm-9.39-10.29v1a15.15 15.15 0 0 1-.85 6.4 5.16 5.16 0 0 1-4.48 2.94 3.5 3.5 0 0 1-3.76-3.2 3 3 0 0 1 0-.73c0-4.17 2.82-6.09 9.09-6.41ZM524.16 29.33h-10.91v1.85h4.48v20.16a8.42 8.42 0 0 0-7.52-4.48c-6 0-11.2 6.24-11.2 13.68s5.17 14 11.42 14a8.32 8.32 0 0 0 7.28-4.48v4h10.82v-1.92h-4.37Zm-13.44 42.86a4 4 0 0 1-3.47-2.19c-.67-1.34-.85-2.7-.85-8.62 0-6.72.27-9.23.94-10.58a4.18 4.18 0 0 1 3.28-2c3.91 0 6.72 4.91 6.72 11.76s-2.76 11.63-6.62 11.63ZM554.5 70.77c-1.2 1-1.27 1-1.68 1-1.11 0-1.2 0-1.2-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.1h.09a2.94 2.94 0 0 0 3.1-2.77v-.33a3.18 3.18 0 0 0-1-2.24c-.27-.34-.27-.34-.27-.5 0-1 2.38-2.46 4.66-2.46a4.39 4.39 0 0 1 3.29 1.18c.71.77.85 1.28.85 5.09v4.23c-10 .25-15.47 3.39-15.47 9 0 3.9 2.86 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.21 5.21 0 0 0 5.57 4.48 6.69 6.69 0 0 0 4.8-2l.18-.18-1.19-1.42Zm-9.4-10.29v1a15 15 0 0 1-.84 6.4 5.12 5.12 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.75-3.2 5 5 0 0 1 0-.77c-.03-4.13 2.82-6.05 9.07-6.37ZM564.05 38.29a4.12 4.12 0 0 0 4-4 4 4 0 0 0-4-4.05H564a3.8 3.8 0 0 0-4 3.61 1.48 1.48 0 0 0 0 .42 4 4 0 0 0 3.94 4ZM567.44 47.25h-10.82v1.93h4.29V71.7h-4.29v1.93h15.14V71.7h-4.32V47.25zM582.58 56.38c-5.24-.94-6.18-1.71-6.18-3.47a4.88 4.88 0 0 1 5.42-4.24 7.12 7.12 0 0 1 7.09 6.27v.26h1.6l-.25-8.29h-1.46l-.94 2a9.64 9.64 0 0 0-6.16-2.24 8 8 0 0 0-8.23 7.77V55c0 5.23 2.37 7.44 9.14 8.62 5 .76 5.92 2 5.92 3.88a5.15 5.15 0 0 1-5.48 4.8h-.19c-4.14 0-6.52-2.53-8.11-8.72v-.24h-1.44l.16 10.38h1.19l1.44-1.94a9.79 9.79 0 0 0 6.84 2.61 8.72 8.72 0 0 0 8.71-8.73V65c-.02-5-2.53-7.53-9.07-8.62ZM323.46 0h2.24v90.67h-2.24z" />
                        </g>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Survey title</div>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                  <button type="submit" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost">
                    <span class="ons-btn__inner">Save and sign out
                      <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                        <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
                        <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "layout/_template.njk" %}

{% set pageConfig = {
    "header": {
        "logo": "ni-finance-logo",
        "mobileLogo": "ni-finance-logo-mobile",
        "logoAlt": "Northern Ireland Department of Finance logo",
        "logoHref": "https://www.finance-ni.gov.uk/",
        "customHeaderLogo": true,
        "title": 'Survey title'
    },
    "signoutButton": {
        "text": 'Save and sign out',
        "iconType": 'exit',
        "iconPosition": 'after'
    }
} %}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<ServiceLinks> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) false An array of navigation links
titleAsH1 boolean false Override to render the header title as a H1
titleLogo string false URL for image to use instead of a title string
titleLogoAlt string false (if titleLogo not specified) Alt tag for the title logo
titleLogoHref string false Will wrap the title logo in a link to the specified URL
customHeaderLogo string false Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio
wide boolean false If set to true will set a wider page style by adding css to the container
Name Type Required Description
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Service links navigation
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
toggleServicesButton Array<ToggleButton> (ref) true (if serviceLinks supplied) Configuration for the mobile service links toggle button
Name Type Required Description
currentPath string true Path to the default active page
currentPageTitle string false Page title to be used in sub navigation mobile menu
classes string false Additional css classes for the navigation element
id string true A unique ID for the navigation element
ariaLabel string false The aria-label added to the navigation element. Defaults to Main menu or Service links navigation if set with serviceLinks param
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link
toggleNavigationButton toggleNavigationButton (ref) true Configuration for the mobile navigation toggle button
subNavigation subNavigation (ref) false An array of sub navigation links

toggleNavigationButton

Name Type Required Description
text string true Text to be displayed on toggle button. Defaults to Menu
ariaLabel string false Aria label for toggle button. Defaults to Toggle menu
Name Type Required Description
currentPath string true Path to the default active page
id string true A unique ID for the sub navigation element
ariaLabel string false The aria-label added to the sub navigation element. Defaults to Section menu
itemsList Array<Item> (ref) true An array of list items to render in the navigation element
overviewURL string true URL to the overview page. Only shown on mobile menu
overviewText string false Text for the overview page link. Defaults to “Overview”

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
url string true The path to the linked page
title string true The text for the link
id string false The id for the link
sections Array<Section> (ref) false An array of section items of an item. Only shown on mobile menu

Section

Name Type Required Description
sectionTitle string false The text for a heading for the section children
children Array<Child> (ref) false An array of child list items of an section

Child

Name Type Required Description
url string true The url to the linked page
title string true The text for the link
id string false The id for the link 
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/navigation/_macro.njk" import onsNavigation %}

    {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
    {% set currentLanguageISOCode = "en" %}

    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
    {% endif %}

    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>
                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links ons-grid__col ons-col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
                                    {% set breakpoint = 'xs' %}
                                    {% set controlVisibility = true %}
                                {% elif params.serviceLinks.itemsList | length > 1 %}
                                    {% set breakpoint = 'm' %}
                                    {% set controlVisibility = true %}
                                {% else %}
                                    {% set controlVisibility = false %}
                                {% endif %}
                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                    <nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
                                    {% if params.variants == 'internal' %}
                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                    {% else %}
                                        {% set buttonVariant = "text-link" %}
                                    {% endif %}
                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                        {{ onsButton({
                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
                                            "classes": "ons-u-d-no ons-js-toggle-services",
                                            "type": "button",
                                            "buttonStyle": "mobile",
                                            "variants": buttonVariant,
                                            "attributes": {
                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                "aria-controls": params.serviceLinks.id,
                                                "aria-haspopup": "true",
                                                "aria-expanded": "false"
                                            }
                                        }) }}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if params.serviceLinks is defined and params.serviceLinks %}
                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                    <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                <a
                                    href="{{ item.url }}"
                                    class="ons-header-service-nav__link"
                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                >{{ item.title }}</a>
                            </li>
                        {% endfor %}
                        {% if params.language is defined and params.language %}
                            <div class="ons-u-d-no@xs">
                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                {{ onsLanguageSelector(params.language) }}
                            </div>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        <div class="ons-header__main">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                        {% if params.description is defined and params.description %}
                            <p class="ons-header__description">{{ params.description }}</p>
                        {% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.navigation is defined %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": "Toggle search" ,
                                            "aria-controls": "ons-site-search",
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                {{ onsButton({
                                    "text": params.navigation.toggleNavigationButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            {{ onsNavigation(params.navigation) }}
        {% endif %}
    </header>
{% endmacro %}

// Block
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;

  & &__title--svg-logo {
    display: block;
    fill: $color-white;

    @include mq(m) {
      margin: 0.84rem 0;
    }

    @include mq(xxs, 399px) {
      max-width: 160px;
    }
  }
  // Elements
  &__top {
    background: $color-header-top;
    width: 100%;
  }
  &__grid-top {
    height: 54px;

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-tall {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;

    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
  }
  &__title {
    @extend .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

    @include mq(m) {
      margin-bottom: 1rem;
      margin-top: 0.8rem;
    }

    //to allow for differences in size between welsh and english logos
    &-census-logo-en {
      @include mq(xxs) {
        margin: 0.19rem 0 0.2rem;
        padding: 0.25rem 0;
      }
    }
    &-link {
      display: block;
      text-decoration: none;
      &:focus {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__description {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1.1rem;
    }
  }
  // Modifier - variants
  &--description {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-u-fs-xxl\@m;

        margin-bottom: 0;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        .ons-svg-logo__group--text,
        .ons-svg-logo__group--primary {
          fill: $color-white;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
      .ons-svg-logo {
        fill: $color-text-link-focus;
      }
    }
    &__grid-top {
      min-height: 36px;
      a {
        color: $color-white;
        &:hover {
          text-decoration: underline solid $color-white 3px;
        }
      }
    }
  }

  .ons-svg-logo {
    display: block;
  }

  &__logo-link:focus {
    .ons-svg-logo {
      .ons-svg-logo__group {
        fill: $color-black !important;
      }
    }
  }

  .ons-header__logo--large {
    @include mq(xxs, 454px) {
      display: none;
    }
  }

  .ons-header__logo--small {
    @include mq(455px) {
      display: none;
    }
  }

  &__logo-link,
  &__logo-link:hover {
    font-size: 0;
    text-decoration: none;
  }

  &__logo-link {
    display: block;
  }

  &-service-nav {
    display: inline-block;

    &--mobile {
      background: $color-branded-tint;
      padding: 1rem;
      width: 100%;
    }

    &__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &__item {
      display: inline-block;
      margin: 0 0 0 1rem;
      &--mobile {
        display: block;
        margin: 0 0 0.5rem;
      }
      &:first-child {
        margin-left: 0;
      }
    }

    .ons-language-links {
      border-top: 1px solid $color-branded;
      margin: 1.5rem 0 0;
      padding: 1rem 0 0;

      &__item {
        margin: 0 0 0.5rem;
      }
    }
  }
}

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Header’ component on GitHub 

More in ‘Components’