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>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Page title</div>
</a>
</div>
</div>
</div>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Page title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0'
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
When to use this component
You should use the ONS header at the top of any ONS service.
How to use this component
Internal
The internal service variant of the header. Use the variant
parameter with the value internal
when implementing for an internal service.
<header class="ons-header ons-header--internal" role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service title</div>
</a>
</div>
</div>
</div>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Service title',
"logoHref": '#0',
"variants": 'internal',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0'
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External survey with sign out button and language toggle
The external header with language selector and save button, should be used across public facing services.
The ghost button in the header moves to the footer when the page width is under the medium breakpoint (less than 740px).
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
<div class="ons-header__links ons-grid__col ons-col-auto">
<div class="ons-grid__col ons-col-auto ">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="cy">Cymraeg</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Survey title</div>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<a href="#0" role="button" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
<span class="ons-btn__inner">Save and sign out
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
<path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Survey title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"button": {
"text": 'Save and sign out',
"url": '#0',
"iconType": 'exit',
"iconPosition": 'after'
},
"language": {
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"current": true
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"current": false
}
]
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External with navigation
For services that require a main navigation. For mobile users, the navigation will be hidden and a menu button is shown which allows the navigation menu to be open and closed.
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Design system</div>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper">
<div class="ons-container ons-container--gutterless@xxs@l">
<nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#home">Home</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Guidance</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Foundations</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Components</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Patterns</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Design system',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#home',
"itemsList": [
{
"title": 'Home',
"url": '#home'
},
{
"title": 'Guidance',
"url": '#0'
},
{
"title": 'Foundations',
"url": '#0'
},
{
"title": 'Components',
"url": '#0'
},
{
"title": 'Patterns',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main menu'
}
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External with service links
Displays links in the masthead. For mobile users, if more than one service link is used, the links will be hidden and a menu button is shown which allows the menu to be open and closed.
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
<div class="ons-header__links ons-grid__col ons-col-auto">
<div class="ons-grid__col ons-col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav ons" aria-label="Services menu">
<ul class="ons-header-service-nav__list" aria-label="Menu">
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-grid__col ons-col-auto ons-u-d-no@m">
<button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--text-link" aria-label="Toggle services menu" aria-controls="service-links" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="service-links" aria-label="Services menu">
<ul class="ons-header-service-nav__list" aria-label="Menu">
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Page title</div>
</a>
</div>
</div>
</div>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Page title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"serviceLinks": {
"id": "service-links",
"ariaLabel": 'Services menu',
"ariaListLabel": 'Menu',
"toggleServicesButton": {
"text": 'Menu',
"ariaLabel": 'Toggle services menu'
},
"itemsList": [
{
"title": "Help",
"url": "#0"
},
{
"title": "My Account",
"url": "#0"
},
{
"title": "Sign out",
"url": "#0"
}
]
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External survey with description
Allows for text to be added below the title by adding the variant description
to the header configuration. This should be used when the service would benefit from a description which informs users of what the service provides.
<header class="ons-header ons-header--description" role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service title</div>
</a>
<p class="ons-header__description">This is the description or tagline</p>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<a href="#0" role="button" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
<span class="ons-btn__inner">Save and sign out
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
<path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"variants": 'description',
"title": 'Service title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"description": 'This is the description or tagline',
"titleLogoHref": '#0',
"button": {
"text": 'Save and sign out',
"url": '#0',
"iconType": 'exit',
"iconPosition": 'after'
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External with multiple levels of navigation
For services that require multiple levels of navigation. When the viewport is below 980px, a menu button is shown which allows the sub navigation menu to be open and closed.
An additional third level can also be displayed in the mobile menu. The third level would be navigation that is presented in the left hand column of a page in desktop view but hidden on small viewports.
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service manual</div>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper">
<div class="ons-container ons-container--gutterless@xxs@l">
<nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Service standard</a>
</li>
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#design-system">Design system</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Accessibility</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Brand guidelines</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Content style guide</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@xxs@l">
<ul class="ons-navigation__list ons-navigation__list">
<li class="ons-navigation__item ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">Guidance</a>
</li>
<li class="ons-navigation__item ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">Foundations</a>
</li>
<li class="ons-navigation__item ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">Components</a>
</li>
<li class="ons-navigation__item ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link ons-navigation__link" href="#patterns">Patterns</a>
</li>
</ul>
</div>
</nav>
<div class="ons-u-d-no@l">
<button type="submit" class="ons-btn ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown" aria-label="Toggle section navigation" aria-controls="sub-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Design system
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
<nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no proto-ons-js-secondary-nav ons-u-mt-xs" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@xxs@l">
<ul class="ons-navigation__list">
<li class="ons-navigation__item">
<a class="ons-navigation__link" href="#0">Overview</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Guidance</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Foundations</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Components</a>
</li>
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#patterns">Patterns</a>
<h3 class="ons-navigation__list-header">Ask users for...</h3>
<ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
<li class="ons-navigation__item ons-list__item ons-navigation__item--active">
<a class="ons-navigation__link ons-navigation__link--section" href="#patterns">Access codes</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Addresses</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Dates</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Durations</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Email addresses</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Numeric values</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Phone numbers</a>
</li>
</ul>
<h3 class="ons-navigation__list-header">Help users to...</h3>
<ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Access support in multiple languages</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Change language</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Check answers</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Control cookies</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Correct errors</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Download resources</a>
</li>
<li class="ons-navigation__item ons-list__item ">
<a class="ons-navigation__link ons-navigation__link--section" href="#0">Extend a session</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Service manual',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#design-system',
"currentPageTitle": 'Design system',
"itemsList": [
{
"title": 'Service standard',
"url": '#0'
},
{
"title": 'Design system',
"url": '#design-system'
},
{
"title": 'Accessibility',
"url": '#0'
},
{
"title": 'Brand guidelines',
"url": '#0'
},
{
"title": 'Content style guide',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main menu'
},
"subNavigation": {
"id": 'sub-nav',
"overviewURL": '#0',
"overviewText": 'Overview',
"ariaLabel": 'Section menu',
"currentPath": '#patterns',
"itemsList": [
{
"title": 'Guidance',
"url": '#0'
},
{
"title": 'Foundations',
"url": '#0'
},
{
"title": 'Components',
"url": '#0'
},
{
"title": 'Patterns',
"url": '#patterns',
"sections": [
{
"sectionTitle": 'Ask users for...',
"children": [
{
"title": 'Access codes',
"url": '#patterns'
},
{
"title": 'Addresses',
"url": '#0'
},
{
"title": 'Dates',
"url": '#0'
},
{
"title": 'Durations',
"url": '#0'
},
{
"title": 'Email addresses',
"url": '#0'
},
{
"title": 'Numeric values',
"url": '#0'
},
{
"title": 'Phone numbers',
"url": '#0'
}
]
},
{
"sectionTitle": 'Help users to...',
"children": [
{
"title": 'Access support in multiple languages',
"url": '#0'
},
{
"title": 'Change language',
"url": '#0'
},
{
"title": 'Check answers',
"url": '#0'
},
{
"title": 'Control cookies',
"url": '#0'
},
{
"title": 'Correct errors',
"url": '#0'
},
{
"title": 'Download resources',
"url": '#0'
},
{
"title": 'Extend a session',
"url": '#0'
}
]
}
]
}
]
}
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External with Welsh logo
<!doctype html>
<html lang="cy">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONS Design System</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#206095" />
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
<title id="ons-logo-cy-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
<path d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
<path d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
<path d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
<path d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
<path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
<path d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
<path d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
<path d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
<path d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
<path d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
<path d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
<path d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
<path d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
<path d="M554.49,48.41V11.58h5.4V48.41Z" />
<path d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
<path d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
<path d="M643.63,48.41V11.58H649V48.41Z" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
<title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
<path d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
<path d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
<path d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
<path d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
<polygon points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
<path d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
<path d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
<path d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
<path d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
<path d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
<path d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
<path d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
<path d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
<path d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
<polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
<path d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
<path d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
<polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
</g>
</svg>
</a>
</div>
</div>
<div class="ons-header__links ons-grid__col ons-col-auto">
<div class="ons-grid__col ons-col-auto ">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="en">English</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Gwasanaeth Cymraeg</div>
</a>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
{% extends "layout/_template.njk" %}
{% set pageConfig = {
"header": {
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-cy',
"title": 'Gwasanaeth Cymraeg',
"titleLogoHref": '#0'
},
"language": {
"allLanguagesUrl": '#0',
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"allLanguages": 'All languages',
"current": false
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"allLanguages": 'Pob iaith',
"current": true
}
]
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
External with Census branding
Census
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Census 2021</title>
<link rel="stylesheet" href="/css/census.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#902082" />
<meta name="description" content="Census 2021 is a UK wide population survey">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="Census 2021">
<meta property="og:image" content="/favicons/census/en/opengraph.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Census 2021 is a UK wide population survey">
<meta property="og:site_name" content="Census 2021">
<meta property="og:locale" content="en">
<meta property="og:locale:alternate" content="cy">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Census 2021">
<meta name="twitter:description" content="Census 2021 is a UK wide population survey">
<meta name="twitter:image" content="/favicons/census/en/twitter.png">
<!-- Canonical -->
<link rel="canonical" href="">
<link rel="alternate" href="#0" hreflang="en">
<link rel="alternate" href="#0" hreflang="cy">
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/census/en/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</a>
</div>
</div>
<div class="ons-header__links ons-grid__col ons-col-auto">
<div class="ons-grid__col ons-col-auto ">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="cy">Cymraeg</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
<a class="ons-header__title-link" href="#0">
<svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
<title id="census-logo-en-alt">Census 2021</title>
<path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
<path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
<path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
<path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
<path d="M81.1,27.36Z" />
<path d="M129.43,27.34h0Z" />
<path d="M129.42,27.33Z" />
<path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
<path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
<path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
<path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
<path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
<path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
</svg>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper">
<div class="ons-container ons-container--gutterless@xxs@l">
<nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#home">Home</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">About the census</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Help with your census</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Contact us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
{% extends "layout/_template.njk" %}
{% set pageConfig = {
"title": 'Census 2021',
"theme": 'census',
"absoluteUrl": pageInfo.url,
"headMeta": {
"description": 'Census 2021 is a UK wide population survey',
"hrefLangs": [
{
"url": '#0',
"lang": 'en'
},
{
"url": '#0',
"lang": 'cy'
}
]
},
"header": {
"logoHref": '#0',
"titleLogo": 'census-logo-en',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"titleLogoAlt": 'Census 2021'
},
"language": {
"allLanguagesUrl": '#0',
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"allLanguages": 'All languages',
"current": true
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"allLanguages": 'Pob iaith',
"current": false
}
]
},
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#home',
"itemsList": [
{
"title": 'Home',
"url": '#home'
},
{
"title": 'About the census',
"url": '#0'
},
{
"title": 'Help with your census',
"url": '#0'
},
{
"title": 'Contact us',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main menu'
}
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
Census Welsh
<!doctype html>
<html lang="cy">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONS Design System</title>
<link rel="stylesheet" href="/css/census.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#902082" />
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/census/cy/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/census/cy/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/census/cy/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/census/cy/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/census/cy/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/census/cy/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/census/cy/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
<title id="ons-logo-cy-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
<path d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
<path d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
<path d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
<path d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
<path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
<path d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
<path d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
<path d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
<path d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
<path d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
<path d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
<path d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
<path d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
<path d="M554.49,48.41V11.58h5.4V48.41Z" />
<path d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
<path d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
<path d="M643.63,48.41V11.58H649V48.41Z" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
<title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
<g class="ons-svg-logo__group ons-svg-logo__group--secondary" fill="#a8bd3a">
<path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--primary" fill="#003c57">
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#003c57">
<path d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
<path d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
<path d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
<path d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
<path d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
<polygon points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
<path d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
<path d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
<path d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
<path d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
<path d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
<path d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
<path d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
<path d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
<path d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
<polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
<path d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
<path d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
<polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
</g>
</svg>
</a>
</div>
</div>
<div class="ons-header__links ons-grid__col ons-col-auto">
<div class="ons-grid__col ons-col-auto ">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="en">English</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="242" height="44" viewBox="0 0 242 44" role="img" aria-labelledby="census-logo-cy-alt">
<title id="census-logo-cy-alt">Cyfrifiad 2021</title>
<path style="opacity:0.7" d="M623.06,494.45H611.47a4.82,4.82,0,0,1,.14-1c.61-2.44,3.08-3.71,6.08-5.05,3.46-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.6,9.6,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.2,0,1.73-.53,1.73-1.48v-.21C624.79,495,624.26,494.45,623.06,494.45Z" transform="translate(-401.34 -464)" />
<path style="opacity:0.7" d="M595.5,474.24c-5.86,0-9.5,4.14-9.5,10.74v2.34c0,6.6,3.57,10.7,9.5,10.7s9.54-4.17,9.54-10.78V485C605,478.34,601.44,474.24,595.5,474.24Zm5.9,13.18c0,4.81-2.12,7.53-5.9,7.53s-5.83-2.76-5.83-7.56v-2.58c0-4.81,2.12-7.56,5.83-7.56s5.9,2.82,5.9,7.63Z" transform="translate(-401.34 -464)" />
<path style="opacity:0.7" d="M641.29,494.49h-3.07l0-18.3a1.49,1.49,0,0,0-1.63-1.67h-1.24L628.57,479a2,2,0,0,0,1.88,2.23,2.88,2.88,0,0,0,1.87-.78c.67-.53,1.24-1.17,2.61-2.26v16.29h-3.81c-1.1,0-1.66.46-1.66,1.48v.18c0,1,.56,1.41,1.66,1.41h10.17c1.1,0,1.67-.42,1.67-1.41V496C643,495,642.39,494.49,641.29,494.49Z" transform="translate(-401.34 -464)" />
<path style="opacity:0.7" d="M581.72,494.45H570.13a4.26,4.26,0,0,1,.15-1c.6-2.44,3.07-3.71,6.07-5.05,3.47-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.62,9.62,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.21,0,1.74-.53,1.74-1.48v-.21C583.46,495,582.93,494.45,581.72,494.45Z" transform="translate(-401.34 -464)" />
<path d="M556.37,464.19a2.7,2.7,0,0,0-2.7,2.69V475a11.56,11.56,0,0,0-4-.71,11.86,11.86,0,1,0,8.67,19.92,2.63,2.63,0,0,0,.72-1.72,1.41,1.41,0,0,0,0-.2V466.88A2.7,2.7,0,0,0,556.37,464.19Zm-2.7,19.11v7.92a6.38,6.38,0,0,1-4,1.41,6.47,6.47,0,1,1,0-12.94,6.36,6.36,0,0,1,4,1.41Z" transform="translate(-401.34 -464)" />
<path d="M413.19,479.61a6.41,6.41,0,0,1,4.73,2.07,2.69,2.69,0,0,0,3.94-3.67,11.86,11.86,0,1,0,0,16.14,2.69,2.69,0,0,0-3.94-3.67,6.38,6.38,0,0,1-4.73,2.07,6.47,6.47,0,1,1,0-12.94Z" transform="translate(-401.34 -464)" />
<path d="M481.59,474.26A2.69,2.69,0,0,0,478.9,477v18.21a2.69,2.69,0,1,0,5.38,0V477A2.7,2.7,0,0,0,481.59,474.26Z" transform="translate(-401.34 -464)" />
<path d="M460.12,464.11a11.89,11.89,0,0,0-8.52,11.38V495a2.7,2.7,0,0,0,5.39,0V481.65h2a2.7,2.7,0,0,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.59-6.19l.07,0a2.69,2.69,0,0,0-1.53-5.16Z" transform="translate(-401.34 -464)" />
<path d="M531.5,474.26a2.67,2.67,0,0,0-2.13,1.05,11.86,11.86,0,1,0,0,21.45,2.7,2.7,0,0,0,4.86-1.6V477A2.7,2.7,0,0,0,531.5,474.26Zm-2.69,7.33v9.08a6.39,6.39,0,0,1-4.49,1.83,6.47,6.47,0,0,1,0-12.94,6.37,6.37,0,0,1,4.49,1.83Z" transform="translate(-401.34 -464)" />
<path d="M481.61,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,481.61,465.84Z" transform="translate(-401.34 -464)" />
<path d="M506.65,474.26A2.7,2.7,0,0,0,504,477v18.21a2.7,2.7,0,1,0,5.39,0V477A2.7,2.7,0,0,0,506.65,474.26Z" transform="translate(-401.34 -464)" />
<path d="M506.67,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,506.67,465.84Z" transform="translate(-401.34 -464)" />
<path d="M472.08,474.71a11.87,11.87,0,0,0-8.51,11.37v9a2.69,2.69,0,0,0,5.38,0v-9a6.49,6.49,0,0,1,4.6-6.19l.07,0a2.69,2.69,0,0,0-1.54-5.15Z" transform="translate(-401.34 -464)" />
<path d="M447.3,477a2.7,2.7,0,0,0-5.39,0v9c0,3.56-2,6.47-5.56,6.47s-5.56-2.91-5.56-6.47v-9a2.7,2.7,0,0,0-5.39,0v9c0,6.53,4.41,11.85,11,11.85a10.66,10.66,0,0,0,5.57-1.51v.16a6.48,6.48,0,0,1-4.6,6.19l-.06,0h0c-1.43.43-.9,1.93-.47,3.36a2.67,2.67,0,0,0,3.34,1.79c4.92-1.44,7.17-6,7.17-11.37V477Z" transform="translate(-401.34 -464)" />
<path d="M497.71,464.12a11.86,11.86,0,0,0-8.51,11.37V495a2.69,2.69,0,0,0,5.38,0V481.65h2a2.7,2.7,0,1,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.6-6.19l.07,0a2.7,2.7,0,0,0,1.8-3.36A2.67,2.67,0,0,0,497.71,464.12Z" transform="translate(-401.34 -464)" />
</svg>
</a>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
{% extends "layout/_template.njk" %}
{% set pageConfig = {
"theme": 'census',
"header": {
"logoHref": '#0',
"titleLogo": 'census-logo-cy',
"mobileLogo": 'ons-logo-stacked-cy',
"titleLogoAlt": 'Cyfrifiad 2021',
"titleLogoHref": '#0'
},
"language": {
"allLanguagesUrl": '#0',
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"allLanguages": 'All languages',
"current": false
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"allLanguages": 'Pob iaith',
"current": true
}
]
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
Census NISRA
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONS Design System</title>
<link rel="stylesheet" href="/css/census.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#902082" />
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/census/en/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-header__grid-top-tall">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo ons-svg-logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54">
<title id="nisra-logo-alt">Northern Ireland Statistics and Research Agency logo</title>
<g class="ons-svg-logo__group" fill="#3d7cc9">
<path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" />
</g>
<g class="ons-svg-logo__group" fill="#cddb00">
<path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" />
</g>
<g class="ons-svg-logo__group" fill="#00205c">
<path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#00205c">
<path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1 c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2 c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4 c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo ons-svg-logo-tall" xmlns="http://www.w3.org/2000/svg" width="107" height="35" viewBox="0 0 170 54">
<title id="nisra-logo-alt">Northern Ireland Statistics and Research Agency logo</title>
<g class="ons-svg-logo__group" fill="#3d7cc9">
<path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" />
</g>
<g class="ons-svg-logo__group" fill="#cddb00">
<path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" />
</g>
<g class="ons-svg-logo__group" fill="#00205c">
<path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#00205c">
<path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1
c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2
c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4
c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2
z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z
M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
<a class="ons-header__title-link" href="#0">
<svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
<title id="census-logo-en-alt">Census 2021</title>
<path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
<path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
<path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
<path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
<path d="M81.1,27.36Z" />
<path d="M129.43,27.34h0Z" />
<path d="M129.42,27.33Z" />
<path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
<path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
<path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
<path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
<path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
<path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
</svg>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper">
<div class="ons-container ons-container--gutterless@xxs@l">
<nav class="ons-navigation ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#home">Home</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">About the census</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Help with your census</a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0">Contact us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
{% extends "layout/_template.njk" %}
{% set pageConfig = {
"theme": 'census',
"header": {
"logo": "nisra-logo-en",
"mobileLogo": "nisra-logo-en-mobile",
"logoAlt": "Northern Ireland Statistics and Research Agency logo",
"logoHref": "#0",
"customHeaderLogo": true,
"titleLogo": "census-logo-en",
"titleLogoAlt": "Census 2021",
"titleLogoHref": '#0'
},
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#home',
"itemsList": [
{
"title": 'Home',
"url": '#home'
},
{
"title": 'About the census',
"url": '#0'
},
{
"title": 'Help with your census',
"url": '#0'
},
{
"title": 'Contact us',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main menu'
}
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
Northern Ireland Department of Finance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONS Design System</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#206095" />
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-header__grid-top-tall">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large"><a class="ons-header__logo-link" href="https://www.finance-ni.gov.uk/">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="296" height="56" viewBox="0 0 592 112" aria-labelledby="ni-finance-logo-alt">
<title id="ni-finance-logo-alt">Northern Ireland Department of Finance logo</title>
<g class="ons-svg-logo__group" fill="#001f5b">
<path d="M148.45 28.94H116.8v1.86h5.42v40.32h-5.42V73h18.38v-1.77h-5.42V51.76h1.78c5.76 0 6.72 1 7.18 8.38v.34h1.44V41.89h-1.44v.24c-.16 5.49-1 7-4.14 7.61a42.89 42.89 0 0 1-4.8.26V31h3.72a40.34 40.34 0 0 1 6.95.18 7.33 7.33 0 0 1 4.05 2.36c1.6 1.78 2.36 3.64 3.29 8v.26h1.43Z" />
<path d="M159.95 46.86h-10.89v1.96h4.38v22.51h-4.38v1.85h15.23v-1.85h-4.34V46.86zM156.58 37.81a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.93-4.06h-.13a3.81 3.81 0 0 0-3.9 3.74v.08a1.71 1.71 0 0 0 0 .32 3.82 3.82 0 0 0 3.67 4ZM192.64 57.1c0-5-.35-6.52-1.95-8.2a10.63 10.63 0 0 0-14.9.92V47H165v1.9h4.48v22.4H165v1.85h14.8v-1.82h-3.9v-7.55c0-7.78.33-10.74 1.6-12.5a5.68 5.68 0 0 1 4.48-2.46 4 4 0 0 1 3.02 1.34c1 1.26 1.27 3.47 1.27 11.33v9.84h-4.07v1.85h14.9v-1.85h-4.48ZM223.15 70.4c-1.18 1-1.28 1-1.68 1-1.12 0-1.18 0-1.18-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.09h.1a3 3 0 0 0 3.06-2.83v-.27a3.1 3.1 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.36-2.46 4.65-2.46a4.37 4.37 0 0 1 3.3 1.18c.67.77.85 1.28.85 5.09v4.25c-10 .24-15.48 3.38-15.48 9 0 3.91 2.87 6.52 7.28 6.52a10.15 10.15 0 0 0 8.36-4.48 5.26 5.26 0 0 0 5.6 4.46 6.9 6.9 0 0 0 4.8-2l.16-.19-1.17-1.43Zm-9.29-10.24v1a15.47 15.47 0 0 1-.85 6.4 5.13 5.13 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.73-3.23v-.07a3.31 3.31 0 0 1 0-.77c0-4 2.78-6 9.06-6.29ZM252.91 57.1c0-5-.33-6.52-1.93-8.2a10.52 10.52 0 0 0-14.84.92V47h-10.91v1.9h4.48v22.4h-4.48v1.85H240v-1.82h-3.94v-7.55c0-7.78.34-10.74 1.6-12.5a5.65 5.65 0 0 1 4.48-2.46 3.94 3.94 0 0 1 3 1.34c1 1.26 1.28 3.47 1.28 11.33v9.84h-4v1.85h14.8v-1.85H253ZM280 64.53c-1.6 4.8-4.48 7.28-8.46 7.28a5.5 5.5 0 0 1-4.32-1.76c-1-1.28-1.35-3.2-1.35-8 0-11.76 1.76-13.62 6.08-13.62 2.11 0 4.24 1 4.24 1.7l-.17.25a5.61 5.61 0 0 0-1.35 3.2A3.21 3.21 0 0 0 277.6 57h.27a3.37 3.37 0 0 0 3.41-3.34 1.7 1.7 0 0 0 0-.45c0-3.65-4.48-6.94-9.3-6.94a13.8 13.8 0 0 0-13.61 14 13.57 13.57 0 0 0 12.8 13.62c5.25 0 8.72-2.87 11.2-9.14l.16-.43h-2.24ZM305.2 64.19c-1.18 4.8-4.48 7.54-8.45 7.54a5.45 5.45 0 0 1-5-2.69c-.77-1.38-.85-2.62-.85-9.07v-1.73h17v-.34c-.51-7.1-5.07-11.66-11.76-11.66s-12.6 6.5-12.6 13.86 6.09 13.82 12.8 13.82a11.21 11.21 0 0 0 11.2-9.6V64h-2.24Zm-14.4-7.85v-1.19c0-4.91 1.38-6.72 5.09-6.72a3.79 3.79 0 0 1 4 2.37 13.51 13.51 0 0 1 .51 5.58ZM47.95 84l-12-6.94V63.01l12-7.01 12.02 7.01v14.05L47.95 84zM47.95 112l-12-6.94V91.01l12-7.01 12.02 7.01v14.05L47.95 112zM24.02 42.05 12 35.01V20.99l12.02-6.94 11.93 6.94v14.02l-11.93 7.04zM24.02 70.05 12 63.01V49.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04z" />
<path d="M24.02 98.05 12 91.01V77.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04zM0 56V28l12 7.01v14.05L0 56zM0 84V56l12 7.01v14.05L0 84z" />
</g>
<g class="ons-svg-logo__group" fill="#8b9064">
<path d="m47.95 28-12-7.01V7.01l12-7.01 12.02 7.01v13.98L47.95 28zM47.95 56l-12-6.94V35.01l12-7.01 12.02 7.01v14.05L47.95 56zM72 42.05l-12.03-7.04V20.99L72 14.05l12 6.94v14.02l-12 7.04z" />
<path d="m72 70.05-12.03-7.04V49.06L72 42.05l12 7.01v13.95l-12 7.04zM72 98.05l-12.03-7.04V77.06L72 70.05l12 7.01v13.95l-12 7.04zM96 56l-12-6.94V35.01L96 28v28zM96 84l-12-6.94V63.01L96 56v28z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#001f5b">
<path d="M126.11 1.6H121v15.06h5.66a5.48 5.48 0 0 0 4.48-2.24 8.14 8.14 0 0 0 1.7-5.33A8.21 8.21 0 0 0 131 3.81a5.93 5.93 0 0 0-4.89-2.21Zm-2.91 1.78h3a4.2 4.2 0 0 1 3.63 1.71A7 7 0 0 1 130.86 9a7.33 7.33 0 0 1-1.18 4.32 4.25 4.25 0 0 1-3.57 1.6h-2.91ZM144.24 11.2a6.7 6.7 0 0 0-1.38-4.48 4.55 4.55 0 0 0-3.53-1.6 5.31 5.31 0 0 0-3.75 1.6 6 6 0 0 0-1.42 4.48 6.4 6.4 0 0 0 1.42 4.24 4.73 4.73 0 0 0 3.75 1.6 5.25 5.25 0 0 0 3-.91 4.42 4.42 0 0 0 1.67-2.37l-1.76-.34a3 3 0 0 1-2.9 2.12 3.4 3.4 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-8-1.34a3.76 3.76 0 0 1 .91-2.24 2.94 2.94 0 0 1 2.24-1 2.77 2.77 0 0 1 1.6.51 3.17 3.17 0 0 1 .95 1.2 8.74 8.74 0 0 1 .33 1.6ZM151.33 5.15A3.75 3.75 0 0 0 148 7.39v-1.9h-1.69v14.89h1.85v-5.15a3.62 3.62 0 0 0 3.2 1.78 3.87 3.87 0 0 0 3.2-1.6 6.64 6.64 0 0 0 1.3-4.21 7 7 0 0 0-1.25-4.26 3.91 3.91 0 0 0-3.28-1.79Zm-.33 1.7A2.25 2.25 0 0 1 153 8a5.44 5.44 0 0 1 .77 3.2 4.84 4.84 0 0 1-.84 3.3 2.48 2.48 0 0 1-3.48.41 2 2 0 0 1-.26-.24 3.1 3.1 0 0 1-1-2V9.44a4.08 4.08 0 0 1 1-1.87 2.9 2.9 0 0 1 1.81-.72ZM166.4 14.4V9.81a5 5 0 0 0-1-3.55 4.42 4.42 0 0 0-3.31-1c-2.86 0-4.48 1-4.91 3.2l1.79.33c.26-1.28 1.26-1.95 3-1.95a3.42 3.42 0 0 1 1.6.34 2 2 0 0 1 .85.85 7.5 7.5 0 0 1 .19 1.77h-1.41a8.16 8.16 0 0 0-4.9 1.09 3.56 3.56 0 0 0-1.44 2.8 3.4 3.4 0 0 0 1 2.46 4 4 0 0 0 2.9 1 3.92 3.92 0 0 0 3.81-2.24 4.9 4.9 0 0 0 .14 1.71h1.87a10.3 10.3 0 0 1-.18-2.22Zm-5.23 1a2.43 2.43 0 0 1-1.71-.51 1.59 1.59 0 0 1-.58-1.35 1.91 1.91 0 0 1 1.12-1.78 6.33 6.33 0 0 1 3.2-.67 10.68 10.68 0 0 1 1.6 0v.69a3.75 3.75 0 0 1-1.28 2.62 3 3 0 0 1-2.37 1.07ZM174.16 5.15a2.73 2.73 0 0 0-1.6.61 4.49 4.49 0 0 0-1.44 2V5.54h-1.7v11.2h1.78v-6a4 4 0 0 1 1-2.75 2.85 2.85 0 0 1 2.24-1h.4V5.25a2 2 0 0 0-.68-.1ZM180.8 15.47c-1.1 0-1.71-.51-1.71-1.6V7h2.46V5.41h-2.35V2.53l-1.78.17v2.79h-1.93v1.6h1.93v6.4a3 3 0 0 0 2.44 3.37 2.48 2.48 0 0 0 .86 0 10.68 10.68 0 0 0 1.6 0v-1.48a12.79 12.79 0 0 1-1.52.09ZM197.12 5.84a3.62 3.62 0 0 0-2-.69 3.76 3.76 0 0 0-3.47 2.47 3.34 3.34 0 0 0-1-1.7 3.21 3.21 0 0 0-2.24-.77 3.79 3.79 0 0 0-3.3 2.24v-1.9h-1.39v11.2h1.79V10a3.21 3.21 0 0 1 .77-2.24 2.19 2.19 0 0 1 3-.66 1.64 1.64 0 0 1 .33.26 2.55 2.55 0 0 1 .67 1.92v7.42h1.86v-6.28a4.06 4.06 0 0 1 .86-2.71 2.48 2.48 0 0 1 1.85-.86 2 2 0 0 1 1.19.43 1.75 1.75 0 0 1 .67.91 6.67 6.67 0 0 1 .19 1.6v7h1.86v-7a9.87 9.87 0 0 0-.26-2.24 4.2 4.2 0 0 0-1.38-1.71ZM210.56 11.2a6.77 6.77 0 0 0-1.34-4.48 4.49 4.49 0 0 0-3.57-1.6 5.2 5.2 0 0 0-3.71 1.6 6 6 0 0 0-1.36 4.48 6.28 6.28 0 0 0 1.42 4.24 4.66 4.66 0 0 0 3.73 1.6 5.25 5.25 0 0 0 3-.91 4.45 4.45 0 0 0 1.79-2.42l-1.79-.33a2.92 2.92 0 0 1-2.87 2.11 3.35 3.35 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-7.86-1.34a3.71 3.71 0 0 1 .92-2.24 2.84 2.84 0 0 1 3.74-.44 3 3 0 0 1 .91 1.2 5.94 5.94 0 0 1 .34 1.6ZM220 5.84a3.75 3.75 0 0 0-2.12-.69 3.87 3.87 0 0 0-3.37 2.24V5.6h-1.71v11.2h1.86v-6.22a4 4 0 0 1 .83-2.72 2.71 2.71 0 0 1 2.11-1 2.07 2.07 0 0 1 1.6.59 2.81 2.81 0 0 1 .61 2.16v7.18h1.77v-6.4a7.22 7.22 0 0 0-.33-2.88A2.72 2.72 0 0 0 220 5.84ZM228.24 15.47c-1.1 0-1.71-.51-1.71-1.6V7H229V5.41h-2.46V2.53l-1.76.17v2.79h-2v1.6h2v6.4a2.93 2.93 0 0 0 2.43 3.33 3.1 3.1 0 0 0 .86 0 14.23 14.23 0 0 0 1.6 0v-1.49a9.62 9.62 0 0 1-1.43.14ZM240.48 5.15a4.69 4.69 0 0 0-3.62 1.6 6.2 6.2 0 0 0-1.44 4.25 7.06 7.06 0 0 0 1.25 4.24 4.56 4.56 0 0 0 3.67 1.68 4.74 4.74 0 0 0 3.82-1.68A6.62 6.62 0 0 0 245.6 11a6.34 6.34 0 0 0-1.34-4.15 4.55 4.55 0 0 0-3.78-1.7Zm0 10.24a2.67 2.67 0 0 1-2.08-1 5.13 5.13 0 0 1-.94-3.39 5 5 0 0 1 .84-3.2 2.73 2.73 0 0 1 2.12-1 2.85 2.85 0 0 1 2.24 1 5.1 5.1 0 0 1 .8 3.42 5 5 0 0 1-.84 3.3 2.88 2.88 0 0 1-2.2.89ZM252.8 1.44a10.71 10.71 0 0 0-1.6-.16 4 4 0 0 0-2.46.75c-.68.5-1 1.6-1 3.39h-1.86V7h1.86v9.6h1.87V7h2.61V5.42h-2.62v-.27a2.23 2.23 0 0 1 .51-1.77 2.13 2.13 0 0 1 1.6-.52 4.63 4.63 0 0 1 1 .18v-1.6ZM353.09 2h-2.24l-4.8 15h1.79l1.34-4.32h5.43l1.6 4.4h2.11L353.17 2Zm.83 9.2h-4.48l2.24-6.72ZM366.62 6.22a3.66 3.66 0 0 0-2.12-.68 3.91 3.91 0 0 0-3.4 2.12V5.87h-1.85v11.2h1.85V11a4.11 4.11 0 0 1 .9-2.76 2.74 2.74 0 0 1 2.13-1 2.11 2.11 0 0 1 1.52.59 3 3 0 0 1 .67 2.24v7.08H368v-6.53a7.22 7.22 0 0 0-.34-2.88 2.73 2.73 0 0 0-1.04-1.52ZM386.5 8.58a4.71 4.71 0 0 0 .7-2.18 4.33 4.33 0 0 0-1.2-2.86 4.81 4.81 0 0 0-3.62-1.41h-5.92v15h1.95v-6.51h4.15l2.75 6.4h2.11l-3-6.94a3.37 3.37 0 0 0 2.08-1.5Zm-8.12-4.72h4a3 3 0 0 1 2 .67 2.24 2.24 0 0 1 .77 1.76 2.68 2.68 0 0 1-.77 2 3 3 0 0 1-2.24.77h-3.84ZM393.6 5.62a4.8 4.8 0 0 0-3.6 1.6 6.45 6.45 0 0 0-1.44 4.24 6.87 6.87 0 0 0 1.33 4.2 4.31 4.31 0 0 0 3.63 1.6 4.61 4.61 0 0 0 3.67-1.6 6.39 6.39 0 0 0 1.45-4.24 6 6 0 0 0-1.36-4.14 4.3 4.3 0 0 0-3.68-1.66Zm0 10.16a2.68 2.68 0 0 1-2.1-1 5 5 0 0 1-.86-3.39 4.9 4.9 0 0 1 .86-3.2 2.6 2.6 0 0 1 2.1-1 2.71 2.71 0 0 1 2.11 1 4.93 4.93 0 0 1 .85 3.31 4.78 4.78 0 0 1-.85 3.3 2.83 2.83 0 0 1-2.19.91ZM400.53 5.87h1.86v11.15h-1.86zM400.46 2h2.03v2.11h-2.03zM412.62 6.22a3.55 3.55 0 0 0-2.09-.68 3.85 3.85 0 0 0-3.39 2.12V5.87h-1.7v11.2h1.89V11a4 4 0 0 1 .81-2.72 2.77 2.77 0 0 1 2.24-1 2.13 2.13 0 0 1 1.6.59 2.91 2.91 0 0 1 .68 2.24v7.08h1.74v-6.57a8.05 8.05 0 0 0-.34-2.88 2.66 2.66 0 0 0-1.44-1.52ZM425.6 7.74a3.58 3.58 0 0 0-3.3-2.12 3.78 3.78 0 0 0-3.37 2.24v-1.8h-1.79v11.2h1.74V11a4.05 4.05 0 0 1 .85-2.7 2.69 2.69 0 0 1 2.24-1 2 2 0 0 1 1.52.57 2.83 2.83 0 0 1 .67 2.24v7.09h1.78v-6.58a8.05 8.05 0 0 0-.34-2.88ZM387.2 38.29a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.88-4.05h-.1a4 4 0 0 0 0 8ZM390.56 47.25h-10.93v1.85h4.48v22.58h-8.37L361.6 29.23h-2.24l-14.91 42.45h-3.2v1.92h11.2v-1.92h-5.59l4.05-12.19h12.8l4 12.19h-5.57v1.92H395v-1.92h-4.48ZM362.88 57.6h-11.2l5.73-16.94ZM413.49 46.66c-2.88 0-5.09 1.85-6.87 5.66v-5.07h-10.91v1.85h4.48v22.58h-4.48v1.92h15.23v-1.92h-4.32v-5.82c0-7.62.68-11.2 2.53-14.56.61-1 1.28-1.6 1.6-1.6s.26 0 .35.68c.16 2.53 1.17 3.81 3.2 3.81a3.45 3.45 0 0 0 3.57-3.33v-.32a4 4 0 0 0-4.05-4ZM440.21 49.6s.27 0 .41.85a2.24 2.24 0 0 0 2.23 2.25h.24a2.68 2.68 0 0 0 2.69-2.65v-.27a3.2 3.2 0 0 0-3.2-3.2h-.32a6.38 6.38 0 0 0-4.48 2.52 11.25 11.25 0 0 0-7.38-2.52c-6.1 0-10.66 4-10.66 9.6a9 9 0 0 0 3.88 7.36c-3.72 2.54-5.59 5.23-5.59 8.2a5.94 5.94 0 0 0 4.37 5.7 6.28 6.28 0 0 0-4.48 5.84c0 4.48 5.49 8.11 12.24 8.11 8 0 14-5.25 14-12.43 0-5.33-2.24-7.34-8-7.34l-10.92.16c-3.2 0-3.81-.77-3.81-2.12s1.45-3.29 4.16-5a10.42 10.42 0 0 0 5 1c6.1 0 10.76-3.87 10.76-9.12a10.13 10.13 0 0 0-2-6c.36-.83.52-.94.86-.94Zm-9.81 14c-3 0-3.81-1.28-3.81-5.84 0-8.55.59-9.22 4-9.22 3 0 3.81.59 3.81 6.4 0 4.8-.18 6.18-.67 7.09a3.77 3.77 0 0 1-3.33 1.54Zm-.24 25.6c-4.66 0-7.78-2.63-7.78-6.59a6.75 6.75 0 0 1 2-4.8h.27a21.91 21.91 0 0 0 3.71.17h3.4a18.58 18.58 0 0 0 2.36 0H438c2.87 0 3.39.83 3.39 2.45-.06 4.83-5 8.8-11.26 8.8Z" />
<path d="M469.73 58.58v-.34c-.5-7.1-5.06-11.66-11.76-11.66s-12.59 6.51-12.59 13.85 6.09 13.81 12.8 13.81a11.21 11.21 0 0 0 11.2-9.6v-.34h-2.24v.24c-1.19 4.8-4.48 7.54-8.45 7.54a5.43 5.43 0 0 1-5-2.69c-.76-1.37-.85-2.65-.85-9v-1.6h16.91Zm-11.92-9.91a3.76 3.76 0 0 1 4 2.39 12.92 12.92 0 0 1 .51 5.56h-9.6v-1.18c0-4.91 1.37-6.77 5.09-6.77ZM496.48 70.77c-1.2 1-1.28 1-1.71 1-1.09 0-1.19 0-1.19-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.68 0-10.57 3.2-10.57 6.94a3 3 0 0 0 2.93 3.1h.09a2.92 2.92 0 0 0 3-2.81.71.71 0 0 0 0-.29 3.18 3.18 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.37-2.46 4.64-2.46a4.37 4.37 0 0 1 3.32 1.18c.67.77.84 1.28.84 5.09v4.23c-10 .25-15.5 3.39-15.5 9 0 3.9 2.9 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.23 5.23 0 0 0 5.57 4.48 6.87 6.87 0 0 0 4.8-2l.16-.18-1.2-1.42Zm-9.39-10.29v1a15.15 15.15 0 0 1-.85 6.4 5.16 5.16 0 0 1-4.48 2.94 3.5 3.5 0 0 1-3.76-3.2 3 3 0 0 1 0-.73c0-4.17 2.82-6.09 9.09-6.41ZM524.16 29.33h-10.91v1.85h4.48v20.16a8.42 8.42 0 0 0-7.52-4.48c-6 0-11.2 6.24-11.2 13.68s5.17 14 11.42 14a8.32 8.32 0 0 0 7.28-4.48v4h10.82v-1.92h-4.37Zm-13.44 42.86a4 4 0 0 1-3.47-2.19c-.67-1.34-.85-2.7-.85-8.62 0-6.72.27-9.23.94-10.58a4.18 4.18 0 0 1 3.28-2c3.91 0 6.72 4.91 6.72 11.76s-2.76 11.63-6.62 11.63ZM554.5 70.77c-1.2 1-1.27 1-1.68 1-1.11 0-1.2 0-1.2-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.1h.09a2.94 2.94 0 0 0 3.1-2.77v-.33a3.18 3.18 0 0 0-1-2.24c-.27-.34-.27-.34-.27-.5 0-1 2.38-2.46 4.66-2.46a4.39 4.39 0 0 1 3.29 1.18c.71.77.85 1.28.85 5.09v4.23c-10 .25-15.47 3.39-15.47 9 0 3.9 2.86 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.21 5.21 0 0 0 5.57 4.48 6.69 6.69 0 0 0 4.8-2l.18-.18-1.19-1.42Zm-9.4-10.29v1a15 15 0 0 1-.84 6.4 5.12 5.12 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.75-3.2 5 5 0 0 1 0-.77c-.03-4.13 2.82-6.05 9.07-6.37ZM564.05 38.29a4.12 4.12 0 0 0 4-4 4 4 0 0 0-4-4.05H564a3.8 3.8 0 0 0-4 3.61 1.48 1.48 0 0 0 0 .42 4 4 0 0 0 3.94 4ZM567.44 47.25h-10.82v1.93h4.29V71.7h-4.29v1.93h15.14V71.7h-4.32V47.25zM582.58 56.38c-5.24-.94-6.18-1.71-6.18-3.47a4.88 4.88 0 0 1 5.42-4.24 7.12 7.12 0 0 1 7.09 6.27v.26h1.6l-.25-8.29h-1.46l-.94 2a9.64 9.64 0 0 0-6.16-2.24 8 8 0 0 0-8.23 7.77V55c0 5.23 2.37 7.44 9.14 8.62 5 .76 5.92 2 5.92 3.88a5.15 5.15 0 0 1-5.48 4.8h-.19c-4.14 0-6.52-2.53-8.11-8.72v-.24h-1.44l.16 10.38h1.19l1.44-1.94a9.79 9.79 0 0 0 6.84 2.61 8.72 8.72 0 0 0 8.71-8.73V65c-.02-5-2.53-7.53-9.07-8.62ZM323.46 0h2.24v90.67h-2.24z" />
</g>
</svg>
</a></div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="https://www.finance-ni.gov.uk/">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="184" height="35" viewBox="0 0 592 112" aria-labelledby="ni-finance-logo-alt">
<title id="ni-finance-logo-alt">Northern Ireland Department of Finance logo</title>
<g class="ons-svg-logo__group" fill="#001f5b">
<path d="M148.45 28.94H116.8v1.86h5.42v40.32h-5.42V73h18.38v-1.77h-5.42V51.76h1.78c5.76 0 6.72 1 7.18 8.38v.34h1.44V41.89h-1.44v.24c-.16 5.49-1 7-4.14 7.61a42.89 42.89 0 0 1-4.8.26V31h3.72a40.34 40.34 0 0 1 6.95.18 7.33 7.33 0 0 1 4.05 2.36c1.6 1.78 2.36 3.64 3.29 8v.26h1.43Z" />
<path d="M159.95 46.86h-10.89v1.96h4.38v22.51h-4.38v1.85h15.23v-1.85h-4.34V46.86zM156.58 37.81a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.93-4.06h-.13a3.81 3.81 0 0 0-3.9 3.74v.08a1.71 1.71 0 0 0 0 .32 3.82 3.82 0 0 0 3.67 4ZM192.64 57.1c0-5-.35-6.52-1.95-8.2a10.63 10.63 0 0 0-14.9.92V47H165v1.9h4.48v22.4H165v1.85h14.8v-1.82h-3.9v-7.55c0-7.78.33-10.74 1.6-12.5a5.68 5.68 0 0 1 4.48-2.46 4 4 0 0 1 3.02 1.34c1 1.26 1.27 3.47 1.27 11.33v9.84h-4.07v1.85h14.9v-1.85h-4.48ZM223.15 70.4c-1.18 1-1.28 1-1.68 1-1.12 0-1.18 0-1.18-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.09h.1a3 3 0 0 0 3.06-2.83v-.27a3.1 3.1 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.36-2.46 4.65-2.46a4.37 4.37 0 0 1 3.3 1.18c.67.77.85 1.28.85 5.09v4.25c-10 .24-15.48 3.38-15.48 9 0 3.91 2.87 6.52 7.28 6.52a10.15 10.15 0 0 0 8.36-4.48 5.26 5.26 0 0 0 5.6 4.46 6.9 6.9 0 0 0 4.8-2l.16-.19-1.17-1.43Zm-9.29-10.24v1a15.47 15.47 0 0 1-.85 6.4 5.13 5.13 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.73-3.23v-.07a3.31 3.31 0 0 1 0-.77c0-4 2.78-6 9.06-6.29ZM252.91 57.1c0-5-.33-6.52-1.93-8.2a10.52 10.52 0 0 0-14.84.92V47h-10.91v1.9h4.48v22.4h-4.48v1.85H240v-1.82h-3.94v-7.55c0-7.78.34-10.74 1.6-12.5a5.65 5.65 0 0 1 4.48-2.46 3.94 3.94 0 0 1 3 1.34c1 1.26 1.28 3.47 1.28 11.33v9.84h-4v1.85h14.8v-1.85H253ZM280 64.53c-1.6 4.8-4.48 7.28-8.46 7.28a5.5 5.5 0 0 1-4.32-1.76c-1-1.28-1.35-3.2-1.35-8 0-11.76 1.76-13.62 6.08-13.62 2.11 0 4.24 1 4.24 1.7l-.17.25a5.61 5.61 0 0 0-1.35 3.2A3.21 3.21 0 0 0 277.6 57h.27a3.37 3.37 0 0 0 3.41-3.34 1.7 1.7 0 0 0 0-.45c0-3.65-4.48-6.94-9.3-6.94a13.8 13.8 0 0 0-13.61 14 13.57 13.57 0 0 0 12.8 13.62c5.25 0 8.72-2.87 11.2-9.14l.16-.43h-2.24ZM305.2 64.19c-1.18 4.8-4.48 7.54-8.45 7.54a5.45 5.45 0 0 1-5-2.69c-.77-1.38-.85-2.62-.85-9.07v-1.73h17v-.34c-.51-7.1-5.07-11.66-11.76-11.66s-12.6 6.5-12.6 13.86 6.09 13.82 12.8 13.82a11.21 11.21 0 0 0 11.2-9.6V64h-2.24Zm-14.4-7.85v-1.19c0-4.91 1.38-6.72 5.09-6.72a3.79 3.79 0 0 1 4 2.37 13.51 13.51 0 0 1 .51 5.58ZM47.95 84l-12-6.94V63.01l12-7.01 12.02 7.01v14.05L47.95 84zM47.95 112l-12-6.94V91.01l12-7.01 12.02 7.01v14.05L47.95 112zM24.02 42.05 12 35.01V20.99l12.02-6.94 11.93 6.94v14.02l-11.93 7.04zM24.02 70.05 12 63.01V49.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04z" />
<path d="M24.02 98.05 12 91.01V77.06l12.02-7.01 11.93 7.01v13.95l-11.93 7.04zM0 56V28l12 7.01v14.05L0 56zM0 84V56l12 7.01v14.05L0 84z" />
</g>
<g class="ons-svg-logo__group" fill="#8b9064">
<path d="m47.95 28-12-7.01V7.01l12-7.01 12.02 7.01v13.98L47.95 28zM47.95 56l-12-6.94V35.01l12-7.01 12.02 7.01v14.05L47.95 56zM72 42.05l-12.03-7.04V20.99L72 14.05l12 6.94v14.02l-12 7.04z" />
<path d="m72 70.05-12.03-7.04V49.06L72 42.05l12 7.01v13.95l-12 7.04zM72 98.05l-12.03-7.04V77.06L72 70.05l12 7.01v13.95l-12 7.04zM96 56l-12-6.94V35.01L96 28v28zM96 84l-12-6.94V63.01L96 56v28z" />
</g>
<g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#001f5b">
<path d="M126.11 1.6H121v15.06h5.66a5.48 5.48 0 0 0 4.48-2.24 8.14 8.14 0 0 0 1.7-5.33A8.21 8.21 0 0 0 131 3.81a5.93 5.93 0 0 0-4.89-2.21Zm-2.91 1.78h3a4.2 4.2 0 0 1 3.63 1.71A7 7 0 0 1 130.86 9a7.33 7.33 0 0 1-1.18 4.32 4.25 4.25 0 0 1-3.57 1.6h-2.91ZM144.24 11.2a6.7 6.7 0 0 0-1.38-4.48 4.55 4.55 0 0 0-3.53-1.6 5.31 5.31 0 0 0-3.75 1.6 6 6 0 0 0-1.42 4.48 6.4 6.4 0 0 0 1.42 4.24 4.73 4.73 0 0 0 3.75 1.6 5.25 5.25 0 0 0 3-.91 4.42 4.42 0 0 0 1.67-2.37l-1.76-.34a3 3 0 0 1-2.9 2.12 3.4 3.4 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-8-1.34a3.76 3.76 0 0 1 .91-2.24 2.94 2.94 0 0 1 2.24-1 2.77 2.77 0 0 1 1.6.51 3.17 3.17 0 0 1 .95 1.2 8.74 8.74 0 0 1 .33 1.6ZM151.33 5.15A3.75 3.75 0 0 0 148 7.39v-1.9h-1.69v14.89h1.85v-5.15a3.62 3.62 0 0 0 3.2 1.78 3.87 3.87 0 0 0 3.2-1.6 6.64 6.64 0 0 0 1.3-4.21 7 7 0 0 0-1.25-4.26 3.91 3.91 0 0 0-3.28-1.79Zm-.33 1.7A2.25 2.25 0 0 1 153 8a5.44 5.44 0 0 1 .77 3.2 4.84 4.84 0 0 1-.84 3.3 2.48 2.48 0 0 1-3.48.41 2 2 0 0 1-.26-.24 3.1 3.1 0 0 1-1-2V9.44a4.08 4.08 0 0 1 1-1.87 2.9 2.9 0 0 1 1.81-.72ZM166.4 14.4V9.81a5 5 0 0 0-1-3.55 4.42 4.42 0 0 0-3.31-1c-2.86 0-4.48 1-4.91 3.2l1.79.33c.26-1.28 1.26-1.95 3-1.95a3.42 3.42 0 0 1 1.6.34 2 2 0 0 1 .85.85 7.5 7.5 0 0 1 .19 1.77h-1.41a8.16 8.16 0 0 0-4.9 1.09 3.56 3.56 0 0 0-1.44 2.8 3.4 3.4 0 0 0 1 2.46 4 4 0 0 0 2.9 1 3.92 3.92 0 0 0 3.81-2.24 4.9 4.9 0 0 0 .14 1.71h1.87a10.3 10.3 0 0 1-.18-2.22Zm-5.23 1a2.43 2.43 0 0 1-1.71-.51 1.59 1.59 0 0 1-.58-1.35 1.91 1.91 0 0 1 1.12-1.78 6.33 6.33 0 0 1 3.2-.67 10.68 10.68 0 0 1 1.6 0v.69a3.75 3.75 0 0 1-1.28 2.62 3 3 0 0 1-2.37 1.07ZM174.16 5.15a2.73 2.73 0 0 0-1.6.61 4.49 4.49 0 0 0-1.44 2V5.54h-1.7v11.2h1.78v-6a4 4 0 0 1 1-2.75 2.85 2.85 0 0 1 2.24-1h.4V5.25a2 2 0 0 0-.68-.1ZM180.8 15.47c-1.1 0-1.71-.51-1.71-1.6V7h2.46V5.41h-2.35V2.53l-1.78.17v2.79h-1.93v1.6h1.93v6.4a3 3 0 0 0 2.44 3.37 2.48 2.48 0 0 0 .86 0 10.68 10.68 0 0 0 1.6 0v-1.48a12.79 12.79 0 0 1-1.52.09ZM197.12 5.84a3.62 3.62 0 0 0-2-.69 3.76 3.76 0 0 0-3.47 2.47 3.34 3.34 0 0 0-1-1.7 3.21 3.21 0 0 0-2.24-.77 3.79 3.79 0 0 0-3.3 2.24v-1.9h-1.39v11.2h1.79V10a3.21 3.21 0 0 1 .77-2.24 2.19 2.19 0 0 1 3-.66 1.64 1.64 0 0 1 .33.26 2.55 2.55 0 0 1 .67 1.92v7.42h1.86v-6.28a4.06 4.06 0 0 1 .86-2.71 2.48 2.48 0 0 1 1.85-.86 2 2 0 0 1 1.19.43 1.75 1.75 0 0 1 .67.91 6.67 6.67 0 0 1 .19 1.6v7h1.86v-7a9.87 9.87 0 0 0-.26-2.24 4.2 4.2 0 0 0-1.38-1.71ZM210.56 11.2a6.77 6.77 0 0 0-1.34-4.48 4.49 4.49 0 0 0-3.57-1.6 5.2 5.2 0 0 0-3.71 1.6 6 6 0 0 0-1.36 4.48 6.28 6.28 0 0 0 1.42 4.24 4.66 4.66 0 0 0 3.73 1.6 5.25 5.25 0 0 0 3-.91 4.45 4.45 0 0 0 1.79-2.42l-1.79-.33a2.92 2.92 0 0 1-2.87 2.11 3.35 3.35 0 0 1-2.24-.87 4 4 0 0 1-1-3.2h8Zm-7.86-1.34a3.71 3.71 0 0 1 .92-2.24 2.84 2.84 0 0 1 3.74-.44 3 3 0 0 1 .91 1.2 5.94 5.94 0 0 1 .34 1.6ZM220 5.84a3.75 3.75 0 0 0-2.12-.69 3.87 3.87 0 0 0-3.37 2.24V5.6h-1.71v11.2h1.86v-6.22a4 4 0 0 1 .83-2.72 2.71 2.71 0 0 1 2.11-1 2.07 2.07 0 0 1 1.6.59 2.81 2.81 0 0 1 .61 2.16v7.18h1.77v-6.4a7.22 7.22 0 0 0-.33-2.88A2.72 2.72 0 0 0 220 5.84ZM228.24 15.47c-1.1 0-1.71-.51-1.71-1.6V7H229V5.41h-2.46V2.53l-1.76.17v2.79h-2v1.6h2v6.4a2.93 2.93 0 0 0 2.43 3.33 3.1 3.1 0 0 0 .86 0 14.23 14.23 0 0 0 1.6 0v-1.49a9.62 9.62 0 0 1-1.43.14ZM240.48 5.15a4.69 4.69 0 0 0-3.62 1.6 6.2 6.2 0 0 0-1.44 4.25 7.06 7.06 0 0 0 1.25 4.24 4.56 4.56 0 0 0 3.67 1.68 4.74 4.74 0 0 0 3.82-1.68A6.62 6.62 0 0 0 245.6 11a6.34 6.34 0 0 0-1.34-4.15 4.55 4.55 0 0 0-3.78-1.7Zm0 10.24a2.67 2.67 0 0 1-2.08-1 5.13 5.13 0 0 1-.94-3.39 5 5 0 0 1 .84-3.2 2.73 2.73 0 0 1 2.12-1 2.85 2.85 0 0 1 2.24 1 5.1 5.1 0 0 1 .8 3.42 5 5 0 0 1-.84 3.3 2.88 2.88 0 0 1-2.2.89ZM252.8 1.44a10.71 10.71 0 0 0-1.6-.16 4 4 0 0 0-2.46.75c-.68.5-1 1.6-1 3.39h-1.86V7h1.86v9.6h1.87V7h2.61V5.42h-2.62v-.27a2.23 2.23 0 0 1 .51-1.77 2.13 2.13 0 0 1 1.6-.52 4.63 4.63 0 0 1 1 .18v-1.6ZM353.09 2h-2.24l-4.8 15h1.79l1.34-4.32h5.43l1.6 4.4h2.11L353.17 2Zm.83 9.2h-4.48l2.24-6.72ZM366.62 6.22a3.66 3.66 0 0 0-2.12-.68 3.91 3.91 0 0 0-3.4 2.12V5.87h-1.85v11.2h1.85V11a4.11 4.11 0 0 1 .9-2.76 2.74 2.74 0 0 1 2.13-1 2.11 2.11 0 0 1 1.52.59 3 3 0 0 1 .67 2.24v7.08H368v-6.53a7.22 7.22 0 0 0-.34-2.88 2.73 2.73 0 0 0-1.04-1.52ZM386.5 8.58a4.71 4.71 0 0 0 .7-2.18 4.33 4.33 0 0 0-1.2-2.86 4.81 4.81 0 0 0-3.62-1.41h-5.92v15h1.95v-6.51h4.15l2.75 6.4h2.11l-3-6.94a3.37 3.37 0 0 0 2.08-1.5Zm-8.12-4.72h4a3 3 0 0 1 2 .67 2.24 2.24 0 0 1 .77 1.76 2.68 2.68 0 0 1-.77 2 3 3 0 0 1-2.24.77h-3.84ZM393.6 5.62a4.8 4.8 0 0 0-3.6 1.6 6.45 6.45 0 0 0-1.44 4.24 6.87 6.87 0 0 0 1.33 4.2 4.31 4.31 0 0 0 3.63 1.6 4.61 4.61 0 0 0 3.67-1.6 6.39 6.39 0 0 0 1.45-4.24 6 6 0 0 0-1.36-4.14 4.3 4.3 0 0 0-3.68-1.66Zm0 10.16a2.68 2.68 0 0 1-2.1-1 5 5 0 0 1-.86-3.39 4.9 4.9 0 0 1 .86-3.2 2.6 2.6 0 0 1 2.1-1 2.71 2.71 0 0 1 2.11 1 4.93 4.93 0 0 1 .85 3.31 4.78 4.78 0 0 1-.85 3.3 2.83 2.83 0 0 1-2.19.91ZM400.53 5.87h1.86v11.15h-1.86zM400.46 2h2.03v2.11h-2.03zM412.62 6.22a3.55 3.55 0 0 0-2.09-.68 3.85 3.85 0 0 0-3.39 2.12V5.87h-1.7v11.2h1.89V11a4 4 0 0 1 .81-2.72 2.77 2.77 0 0 1 2.24-1 2.13 2.13 0 0 1 1.6.59 2.91 2.91 0 0 1 .68 2.24v7.08h1.74v-6.57a8.05 8.05 0 0 0-.34-2.88 2.66 2.66 0 0 0-1.44-1.52ZM425.6 7.74a3.58 3.58 0 0 0-3.3-2.12 3.78 3.78 0 0 0-3.37 2.24v-1.8h-1.79v11.2h1.74V11a4.05 4.05 0 0 1 .85-2.7 2.69 2.69 0 0 1 2.24-1 2 2 0 0 1 1.52.57 2.83 2.83 0 0 1 .67 2.24v7.09h1.78v-6.58a8.05 8.05 0 0 0-.34-2.88ZM387.2 38.29a4.07 4.07 0 0 0 4-4 4 4 0 0 0-3.88-4.05h-.1a4 4 0 0 0 0 8ZM390.56 47.25h-10.93v1.85h4.48v22.58h-8.37L361.6 29.23h-2.24l-14.91 42.45h-3.2v1.92h11.2v-1.92h-5.59l4.05-12.19h12.8l4 12.19h-5.57v1.92H395v-1.92h-4.48ZM362.88 57.6h-11.2l5.73-16.94ZM413.49 46.66c-2.88 0-5.09 1.85-6.87 5.66v-5.07h-10.91v1.85h4.48v22.58h-4.48v1.92h15.23v-1.92h-4.32v-5.82c0-7.62.68-11.2 2.53-14.56.61-1 1.28-1.6 1.6-1.6s.26 0 .35.68c.16 2.53 1.17 3.81 3.2 3.81a3.45 3.45 0 0 0 3.57-3.33v-.32a4 4 0 0 0-4.05-4ZM440.21 49.6s.27 0 .41.85a2.24 2.24 0 0 0 2.23 2.25h.24a2.68 2.68 0 0 0 2.69-2.65v-.27a3.2 3.2 0 0 0-3.2-3.2h-.32a6.38 6.38 0 0 0-4.48 2.52 11.25 11.25 0 0 0-7.38-2.52c-6.1 0-10.66 4-10.66 9.6a9 9 0 0 0 3.88 7.36c-3.72 2.54-5.59 5.23-5.59 8.2a5.94 5.94 0 0 0 4.37 5.7 6.28 6.28 0 0 0-4.48 5.84c0 4.48 5.49 8.11 12.24 8.11 8 0 14-5.25 14-12.43 0-5.33-2.24-7.34-8-7.34l-10.92.16c-3.2 0-3.81-.77-3.81-2.12s1.45-3.29 4.16-5a10.42 10.42 0 0 0 5 1c6.1 0 10.76-3.87 10.76-9.12a10.13 10.13 0 0 0-2-6c.36-.83.52-.94.86-.94Zm-9.81 14c-3 0-3.81-1.28-3.81-5.84 0-8.55.59-9.22 4-9.22 3 0 3.81.59 3.81 6.4 0 4.8-.18 6.18-.67 7.09a3.77 3.77 0 0 1-3.33 1.54Zm-.24 25.6c-4.66 0-7.78-2.63-7.78-6.59a6.75 6.75 0 0 1 2-4.8h.27a21.91 21.91 0 0 0 3.71.17h3.4a18.58 18.58 0 0 0 2.36 0H438c2.87 0 3.39.83 3.39 2.45-.06 4.83-5 8.8-11.26 8.8Z" />
<path d="M469.73 58.58v-.34c-.5-7.1-5.06-11.66-11.76-11.66s-12.59 6.51-12.59 13.85 6.09 13.81 12.8 13.81a11.21 11.21 0 0 0 11.2-9.6v-.34h-2.24v.24c-1.19 4.8-4.48 7.54-8.45 7.54a5.43 5.43 0 0 1-5-2.69c-.76-1.37-.85-2.65-.85-9v-1.6h16.91Zm-11.92-9.91a3.76 3.76 0 0 1 4 2.39 12.92 12.92 0 0 1 .51 5.56h-9.6v-1.18c0-4.91 1.37-6.77 5.09-6.77ZM496.48 70.77c-1.2 1-1.28 1-1.71 1-1.09 0-1.19 0-1.19-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.68 0-10.57 3.2-10.57 6.94a3 3 0 0 0 2.93 3.1h.09a2.92 2.92 0 0 0 3-2.81.71.71 0 0 0 0-.29 3.18 3.18 0 0 0-1-2.24c-.24-.34-.24-.34-.24-.5 0-1 2.37-2.46 4.64-2.46a4.37 4.37 0 0 1 3.32 1.18c.67.77.84 1.28.84 5.09v4.23c-10 .25-15.5 3.39-15.5 9 0 3.9 2.9 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.23 5.23 0 0 0 5.57 4.48 6.87 6.87 0 0 0 4.8-2l.16-.18-1.2-1.42Zm-9.39-10.29v1a15.15 15.15 0 0 1-.85 6.4 5.16 5.16 0 0 1-4.48 2.94 3.5 3.5 0 0 1-3.76-3.2 3 3 0 0 1 0-.73c0-4.17 2.82-6.09 9.09-6.41ZM524.16 29.33h-10.91v1.85h4.48v20.16a8.42 8.42 0 0 0-7.52-4.48c-6 0-11.2 6.24-11.2 13.68s5.17 14 11.42 14a8.32 8.32 0 0 0 7.28-4.48v4h10.82v-1.92h-4.37Zm-13.44 42.86a4 4 0 0 1-3.47-2.19c-.67-1.34-.85-2.7-.85-8.62 0-6.72.27-9.23.94-10.58a4.18 4.18 0 0 1 3.28-2c3.91 0 6.72 4.91 6.72 11.76s-2.76 11.63-6.62 11.63ZM554.5 70.77c-1.2 1-1.27 1-1.68 1-1.11 0-1.2 0-1.2-5.75v-8.8c0-5.66 0-6.17-1.6-7.79a11 11 0 0 0-8-2.86c-5.67 0-10.58 3.2-10.58 6.94a3 3 0 0 0 3 3.1h.09a2.94 2.94 0 0 0 3.1-2.77v-.33a3.18 3.18 0 0 0-1-2.24c-.27-.34-.27-.34-.27-.5 0-1 2.38-2.46 4.66-2.46a4.39 4.39 0 0 1 3.29 1.18c.71.77.85 1.28.85 5.09v4.23c-10 .25-15.47 3.39-15.47 9 0 3.9 2.86 6.52 7.28 6.52a10.21 10.21 0 0 0 8.38-4.48 5.21 5.21 0 0 0 5.57 4.48 6.69 6.69 0 0 0 4.8-2l.18-.18-1.19-1.42Zm-9.4-10.29v1a15 15 0 0 1-.84 6.4 5.12 5.12 0 0 1-4.48 2.94 3.49 3.49 0 0 1-3.75-3.2 5 5 0 0 1 0-.77c-.03-4.13 2.82-6.05 9.07-6.37ZM564.05 38.29a4.12 4.12 0 0 0 4-4 4 4 0 0 0-4-4.05H564a3.8 3.8 0 0 0-4 3.61 1.48 1.48 0 0 0 0 .42 4 4 0 0 0 3.94 4ZM567.44 47.25h-10.82v1.93h4.29V71.7h-4.29v1.93h15.14V71.7h-4.32V47.25zM582.58 56.38c-5.24-.94-6.18-1.71-6.18-3.47a4.88 4.88 0 0 1 5.42-4.24 7.12 7.12 0 0 1 7.09 6.27v.26h1.6l-.25-8.29h-1.46l-.94 2a9.64 9.64 0 0 0-6.16-2.24 8 8 0 0 0-8.23 7.77V55c0 5.23 2.37 7.44 9.14 8.62 5 .76 5.92 2 5.92 3.88a5.15 5.15 0 0 1-5.48 4.8h-.19c-4.14 0-6.52-2.53-8.11-8.72v-.24h-1.44l.16 10.38h1.19l1.44-1.94a9.79 9.79 0 0 0 6.84 2.61 8.72 8.72 0 0 0 8.71-8.73V65c-.02-5-2.53-7.53-9.07-8.62ZM323.46 0h2.24v90.67h-2.24z" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Survey title</div>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<button type="submit" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost">
<span class="ons-btn__inner">Save and sign out
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
<path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
{% extends "layout/_template.njk" %}
{% set pageConfig = {
"header": {
"logo": "ni-finance-logo",
"mobileLogo": "ni-finance-logo-mobile",
"logoAlt": "Northern Ireland Department of Finance logo",
"logoHref": "https://www.finance-ni.gov.uk/",
"customHeaderLogo": true,
"title": 'Survey title'
},
"signoutButton": {
"text": 'Save and sign out',
"iconType": 'exit',
"iconPosition": 'after'
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/navigation/_macro.njk" import onsNavigation %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links ons-grid__col ons-col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
{% set breakpoint = 'xs' %}
{% set controlVisibility = true %}
{% elif params.serviceLinks.itemsList | length > 1 %}
{% set breakpoint = 'm' %}
{% set controlVisibility = true %}
{% else %}
{% set controlVisibility = false %}
{% endif %}
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
<nav class="ons-header-service-nav ons{{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
{% else %}
{% set buttonVariant = "text-link" %}
{% endif %}
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
{{ onsButton({
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
"classes": "ons-u-d-no ons-js-toggle-services",
"type": "button",
"buttonStyle": "mobile",
"variants": buttonVariant,
"attributes": {
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
"aria-controls": params.serviceLinks.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if params.serviceLinks is defined and params.serviceLinks %}
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
{% if params.language is defined and params.language %}
<div class="ons-u-d-no@xs">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="ons-header__main">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
{% if params.description is defined and params.description %}
<p class="ons-header__description">{{ params.description }}</p>
{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.navigation is defined %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
{% if isPatternLib and params.navigation.siteSearchAutosuggest %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": "Toggle search" ,
"aria-controls": "ons-site-search",
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if params.navigation is defined and params.navigation %}
{{ onsNavigation(params.navigation) }}
{% endif %}
</header>
{% endmacro %}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-tall {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-bottom: 1rem;
margin-top: 0.8rem;
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__description {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1.1rem;
}
}
// Modifier - variants
&--description {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
margin-bottom: 0;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
.ons-svg-logo__group--text,
.ons-svg-logo__group--primary {
fill: $color-white;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
.ons-svg-logo {
fill: $color-text-link-focus;
}
}
&__grid-top {
min-height: 36px;
a {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
}
.ons-svg-logo {
display: block;
}
&__logo-link:focus {
.ons-svg-logo {
.ons-svg-logo__group {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 454px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(455px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
font-size: 0;
text-decoration: none;
}
&__logo-link {
display: block;
}
&-service-nav {
display: inline-block;
&--mobile {
background: $color-branded-tint;
padding: 1rem;
width: 100%;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&--mobile {
display: block;
margin: 0 0 0.5rem;
}
&:first-child {
margin-left: 0;
}
}
.ons-language-links {
border-top: 1px solid $color-branded;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
&__item {
margin: 0 0 0.5rem;
}
}
}
}
Help improve this component
Let us know how we could improve this component or share your user research findings. Discuss the ‘Header’ component on GitHub