Skip to main content

Header

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

<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <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="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <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="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Page title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Page title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0'
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<Navigation> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

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

<header class="ons-header ons-header--internal" role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <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="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <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="ons-header__links grid__col col-auto">
          <div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
            <nav class="ons-header-service-nav " aria-label="Service links navigation">
              <ul class="ons-header-service-nav__list" aria-label="Service Links">
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">Help</a>
                </li>
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">My Account</a>
                </li>
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">Sign out</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Service title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Service title',
        "logoHref": '#0',
        "classes": 'ons-header--internal',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "serviceLinks": {
            "itemsList": [
                {
                    "title": "Help",
                    "url": "#0"
                },
                {
                    "title": "My Account",
                    "url": "#0"
                },
                {
                    "title": "Sign out",
                    "url": "#0"
                }
            ]
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<Navigation> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

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).

<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <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="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <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="ons-header__links grid__col col-auto">
          <div class="ons-grid__col ons-col-auto">
            <ul class="ons-language-links">
              <li class="ons-language-links__item">
                <a href="#0" lang="cy">Cymraeg</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <div class="ons-header__title header__title--with-button">Survey title</div>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
          <button type="submit" class="ons-btn ons-u-d-no@xxs@m ons-u-mt-xs@m ons-btn--ghost">
            <span class="ons-btn__inner">Save and sign out
              <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
                <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</header>
{% 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',
            "iconType": 'exit',
            "iconPosition": 'after'
        },
        "language": {
            "languages": [
                {
                    "url": '#0',
                    "ISOCode": 'en',
                    "text": 'English',
                    "buttonAriaLabel": 'Language selector. Current language: English',
                    "chooseLanguage": 'Choose language',
                    "current": true
                },
                {
                    "url": '#0',
                    "ISOCode": 'cy',
                    "text": 'Cymraeg',
                    "buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
                    "chooseLanguage": 'Dewiswch iaith',
                    "current": false
                }
            ]
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<Navigation> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

External survey with description

Allows for text to be added below the title by adding the ons-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.

<header class="ons-header ons-header--hero" role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <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="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <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="ons-header__main ons-header__main--with-description">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title header__title--with-description">Service title</div>
          </a>
        </div>
      </div>
      <p class="ons-header__desc">This is the description or tagline</p>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "classes": 'ons-header--hero',
        "title": 'Service title',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "desc": 'This is the description or tagline',
        "titleLogoHref": '#0'
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<Navigation> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

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.

<header class="ons-header " role="banner">
  <div class="ons-header__top">
    <div class="ons-container">
      <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__logo--large">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <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="ons-header__logo--small">
            <a class="ons-header__logo-link" href="#0">
              <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <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="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Design system</div>
          </a>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
          <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-toggle-main ons-btn--mobile ons-btn--ghost" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
            <span class="ons-btn__inner">Menu
              <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__bottom">
    <div class="ons-container ons-container--gutterless@xxs@m">
      <nav class="ons-header-nav ons-js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
        <ul class="ons-header-nav__list">
          <li class="ons-header-nav__item  ons-header-nav__item--active">
            <a class="ons-header-nav__link" href="#home">Home</a>
          </li>
          <li class="ons-header-nav__item ">
            <a class="ons-header-nav__link" href="#0">Guidance</a>
          </li>
          <li class="ons-header-nav__item ">
            <a class="ons-header-nav__link" href="#0">Foundations</a>
          </li>
          <li class="ons-header-nav__item ">
            <a class="ons-header-nav__link" href="#0">Components</a>
          </li>
          <li class="ons-header-nav__item ">
            <a class="ons-header-nav__link" href="#0">Patterns</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Design system',
        "logoHref": '#0',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "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": 'Guidance',
                    "url": '#0'
                },
                {
                    "title": 'Foundations',
                    "url": '#0'
                },
                {
                    "title": 'Components',
                    "url": '#0'
                },
                {
                    "title": 'Patterns',
                    "url": '#0'
                }
            ]
        }
    })
}}
Name Type Required Description
phase PhaseBanner (ref) false Settings for the Phase banner component
fullWidth boolean false Set the header to be the full width of the viewport
logoHref string false Path for the masthead logo link. Defaults to “/“
logo string false Path for the masthead logo. Defaults to “ons-logo-pos”
mobileLogo string false Path for the mobile version of the logo. Defaults to “ons-logo-stacked-pos”
language Language (ref) false Settings for the language selector component
serviceLinks Array<Navigation> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

