Skip to main content

Header

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

Open this example in a new tab  
<header class="header " role="banner">
  <div class="header__top">
    <div class="container">
      <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
        <div class="grid__col col-auto">
          <div class="header__logo--large">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
          <div class="header__logo--small">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header__main">
    <div class="container">
      <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
        <div class="grid__col col-auto u-flex-shrink">
          <a class="header__title-link" href="#0">
            <div class="header__title">Page title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% from "components/header/_macro.njk" import onsHeader %}
{{
    onsHeader({
        "title": 'Page title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0'
    })
}}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

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 modifier header--internal when implementing for an internal service.

Open this example in a new tab  
<header class="header header--internal" role="banner">
  <div class="header__top">
    <div class="container">
      <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
        <div class="grid__col col-auto">
          <div class="header__logo--large">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
          <div class="header__logo--small">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header__main">
    <div class="container">
      <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
        <div class="grid__col col-auto u-flex-shrink">
          <a class="header__title-link" href="#0">
            <div class="header__title">Service title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% from "components/header/_macro.njk" import onsHeader %}
{{
    onsHeader({
        "title": 'Service title',
        "logoHref": '#0',
        "classes": 'header--internal',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0'
    })
}}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

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="header " role="banner">
  <div class="header__top">
    <div class="container">
      <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
        <div class="grid__col col-auto">
          <div class="header__logo--large">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
          <div class="header__logo--small">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
        </div>
        <div class="header__links grid__col col-auto">
          <div class="grid__col col-auto">
            <ul class="language-links">
              <li class="language-links__item">
                <a href="#0" lang="cy">Cymraeg</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header__main">
    <div class="container">
      <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
        <div class="grid__col col-auto u-flex-shrink">
          <div class="header__title header__title--with-button">Survey title</div>
        </div>
        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
          <a href="" role="button" class="btn btn--ghost u-d-no@xxs@m btn--exit">
            <span class="btn__inner">Save and sign out
              <svg class="svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <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>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% from "components/header/_macro.njk" import onsHeader %}
{{
    onsHeader({
        "title": 'Survey title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "button": {
            "text": 'Save and sign out',
            "ariaLabel": 'Toggle main navigation',
            "buttonStyle": 'exit'
        },
        "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
                }
            ]
        }
    })
}}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

External survey with description

Allows for text to be added below the title by adding the header--hero modifier class to the header element. 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="header header--hero" role="banner">
  <div class="header__top">
    <div class="container">
      <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
        <div class="grid__col col-auto">
          <div class="header__logo--large">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
          <div class="header__logo--small">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header__main header__main--with-description">
    <div class="container">
      <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
        <div class="grid__col col-auto u-flex-shrink">
          <a class="header__title-link" href="#0">
            <div class="header__title header__title--with-description">Service title</div>
          </a>
        </div>
      </div>
      <p class="header__desc">This is the description or tagline</p>
    </div>
  </div>
</header>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% from "components/header/_macro.njk" import onsHeader %}
{{
    onsHeader({
        "classes": 'header--hero',
        "title": 'Service title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "desc": 'This is the description or tagline',
        "titleLogoHref": '#0'
    })
}}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

External with navigation

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

Open this example in a new tab  
<header class="header " role="banner">
  <div class="header__top">
    <div class="container">
      <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
        <div class="grid__col col-auto">
          <div class="header__logo--large">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
          <div class="header__logo--small">
            <a class="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>
                <path class="ons-svg-logo--accent" 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" />
                <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" />
                <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" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header__main">
    <div class="container">
      <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
        <div class="grid__col col-auto u-flex-shrink">
          <a class="header__title-link" href="#0">
            <div class="header__title">Design system</div>
          </a>
        </div>
        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
          <button type="submit" class="btn btn--mobile u-ml-s u-d-no js-toggle-main" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
            <span class="btn__inner">Menu
              <svg class="svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <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="header__bottom">
    <div class="container container--gutterless@xxs@m">
      <nav class="header-nav js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
        <ul class="header-nav__list">
          <li class="header-nav__item  header-nav__item--active">
            <a class="header-nav__link" href="#home">Home</a>
          </li>
          <li class="header-nav__item ">
            <a class="header-nav__link" href="#0">Get started</a>
          </li>
          <li class="header-nav__item ">
            <a class="header-nav__link" href="#0">Components</a>
          </li>
          <li class="header-nav__item ">
            <a class="header-nav__link" href="#0">Styles</a>
          </li>
          <li class="header-nav__item ">
            <a class="header-nav__link" href="#0">Patterns</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% from "components/header/_macro.njk" import onsHeader %}
{{
    onsHeader({
        "title": 'Design system',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "toggleButton": {
            "text": 'Menu',
            "ariaLabel": 'Toggle main navigation'
        },
        "navigation": {
            "id": 'main-nav',
            "ariaLabel": 'Main menu',
            "ariaListLabel": 'Navigation menu',
            "currentPath": '#home',
            "itemsList": [
                {
                    "title": 'Home',
                    "url": '#home'
                },
                {
                    "title": 'Get started',
                    "url": '#0'
                },
                {
                    "title": 'Components',
                    "url": '#0'
                },
                {
                    "title": 'Styles',
                    "url": '#0'
                },
                {
                    "title": 'Patterns',
                    "url": '#0'
                }
            ]
        }
    })
}}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}
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 + ' js-enabled' : 'js-enabled');
    </script>
    <div class="page">
      <div class="page__content">
        <a class="skip__link" href="#main-content">Skip to main content</a>
        <header class="header " role="banner">
          <div class="header__top">
            <div class="container">
              <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
                <div class="grid__col col-auto">
                  <div class="header__logo--large">
                    <a class="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>
                        <path class="ons-svg-logo--accent" 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" />
                        <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" />
                        <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" />
                      </svg>
                    </a>
                  </div>
                  <div class="header__logo--small">
                    <a class="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>
                        <path class="ons-svg-logo--accent" 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" />
                        <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" />
                        <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" />
                      </svg>
                    </a>
                  </div>
                </div>
                <div class="header__links grid__col col-auto">
                  <div class="grid__col col-auto">
                    <ul class="language-links">
                      <li class="language-links__item">
                        <a href="#0" lang="en">English</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="header__main">
            <div class="container">
              <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                <div class="grid__col col-auto u-flex-shrink">
                  <a class="header__title-link" href="#0">
                    <div class="header__title">Gwasanaeth Cymraeg</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="page__container container ">
          <div class="grid">
            <div class="grid__col col-8@m">
              <main id="main-content" class="page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.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>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% extends "styles/page-template/_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
            }
        ]
    }
} %}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

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="en">
    <!-- 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 + ' js-enabled' : 'js-enabled');
    </script>
    <div class="page">
      <div class="page__content">
        <a class="skip__link" href="#main-content">Skip to main content</a>
        <header class="header " role="banner">
          <div class="header__top">
            <div class="container">
              <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
                <div class="grid__col col-auto">
                  <div class="header__logo--large">
                    <a class="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>
                        <path class="ons-svg-logo--accent" 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" />
                        <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" />
                        <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" />
                      </svg>
                    </a>
                  </div>
                  <div class="header__logo--small">
                    <a class="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>
                        <path class="ons-svg-logo--accent" 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" />
                        <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" />
                        <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" />
                      </svg>
                    </a>
                  </div>
                </div>
                <div class="header__links grid__col col-auto">
                  <div class="grid__col col-auto">
                    <ul class="language-links">
                      <li class="language-links__item">
                        <a href="#0" lang="cy">Cymraeg</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="header__main">
            <div class="container">
              <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                <div class="grid__col col-auto u-flex-shrink header__title-census-logo-en">
                  <a class="header__title-link" href="#0">
                    <svg class="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="grid__col col-auto u-flex-no-shrink u-d-no@m">
                  <button type="submit" class="btn btn--mobile u-ml-s u-d-no js-toggle-main" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
                    <span class="btn__inner">Menu
                      <svg class="svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false">
                        <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="header__bottom">
            <div class="container container--gutterless@xxs@m">
              <nav class="header-nav js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                <ul class="header-nav__list">
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">Home</a>
                  </li>
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">About the census</a>
                  </li>
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">Help with your census</a>
                  </li>
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">Contact us</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="page__container container ">
          <div class="grid">
            <div class="grid__col col-8@m">
              <main id="main-content" class="page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.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>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% extends "styles/page-template/_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": 'en'
            }
        ]
    },
    "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',
        "ariraListLabel": 'Navigation menu',
        "currentPath": '/get-started',
        "itemsList": [
            {
                "title": 'Home',
                "url": '#0'
            },
            {
                "title": 'About the census',
                "url": '#0'
            },
            {
                "title": 'Help with your census',
                "url": '#0'
            },
            {
                "title": 'Contact us',
                "url": '#0'
            }
        ]
    },
    "toggleButton": {
        "text": 'Menu',
        "ariaLabel": 'Toggle main navigation'
    }
} %}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

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 + ' js-enabled' : 'js-enabled');
    </script>
    <div class="page">
      <div class="page__content">
        <a class="skip__link" href="#main-content">Skip to main content</a>
        <header class="header " role="banner">
          <div class="header__top">
            <div class="container">
              <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap ">
                <div class="grid__col col-auto">
                  <div class="header__logo--large">
                    <a class="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>
                        <path class="ons-svg-logo--accent" 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" />
                        <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" />
                        <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" />
                      </svg>
                    </a>
                  </div>
                  <div class="header__logo--small">
                    <a class="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>
                        <path class="ons-svg-logo--accent" 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" />
                        <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" />
                        <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" />
                      </svg>
                    </a>
                  </div>
                </div>
                <div class="header__links grid__col col-auto">
                  <div class="grid__col col-auto">
                    <ul class="language-links">
                      <li class="language-links__item">
                        <a href="#0" lang="en">English</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="header__main">
            <div class="container">
              <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                <div class="grid__col col-auto u-flex-shrink">
                  <a class="header__title-link" href="#0">
                    <svg class="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="page__container container ">
          <div class="grid">
            <div class="grid__col col-8@m">
              <main id="main-content" class="page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.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>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% extends "styles/page-template/_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
            }
        ]
    }
} %}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

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 + ' js-enabled' : 'js-enabled');
    </script>
    <div class="page">
      <div class="page__content">
        <a class="skip__link" href="#main-content">Skip to main content</a>
        <header class="header " role="banner">
          <div class="header__top">
            <div class="container">
              <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap header__grid-top-nisra">
                <div class="grid__col col-auto">
                  <div class="header__logo--large">
                    <a class="header__logo-link" href="#0">
                      <svg class="ons-nisra-svg-logo" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54">
                        <path class="st0" 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" />
                        <path class="st1" 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>
                          <path class="st2" 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
                    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 class="header__logo--small">
                    <a class="header__logo-link" href="#0">
                      <svg class="ons-nisra-svg-logo" xmlns="http://www.w3.org/2000/svg" width="107" height="35" viewBox="0 0 170 54">
                        <path class="st0" 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" />
                        <path class="st1" 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>
                          <path class="st2" 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
                    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="header__main">
            <div class="container">
              <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                <div class="grid__col col-auto u-flex-shrink header__title-census-logo-en">
                  <a class="header__title-link" href="#0">
                    <svg class="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="grid__col col-auto u-flex-no-shrink u-d-no@m">
                  <button type="submit" class="btn btn--mobile u-ml-s u-d-no js-toggle-main" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
                    <span class="btn__inner">Menu
                      <svg class="svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false">
                        <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="header__bottom">
            <div class="container container--gutterless@xxs@m">
              <nav class="header-nav js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                <ul class="header-nav__list">
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">Home</a>
                  </li>
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">About the census</a>
                  </li>
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">Help with your census</a>
                  </li>
                  <li class="header-nav__item ">
                    <a class="header-nav__link" href="#0">Contact us</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="page__container container ">
          <div class="grid">
            <div class="grid__col col-8@m">
              <main id="main-content" class="page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.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>