<!doctype html>
<html lang="cy">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
                        <title id="ons-logo-cy-alt">Office for National Statistics logo</title>
                        <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="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
                        <title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
                        <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="ons-header__links grid__col col-auto">
                  <div class="ons-grid__col ons-col-auto">
                    <ul class="ons-language-links">
                      <li class="ons-language-links__item">
                        <a href="#0" lang="en">English</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <a class="ons-header__title-link" href="#0">
                    <div class="ons-header__title">Gwasanaeth Cymraeg</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "foundations/layout/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
            }
        ]
    }
} %}
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> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

External with Census branding

Census

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Census 2021</title>
    <link rel="stylesheet" href="/css/census.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#902082" />
    <meta name="description" content="Census 2021 is a UK wide population survey">
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="Census 2021">
    <meta property="og:image" content="/favicons/census/en/opengraph.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="Census 2021 is a UK wide population survey">
    <meta property="og:site_name" content="Census 2021">
    <meta property="og:locale" content="en">
    <meta property="og:locale:alternate" content="cy">
    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="Census 2021">
    <meta name="twitter:description" content="Census 2021 is a UK wide population survey">
    <meta name="twitter:image" content="/favicons/census/en/twitter.png">
    <!-- Canonical -->
    <link rel="canonical" href="">
    <link rel="alternate" href="#0" hreflang="en">
    <link rel="alternate" href="#0" hreflang="cy">
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/census/en/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                        <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                        <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="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                        <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                        <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="ons-header__links grid__col col-auto">
                  <div class="ons-grid__col ons-col-auto">
                    <ul class="ons-language-links">
                      <li class="ons-language-links__item">
                        <a href="#0" lang="cy">Cymraeg</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
                  <a class="ons-header__title-link" href="#0">
                    <svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
                      <title id="census-logo-en-alt">Census 2021</title>
                      <path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
                      <path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
                      <path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
                      <path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
                      <path d="M81.1,27.36Z" />
                      <path d="M129.43,27.34h0Z" />
                      <path d="M129.42,27.33Z" />
                      <path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
                      <path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
                      <path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
                      <path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
                      <path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
                      <path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
                    </svg>
                  </a>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                  <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-toggle-main ons-btn--mobile ons-btn--ghost" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
                    <span class="ons-btn__inner">Menu
                      <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                        <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__bottom">
            <div class="ons-container ons-container--gutterless@xxs@m">
              <nav class="ons-header-nav ons-js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                <ul class="ons-header-nav__list">
                  <li class="ons-header-nav__item  ons-header-nav__item--active">
                    <a class="ons-header-nav__link" href="#home">Home</a>
                  </li>
                  <li class="ons-header-nav__item ">
                    <a class="ons-header-nav__link" href="#0">About the census</a>
                  </li>
                  <li class="ons-header-nav__item ">
                    <a class="ons-header-nav__link" href="#0">Help with your census</a>
                  </li>
                  <li class="ons-header-nav__item ">
                    <a class="ons-header-nav__link" href="#0">Contact us</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "foundations/layout/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": 'cy'
            }
        ]
    },
    "header": {
        "logoHref": '#0',
        "titleLogo": 'census-logo-en',
        "mobileLogo": 'ons-logo-stacked-en',
        "titleLogoHref": '#0',
        "titleLogoAlt": 'Census 2021'
    },
    "language": {
        "allLanguagesUrl": '#0',
        "languages": [
            {
                "url": '#0',
                "ISOCode": 'en',
                "text": 'English',
                "buttonAriaLabel": 'Language selector. Current language: English',
                "chooseLanguage": 'Choose language',
                "allLanguages": 'All languages',
                "current": true
            },
            {
                "url": '#0',
                "ISOCode": 'cy',
                "text": 'Cymraeg',
                "buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
                "chooseLanguage": 'Dewiswch iaith',
                "allLanguages": 'Pob iaith',
                "current": false
            }
        ]
    },
    "navigation": {
        "id": 'main-nav',
        "ariaLabel": 'Main menu',
        "ariraListLabel": 'Navigation menu',
        "currentPath": '#home',
        "itemsList": [
            {
                "title": 'Home',
                "url": '#home'
            },
            {
                "title": 'About the census',
                "url": '#0'
            },
            {
                "title": 'Help with your census',
                "url": '#0'
            },
            {
                "title": 'Contact us',
                "url": '#0'
            }
        ]
    },
    "toggleButton": {
        "text": 'Menu',
        "ariaLabel": 'Toggle main navigation'
    }
} %}
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> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

Census Welsh

<!doctype html>
<html lang="cy">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/census.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#902082" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/census/cy/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/census/cy/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/census/cy/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/census/cy/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/census/cy/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/census/cy/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/census/cy/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
                        <title id="ons-logo-cy-alt">Office for National Statistics logo</title>
                        <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="ons-header__logo--small">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
                        <title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
                        <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="ons-header__links grid__col col-auto">
                  <div class="ons-grid__col ons-col-auto">
                    <ul class="ons-language-links">
                      <li class="ons-language-links__item">
                        <a href="#0" lang="en">English</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <a class="ons-header__title-link" href="#0">
                    <svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="242" height="44" viewBox="0 0 242 44" role="img" aria-labelledby="census-logo-cy-alt">
                      <title id="census-logo-cy-alt">Cyfrifiad 2021</title>
                      <path style="opacity:0.7" d="M623.06,494.45H611.47a4.82,4.82,0,0,1,.14-1c.61-2.44,3.08-3.71,6.08-5.05,3.46-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.6,9.6,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.2,0,1.73-.53,1.73-1.48v-.21C624.79,495,624.26,494.45,623.06,494.45Z" transform="translate(-401.34 -464)" />
                      <path style="opacity:0.7" d="M595.5,474.24c-5.86,0-9.5,4.14-9.5,10.74v2.34c0,6.6,3.57,10.7,9.5,10.7s9.54-4.17,9.54-10.78V485C605,478.34,601.44,474.24,595.5,474.24Zm5.9,13.18c0,4.81-2.12,7.53-5.9,7.53s-5.83-2.76-5.83-7.56v-2.58c0-4.81,2.12-7.56,5.83-7.56s5.9,2.82,5.9,7.63Z" transform="translate(-401.34 -464)" />
                      <path style="opacity:0.7" d="M641.29,494.49h-3.07l0-18.3a1.49,1.49,0,0,0-1.63-1.67h-1.24L628.57,479a2,2,0,0,0,1.88,2.23,2.88,2.88,0,0,0,1.87-.78c.67-.53,1.24-1.17,2.61-2.26v16.29h-3.81c-1.1,0-1.66.46-1.66,1.48v.18c0,1,.56,1.41,1.66,1.41h10.17c1.1,0,1.67-.42,1.67-1.41V496C643,495,642.39,494.49,641.29,494.49Z" transform="translate(-401.34 -464)" />
                      <path style="opacity:0.7" d="M581.72,494.45H570.13a4.26,4.26,0,0,1,.15-1c.6-2.44,3.07-3.71,6.07-5.05,3.47-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.62,9.62,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.21,0,1.74-.53,1.74-1.48v-.21C583.46,495,582.93,494.45,581.72,494.45Z" transform="translate(-401.34 -464)" />
                      <path d="M556.37,464.19a2.7,2.7,0,0,0-2.7,2.69V475a11.56,11.56,0,0,0-4-.71,11.86,11.86,0,1,0,8.67,19.92,2.63,2.63,0,0,0,.72-1.72,1.41,1.41,0,0,0,0-.2V466.88A2.7,2.7,0,0,0,556.37,464.19Zm-2.7,19.11v7.92a6.38,6.38,0,0,1-4,1.41,6.47,6.47,0,1,1,0-12.94,6.36,6.36,0,0,1,4,1.41Z" transform="translate(-401.34 -464)" />
                      <path d="M413.19,479.61a6.41,6.41,0,0,1,4.73,2.07,2.69,2.69,0,0,0,3.94-3.67,11.86,11.86,0,1,0,0,16.14,2.69,2.69,0,0,0-3.94-3.67,6.38,6.38,0,0,1-4.73,2.07,6.47,6.47,0,1,1,0-12.94Z" transform="translate(-401.34 -464)" />
                      <path d="M481.59,474.26A2.69,2.69,0,0,0,478.9,477v18.21a2.69,2.69,0,1,0,5.38,0V477A2.7,2.7,0,0,0,481.59,474.26Z" transform="translate(-401.34 -464)" />
                      <path d="M460.12,464.11a11.89,11.89,0,0,0-8.52,11.38V495a2.7,2.7,0,0,0,5.39,0V481.65h2a2.7,2.7,0,0,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.59-6.19l.07,0a2.69,2.69,0,0,0-1.53-5.16Z" transform="translate(-401.34 -464)" />
                      <path d="M531.5,474.26a2.67,2.67,0,0,0-2.13,1.05,11.86,11.86,0,1,0,0,21.45,2.7,2.7,0,0,0,4.86-1.6V477A2.7,2.7,0,0,0,531.5,474.26Zm-2.69,7.33v9.08a6.39,6.39,0,0,1-4.49,1.83,6.47,6.47,0,0,1,0-12.94,6.37,6.37,0,0,1,4.49,1.83Z" transform="translate(-401.34 -464)" />
                      <path d="M481.61,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,481.61,465.84Z" transform="translate(-401.34 -464)" />
                      <path d="M506.65,474.26A2.7,2.7,0,0,0,504,477v18.21a2.7,2.7,0,1,0,5.39,0V477A2.7,2.7,0,0,0,506.65,474.26Z" transform="translate(-401.34 -464)" />
                      <path d="M506.67,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,506.67,465.84Z" transform="translate(-401.34 -464)" />
                      <path d="M472.08,474.71a11.87,11.87,0,0,0-8.51,11.37v9a2.69,2.69,0,0,0,5.38,0v-9a6.49,6.49,0,0,1,4.6-6.19l.07,0a2.69,2.69,0,0,0-1.54-5.15Z" transform="translate(-401.34 -464)" />
                      <path d="M447.3,477a2.7,2.7,0,0,0-5.39,0v9c0,3.56-2,6.47-5.56,6.47s-5.56-2.91-5.56-6.47v-9a2.7,2.7,0,0,0-5.39,0v9c0,6.53,4.41,11.85,11,11.85a10.66,10.66,0,0,0,5.57-1.51v.16a6.48,6.48,0,0,1-4.6,6.19l-.06,0h0c-1.43.43-.9,1.93-.47,3.36a2.67,2.67,0,0,0,3.34,1.79c4.92-1.44,7.17-6,7.17-11.37V477Z" transform="translate(-401.34 -464)" />
                      <path d="M497.71,464.12a11.86,11.86,0,0,0-8.51,11.37V495a2.69,2.69,0,0,0,5.38,0V481.65h2a2.7,2.7,0,1,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.6-6.19l.07,0a2.7,2.7,0,0,0,1.8-3.36A2.67,2.67,0,0,0,497.71,464.12Z" transform="translate(-401.34 -464)" />
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "foundations/layout/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
            }
        ]
    }
} %}
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> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