Nunjucks macro options
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<Navigation> 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> true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> true (if navigation supplied) Configuration for the mobile navigation toggle button
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 ‘nisra’ if using the nisra logo. Makes the masthead taller to accomodate the logo
Name Type Required Description
currentPath string true Path to the default active page
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> 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

ToggleButton

Name Type Required Description
text string true Text to be displayed on toggle button
ariaLabel string false Aria label for toggle button. Defaults to Toggle main navigation

Item

Name Type Required Description
classes string false Additional css classes for the navigation element
path string true The path to the linked page
title string true The text for the link 
{% extends "styles/page-template/_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": "nisra",
        "titleLogo": "census-logo-en",
        "titleLogoAlt": "Census 2021",
        "titleLogoHref": '#0'
    },
    "navigation": {
        "id": 'main-nav',
        "ariaLabel": 'Main menu',
        "currentPath": '/get-started',
        "itemsList": [
            {
                "title": 'Home',
                "url": '#0'
            },
            {
                "title": 'About the census',
                "url": '#0'
            },
            {
                "title": 'Help with your census',
                "url": '#0'
            },
            {
                "title": 'Contact us',
                "url": '#0'
            }
        ]
    },
    "toggleButton": {
        "text": 'Menu',
        "ariaLabel": 'Toggle main navigation'
    }
} %}


{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% 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="header {{ params.classes if params.classes }}" role="banner">
        {% if params.phase is defined and params.phase %}
            {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
            {{ onsPhaseBanner(params.phase) }}
        {% endif %}
        <div class="header__top">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap {{ 'header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
                    <div class="grid__col col-auto">
                        <div class="header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "icon": 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="header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="grid__col col-auto">
                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                    {{ onsLanguageSelector(params.language) }}
                                </div>
                            {% endif %}
                            {% if params.serviceLinks is defined and params.serviceLinks %}
                                <div class="grid__col col-auto u-d-no@xxs@m">
                                    <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="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="header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.text }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="header__main{% if params.desc is defined and params.desc %} header__main--with-description{% endif %}">
            <div class="container{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                    <div class="grid__col col-auto u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="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({
                                    "icon": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                        {% endif %}
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                    </div>
                    {% if params.button is defined and params.button %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "btn--ghost u-d-no@xxs@m",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "buttonStyle": params.button.buttonStyle
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton %}
                        <div class="grid__col col-auto u-flex-no-shrink u-d-no@m">
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "btn--mobile u-ml-s u-d-no js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="header__bottom">
                <div class="container container--gutterless@xxs@m{{ ' container--full-width' if params.fullWidth }}{{ ' container--wide' if params.wide }}">
                    <nav class="header-nav js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                    <a class="header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>
{% endmacro %}


.header-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    margin: 0;
    padding: 0.3rem 0;
    @include mq(m) {
      border-bottom: 4px solid transparent;
      border-top: 0;
      display: inline-block;
      margin: 0 0 0 1rem;
      padding: 0 0 0.3rem;
      position: relative;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &--active,
      &:hover {
        border-color: $color-white;
      }
    }
  }
  &__item + &__item--secondary {
    border-top: 2px solid $color-white;
    margin-top: 0.5rem;
  }
  &__link {
    color: $color-white;
    display: block;
    font-size: 0.9rem;
    margin: 0 0.35rem;
    padding: 0 0.65rem;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #c2ecff;
      text-decoration: none;
    }
    @include mq(m) {
      display: inline-block;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      &:hover,
      &:focus {
        color: $color-white;
      }
    }
  }
  &__item--active &__link {
    font-weight: 700;
  }
}
.header-service-nav {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    margin: 0 0 0 1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
// Block
.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-nisra {
    @include mq(xs) {
      height: 76px;
    }
  }
  &__main {
    background: $color-header;
    padding: 0.56rem 0;
    @include mq(m) {
      height: 95px;
    }
    &--border {
      border-bottom: 3px solid $color-header;
      border-top: 3px solid $color-header;
      padding: 0.934rem 0;
    }
    &--with-description {
      height: auto;
    }
  }
  &__title {
    @extend .u-fs-r--b;
    @extend .u-fs-xl\@xxs;
    color: $color-white;
    @include mq(m) {
      margin-top: 0.85rem;
    }
    &--with-description,
    &--with-button {
      @include mq(m) {
        margin-top: 0.45rem;
      }
    }
    //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 {
        .header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .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;
      }
    }
  }
  &__desc {
    @extend .u-fs-s;
    @extend .u-fs-r\@s;
    color: $color-white;
    margin: 0;
    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .header {
      &__title {
        @extend .u-fs-m;
        @extend .u-fs-xxl\@m;
      }
    }
  }
  &--internal & {
    &__top {
      background: $color-header-top-internal;
      .ons-svg-logo {
        display: block;
        fill: $color-white;
        &--accent {
          fill: $color-ons-logo-secondary;
        }
      }
    }
    &__logo-link:focus {
      background-color: transparent;
      box-shadow: none;
      outline: 3px solid $color-focus;
    }
    &__grid-top {
      min-height: 36px;
    }
  }
  .ons-svg-logo,
  .ons-nisra-svg-logo {
    display: block;
  }
  .ons-svg-logo {
    fill: $color-ons-logo-primary;
    &--accent {
      fill: $color-ons-logo-secondary;
    }
  }
  .ons-nisra-svg-logo {
    .st0 {
      fill: $color-nisra-logo-primary;
    }
    .st1 {
      fill: $color-nisra-logo-secondary;
    }
    .st2 {
      fill: $color-nisra-logo-tertiary;
    }
  }
  &__logo-link:focus {
    .ons-svg-logo {
      fill: $color-black !important;
      &--accent {
        fill: $color-black !important;
      }
    }
    .ons-nisra-svg-logo {
      .st0 {
        fill: $color-black !important;
      }
      .st1 {
        fill: $color-black !important;
      }
      .st2 {
        fill: $color-black !important;
      }
    }
  }
  .header__logo--large {
    @include mq(xxs, 399px) {
      display: none;
    }
  }
  .header__logo--small {
    @include mq(400px) {
      display: none;
    }
  }
  &__logo-link,
  &__logo-link:hover {
    text-decoration: none;
  }
  &__logo-link {
    display: block;
  }
  &__bottom {
    background: $color-header;
    margin-top: -0.03rem;
  }
  .btn--exit {
    margin-top: 0.55rem;
  }
}

Research on this component

If you have conducted any user research using this component, please feed back your findings via the Design System forum 

Design System forum

Discuss ‘Header’ on GitHub 

More in ‘Components’