Census NISRA

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ONS Design System</title>
    <link rel="stylesheet" href="/css/census.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#902082" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/census/en/manifest.json">
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-header__grid-top-nisra">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large">
                    <a class="ons-header__logo-link" href="#0">
                      <svg class="ons-nisra-svg-logo" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54">
                        <path class="ons-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="ons-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="ons-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="ons-header__logo--small">
                    <a class="ons-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="ons-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="ons-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="ons-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="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
                  <a class="ons-header__title-link" href="#0">
                    <svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
                      <title id="census-logo-en-alt">Census 2021</title>
                      <path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
                      <path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
                      <path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
                      <path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
                      <path d="M81.1,27.36Z" />
                      <path d="M129.43,27.34h0Z" />
                      <path d="M129.42,27.33Z" />
                      <path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
                      <path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
                      <path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
                      <path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
                      <path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
                      <path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
                    </svg>
                  </a>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                  <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-toggle-main ons-btn--mobile ons-btn--ghost" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
                    <span class="ons-btn__inner">Menu
                      <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                        <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__bottom">
            <div class="ons-container ons-container--gutterless@xxs@m">
              <nav class="ons-header-nav ons-js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                <ul class="ons-header-nav__list">
                  <li class="ons-header-nav__item  ons-header-nav__item--active">
                    <a class="ons-header-nav__link" href="#home">Home</a>
                  </li>
                  <li class="ons-header-nav__item ">
                    <a class="ons-header-nav__link" href="#0">About the census</a>
                  </li>
                  <li class="ons-header-nav__item ">
                    <a class="ons-header-nav__link" href="#0">Help with your census</a>
                  </li>
                  <li class="ons-header-nav__item ">
                    <a class="ons-header-nav__link" href="#0">Contact us</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "foundations/layout/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": '#home',
        "itemsList": [
            {
                "title": 'Home',
                "url": '#home'
            },
            {
                "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'
    }
} %}
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> (ref) false An array to render the service links list
title string true The title for the service
desc string false Tagline/description for the service
button Button (ref) false Settings for save and sign out using the button component
navigation Array<Navigation> (ref) true (if toggleButton supplied) An array of all navigation links
toggleButton Array<ToggleButton> (ref) 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 accommodate the logo
wide boolean false If set to true will set a wider page style by adding css to the container
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> (ref) true An array of list items to render in the navigation element
siteBasePath string false If the base path for your site is not / (i.e. in a prototype), you can use this to get the active functionality working on your Home link

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
id string false The id for the link
{% macro onsHeader(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% from "components/icons/_macro.njk" import onsIcon %}
    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}

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

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

    <header class="ons-header {{ 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="ons-header__top">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">

                    <div class="ons-grid__col ons-col-auto">
                        <div class="ons-header__logo--large">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                        <div class="ons-header__logo--small">
                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
                            {{
                                onsIcon({
                                    "iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
                                    "altText": params.logoAlt | default('Office for National Statistics logo')
                                })
                            }}
                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                        </div>
                    </div>

                    {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                        <div class="ons-header__links grid__col col-auto">
                            {% if params.language is defined and params.language %}
                                <div class="ons-grid__col ons-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="ons-grid__col col-auto ons-u-d-no@xxs@m">
                                    <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
                                                <li class="ons-header-service-nav__item">
                                                    <a
                                                        href="{{ item.url }}"
                                                        class="ons-header-service-nav__link"
                                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                    >{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
                        {% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
                            {% from "components/icons/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": params.titleLogo,
                                    "altText": params.titleLogoAlt
                                })
                            }}
                        {% else %}
                            <{{ title_tag }} class="ons-header__title{% 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="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                            {{ onsButton({
                                "text": params.button.text,
                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
                                "variants": "ghost",
                                "name": params.button.name,
                                "attributes": params.button.attributes,
                                "url": params.button.url,
                                "iconType": params.button.iconType,
                                "iconPosition": params.button.iconPosition
                            }) }}
                        </div>
                    {% endif %}
                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                <span class="ons-grid ons-u-d-no@xxs@xs">
                                    {{ onsButton({
                                        "text": "Search",
                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
                                        "variants": ["ghost", "small"],
                                        "iconType": "search",
                                        "iconPosition": "only",
                                        "attributes": {
                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
                                            "aria-controls": params.navigation.id,
                                            "aria-haspopup": "true",
                                            "aria-expanded": "false"
                                        }
                                    }) }}
                                </span>
                            {% endif %}
                            {% if params.toggleButton is defined and params.toggleButton %}
                                {{ onsButton({
                                    "text": params.toggleButton.text,
                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                    "buttonStyle": "mobile",
                                    "variants": ["mobile", "ghost"],
                                    "attributes": {
                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
                                        "aria-controls": params.navigation.id,
                                        "aria-haspopup": "true",
                                        "aria-expanded": "false"
                                    }
                                }) }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.desc is defined and params.desc %}
                    <p class="ons-header__desc">{{ params.desc }}</p>
                {% endif %}
            </div>
        </div>
        {% if params.navigation is defined and params.navigation %}
            <div class="ons-header__bottom">
                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                        <div class="ons-header-search ons-js-header-search">
                            {{ onsAutosuggest({
                                "id": "ons-autosuggest-header-search",
                                "containerClasses": "ons-autosuggest-input--header",
                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
                                "label": {
                                    "text": params.autosuggest.label,
                                    "id": "ons-autosuggest-header-search-label",
                                    "classes": "ons-label--white ons-u-pl-m"
                                },
                                "accessiblePlaceholder": true,
                                "autocomplete": "off",
                                "instructions": params.autosuggest.instructions,
                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
                                "ariaMinChars": params.autosuggest.ariaMinChars,
                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
                                "ariaOneResult": params.autosuggest.ariaOneResult,
                                "ariaNResults": params.autosuggest.ariaNResults,
                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
                                "moreResults": params.autosuggest.moreResults,
                                "resultsTitle": params.autosuggest.resultsTitle,
                                "autosuggestData": params.autosuggest.autosuggestData,
                                "noResults": params.autosuggest.noResults,
                                "typeMore": params.autosuggest.typeMore
                            }) }}
                        </div>
                    {% endif %}
                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                        <ul class="ons-header-nav__list">
                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-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="ons-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 %}
.ons-header-nav {
  position: relative;
  &__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;
  }
}

.ons-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
.ons-header {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  position: relative;
  & &__title--svg-logo {
    display: block;
    fill: $color-white;

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

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

    @include mq(xs) {
      height: 46px;
    }
  }
  &__grid-top-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 .ons-u-fs-r--b;
    @extend .ons-u-fs-xl\@xxs;

    color: $color-white;

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

    &--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 {
        .ons-header__title--svg-logo {
          fill: $color-text-link-focus;
        }
        .ons-header__title {
          color: $color-text-link-focus;
        }
      }
      &:hover {
        text-decoration: underline solid $color-text-inverse-link 2px;
      }
    }
    &--nav-adj {
      @include mq(399px) {
        padding-top: 0.2rem;
      }
    }
  }
  &__desc {
    @extend .ons-u-fs-s;
    @extend .ons-u-fs-r\@s;

    color: $color-white;
    margin: 0;

    @include mq(m) {
      margin: 0 0 1rem;
    }
  }
  // Modifier - Hero variant
  &--hero {
    .ons-header {
      &__title {
        @extend .ons-u-fs-m;
        @extend .ons-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;
    }
    &-service-nav__link {
      color: $color-white;
      &:hover {
        text-decoration: underline solid $color-white 3px;
      }
    }
  }

  .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 {
    .ons-st0 {
      fill: $color-nisra-logo-primary;
    }
    .ons-st1 {
      fill: $color-nisra-logo-secondary;
    }
    .ons-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 {
      .ons-st0 {
        fill: $color-black !important;
      }
      .ons-st1 {
        fill: $color-black !important;
      }
      .ons-st2 {
        fill: $color-black !important;
      }
    }
  }

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

  .ons-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;
  }

  &-search {
    padding: 1rem;

    @include mq(m) {
      bottom: 65px;
      padding: 0;
      position: absolute;
      right: 1rem;
      width: 20rem;
    }
  }
}

Help improve this component

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