Header
The ONS header shows users which ONS service they are on.
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Page title</div>
</a>
</div>
</div>
</div>
</div>
</header>{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Page title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0'
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
When to use this component
You should use the ONS header at the top of any ONS service.
How to use this component
Internal
The internal service variant of the header. Use the modifier ons-header--internal when implementing for an internal service.
<header class="ons-header ons-header--internal" role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</svg>
</a>
</div>
</div>
<div class="ons-header__links grid__col col-auto">
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav " aria-label="Service links navigation">
<ul class="ons-header-service-nav__list" aria-label="Service Links">
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service title</div>
</a>
</div>
</div>
</div>
</div>
</header>{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Service title',
"logoHref": '#0',
"classes": 'ons-header--internal',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"serviceLinks": {
"itemsList": [
{
"title": "Help",
"url": "#0"
},
{
"title": "My Account",
"url": "#0"
},
{
"title": "Sign out",
"url": "#0"
}
]
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
External survey with sign out button and language toggle
The external header with language selector and save button, should be used across public facing services.
The ghost button in the header moves to the footer when the page width is under the medium breakpoint (less than 740px).
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</svg>
</a>
</div>
</div>
<div class="ons-header__links grid__col col-auto">
<div class="ons-grid__col ons-col-auto">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="cy">Cymraeg</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title header__title--with-button">Survey title</div>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
<button type="submit" class="ons-btn ons-u-d-no@xxs@m ons-u-mt-xs@m ons-btn--ghost">
<span class="ons-btn__inner">Save and sign out
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)" />
<path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</header>{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Survey title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"button": {
"text": 'Save and sign out',
"ariaLabel": 'Toggle main navigation',
"iconType": 'exit',
"iconPosition": 'after'
},
"language": {
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"current": true
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"current": false
}
]
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
External survey with description
Allows for text to be added below the title by adding the ons-header--hero modifier class to the header element. This should be used when the service would benefit from a description which informs users of what the service provides.
<header class="ons-header ons-header--hero" role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main ons-header__main--with-description">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title header__title--with-description">Service title</div>
</a>
</div>
</div>
<p class="ons-header__desc">This is the description or tagline</p>
</div>
</div>
</header>{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"classes": 'ons-header--hero',
"title": 'Service title',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"desc": 'This is the description or tagline',
"titleLogoHref": '#0'
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
External with navigation
For services that require a main navigation. For mobile users, a menu button is shown which allows the navigation menu to be open and closed using javascript.
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Design system</div>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-toggle-main ons-btn--mobile ons-btn--ghost" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m">
<nav class="ons-header-nav ons-js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
<li class="ons-header-nav__item ons-header-nav__item--active">
<a class="ons-header-nav__link" href="#home">Home</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Guidance</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Foundations</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Components</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Patterns</a>
</li>
</ul>
</nav>
</div>
</div>
</header>{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Design system',
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"toggleButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main navigation'
},
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"ariaListLabel": 'Navigation menu',
"currentPath": '#home',
"itemsList": [
{
"title": 'Home',
"url": '#home'
},
{
"title": 'Guidance',
"url": '#0'
},
{
"title": 'Foundations',
"url": '#0'
},
{
"title": 'Components',
"url": '#0'
},
{
"title": 'Patterns',
"url": '#0'
}
]
}
})
}}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
External with 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>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
<path d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
<path d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
<path d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
<path d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
<path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
<path d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
<path d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
<path d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
<path d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
<path d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
<path d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
<path d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
<path d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
<path d="M554.49,48.41V11.58h5.4V48.41Z" />
<path d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
<path d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
<path d="M643.63,48.41V11.58H649V48.41Z" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
<title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
<path d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
<path d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
<path d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
<path d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
<polygon points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
<path d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
<path d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
<path d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
<path d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
<path d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
<path d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
<path d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
<path d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
<path d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
<polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
<path d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
<path d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
<polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
</svg>
</a>
</div>
</div>
<div class="ons-header__links grid__col col-auto">
<div class="ons-grid__col ons-col-auto">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="en">English</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Gwasanaeth Cymraeg</div>
</a>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main ">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>{% extends "foundations/layout/page-template/_template.njk" %}
{% set pageConfig = {
"header": {
"logoHref": '#0',
"mobileLogo": 'ons-logo-stacked-cy',
"title": 'Gwasanaeth Cymraeg',
"titleLogoHref": '#0'
},
"language": {
"allLanguagesUrl": '#0',
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"allLanguages": 'All languages',
"current": false
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"allLanguages": 'Pob iaith',
"current": true
}
]
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
External with Census branding
Census
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Census 2021</title>
<link rel="stylesheet" href="/css/census.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#902082" />
<meta name="description" content="Census 2021 is a UK wide population survey">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="Census 2021">
<meta property="og:image" content="/favicons/census/en/opengraph.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Census 2021 is a UK wide population survey">
<meta property="og:site_name" content="Census 2021">
<meta property="og:locale" content="en">
<meta property="og:locale:alternate" content="cy">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Census 2021">
<meta name="twitter:description" content="Census 2021 is a UK wide population survey">
<meta name="twitter:image" content="/favicons/census/en/twitter.png">
<!-- Canonical -->
<link rel="canonical" href="">
<link rel="alternate" href="#0" hreflang="en">
<link rel="alternate" href="#0" hreflang="cy">
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/census/en/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
<title id="ons-logo-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
<title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</svg>
</a>
</div>
</div>
<div class="ons-header__links grid__col col-auto">
<div class="ons-grid__col ons-col-auto">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="cy">Cymraeg</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
<a class="ons-header__title-link" href="#0">
<svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
<title id="census-logo-en-alt">Census 2021</title>
<path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
<path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
<path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
<path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
<path d="M81.1,27.36Z" />
<path d="M129.43,27.34h0Z" />
<path d="M129.42,27.33Z" />
<path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
<path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
<path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
<path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
<path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
<path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
</svg>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-toggle-main ons-btn--mobile ons-btn--ghost" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m">
<nav class="ons-header-nav ons-js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
<li class="ons-header-nav__item ons-header-nav__item--active">
<a class="ons-header-nav__link" href="#home">Home</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">About the census</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Help with your census</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Contact us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main ">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>{% extends "foundations/layout/page-template/_template.njk" %}
{% set pageConfig = {
"title": 'Census 2021',
"theme": 'census',
"absoluteUrl": pageInfo.url,
"headMeta": {
"description": 'Census 2021 is a UK wide population survey',
"hrefLangs": [
{
"url": '#0',
"lang": 'en'
},
{
"url": '#0',
"lang": 'cy'
}
]
},
"header": {
"logoHref": '#0',
"titleLogo": 'census-logo-en',
"mobileLogo": 'ons-logo-stacked-en',
"titleLogoHref": '#0',
"titleLogoAlt": 'Census 2021'
},
"language": {
"allLanguagesUrl": '#0',
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"allLanguages": 'All languages',
"current": true
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"allLanguages": 'Pob iaith',
"current": false
}
]
},
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"ariraListLabel": 'Navigation menu',
"currentPath": '#home',
"itemsList": [
{
"title": 'Home',
"url": '#home'
},
{
"title": 'About the census',
"url": '#0'
},
{
"title": 'Help with your census',
"url": '#0'
},
{
"title": 'Contact us',
"url": '#0'
}
]
},
"toggleButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main navigation'
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
Census Welsh
<!doctype html>
<html lang="cy">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONS Design System</title>
<link rel="stylesheet" href="/css/census.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#902082" />
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/census/cy/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/census/cy/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/census/cy/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/census/cy/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/census/cy/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/census/cy/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/census/cy/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60">
<title id="ons-logo-cy-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
<path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
<path d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
<path d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
<path d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
<path d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
<path d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
<path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
<path d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
<path d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
<path d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
<path d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
<path d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
<path d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
<path d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
<path d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
<path d="M554.49,48.41V11.58h5.4V48.41Z" />
<path d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
<path d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
<path d="M643.63,48.41V11.58H649V48.41Z" />
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116">
<title id="ons-logo-stacked-cy-alt">Office for National Statistics logo</title>
<path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
<path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
<path d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
<path d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
<path d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
<path d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
<path d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
<polygon points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
<path d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
<path d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
<path d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
<path d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
<path d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
<path d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
<path d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
<path d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
<path d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
<polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
<path d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
<path d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
<polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
</svg>
</a>
</div>
</div>
<div class="ons-header__links grid__col col-auto">
<div class="ons-grid__col ons-col-auto">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="en">English</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="242" height="44" viewBox="0 0 242 44" role="img" aria-labelledby="census-logo-cy-alt">
<title id="census-logo-cy-alt">Cyfrifiad 2021</title>
<path style="opacity:0.7" d="M623.06,494.45H611.47a4.82,4.82,0,0,1,.14-1c.61-2.44,3.08-3.71,6.08-5.05,3.46-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.6,9.6,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.2,0,1.73-.53,1.73-1.48v-.21C624.79,495,624.26,494.45,623.06,494.45Z" transform="translate(-401.34 -464)" />
<path style="opacity:0.7" d="M595.5,474.24c-5.86,0-9.5,4.14-9.5,10.74v2.34c0,6.6,3.57,10.7,9.5,10.7s9.54-4.17,9.54-10.78V485C605,478.34,601.44,474.24,595.5,474.24Zm5.9,13.18c0,4.81-2.12,7.53-5.9,7.53s-5.83-2.76-5.83-7.56v-2.58c0-4.81,2.12-7.56,5.83-7.56s5.9,2.82,5.9,7.63Z" transform="translate(-401.34 -464)" />
<path style="opacity:0.7" d="M641.29,494.49h-3.07l0-18.3a1.49,1.49,0,0,0-1.63-1.67h-1.24L628.57,479a2,2,0,0,0,1.88,2.23,2.88,2.88,0,0,0,1.87-.78c.67-.53,1.24-1.17,2.61-2.26v16.29h-3.81c-1.1,0-1.66.46-1.66,1.48v.18c0,1,.56,1.41,1.66,1.41h10.17c1.1,0,1.67-.42,1.67-1.41V496C643,495,642.39,494.49,641.29,494.49Z" transform="translate(-401.34 -464)" />
<path style="opacity:0.7" d="M581.72,494.45H570.13a4.26,4.26,0,0,1,.15-1c.6-2.44,3.07-3.71,6.07-5.05,3.47-1.59,6.72-3.22,6.72-7.32s-3-6.82-8-6.82a9.62,9.62,0,0,0-6.15,2,5.11,5.11,0,0,0-2.08,3.75c0,1.9,2.4,1.87,2.4,1.76a5.42,5.42,0,0,1,5.58-4.38c2.94,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.69,5.09c-3.43,1.7-7.07,3.78-7.07,8.48v.88c0,1.45.67,2,2.26,2h12.72c1.21,0,1.74-.53,1.74-1.48v-.21C583.46,495,582.93,494.45,581.72,494.45Z" transform="translate(-401.34 -464)" />
<path d="M556.37,464.19a2.7,2.7,0,0,0-2.7,2.69V475a11.56,11.56,0,0,0-4-.71,11.86,11.86,0,1,0,8.67,19.92,2.63,2.63,0,0,0,.72-1.72,1.41,1.41,0,0,0,0-.2V466.88A2.7,2.7,0,0,0,556.37,464.19Zm-2.7,19.11v7.92a6.38,6.38,0,0,1-4,1.41,6.47,6.47,0,1,1,0-12.94,6.36,6.36,0,0,1,4,1.41Z" transform="translate(-401.34 -464)" />
<path d="M413.19,479.61a6.41,6.41,0,0,1,4.73,2.07,2.69,2.69,0,0,0,3.94-3.67,11.86,11.86,0,1,0,0,16.14,2.69,2.69,0,0,0-3.94-3.67,6.38,6.38,0,0,1-4.73,2.07,6.47,6.47,0,1,1,0-12.94Z" transform="translate(-401.34 -464)" />
<path d="M481.59,474.26A2.69,2.69,0,0,0,478.9,477v18.21a2.69,2.69,0,1,0,5.38,0V477A2.7,2.7,0,0,0,481.59,474.26Z" transform="translate(-401.34 -464)" />
<path d="M460.12,464.11a11.89,11.89,0,0,0-8.52,11.38V495a2.7,2.7,0,0,0,5.39,0V481.65h2a2.7,2.7,0,0,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.59-6.19l.07,0a2.69,2.69,0,0,0-1.53-5.16Z" transform="translate(-401.34 -464)" />
<path d="M531.5,474.26a2.67,2.67,0,0,0-2.13,1.05,11.86,11.86,0,1,0,0,21.45,2.7,2.7,0,0,0,4.86-1.6V477A2.7,2.7,0,0,0,531.5,474.26Zm-2.69,7.33v9.08a6.39,6.39,0,0,1-4.49,1.83,6.47,6.47,0,0,1,0-12.94,6.37,6.37,0,0,1,4.49,1.83Z" transform="translate(-401.34 -464)" />
<path d="M481.61,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,481.61,465.84Z" transform="translate(-401.34 -464)" />
<path d="M506.65,474.26A2.7,2.7,0,0,0,504,477v18.21a2.7,2.7,0,1,0,5.39,0V477A2.7,2.7,0,0,0,506.65,474.26Z" transform="translate(-401.34 -464)" />
<path d="M506.67,465.84a2.71,2.71,0,1,0,2.71,2.7A2.71,2.71,0,0,0,506.67,465.84Z" transform="translate(-401.34 -464)" />
<path d="M472.08,474.71a11.87,11.87,0,0,0-8.51,11.37v9a2.69,2.69,0,0,0,5.38,0v-9a6.49,6.49,0,0,1,4.6-6.19l.07,0a2.69,2.69,0,0,0-1.54-5.15Z" transform="translate(-401.34 -464)" />
<path d="M447.3,477a2.7,2.7,0,0,0-5.39,0v9c0,3.56-2,6.47-5.56,6.47s-5.56-2.91-5.56-6.47v-9a2.7,2.7,0,0,0-5.39,0v9c0,6.53,4.41,11.85,11,11.85a10.66,10.66,0,0,0,5.57-1.51v.16a6.48,6.48,0,0,1-4.6,6.19l-.06,0h0c-1.43.43-.9,1.93-.47,3.36a2.67,2.67,0,0,0,3.34,1.79c4.92-1.44,7.17-6,7.17-11.37V477Z" transform="translate(-401.34 -464)" />
<path d="M497.71,464.12a11.86,11.86,0,0,0-8.51,11.37V495a2.69,2.69,0,0,0,5.38,0V481.65h2a2.7,2.7,0,1,0,0-5.39h-2v-.77a6.48,6.48,0,0,1,4.6-6.19l.07,0a2.7,2.7,0,0,0,1.8-3.36A2.67,2.67,0,0,0,497.71,464.12Z" transform="translate(-401.34 -464)" />
</svg>
</a>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main ">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>{% extends "foundations/layout/page-template/_template.njk" %}
{% set pageConfig = {
"theme": 'census',
"header": {
"logoHref": '#0',
"titleLogo": 'census-logo-cy',
"mobileLogo": 'ons-logo-stacked-cy',
"titleLogoAlt": 'Cyfrifiad 2021',
"titleLogoHref": '#0'
},
"language": {
"allLanguagesUrl": '#0',
"languages": [
{
"url": '#0',
"ISOCode": 'en',
"text": 'English',
"buttonAriaLabel": 'Language selector. Current language: English',
"chooseLanguage": 'Choose language',
"allLanguages": 'All languages',
"current": false
},
{
"url": '#0',
"ISOCode": 'cy',
"text": 'Cymraeg',
"buttonAriaLabel": 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
"chooseLanguage": 'Dewiswch iaith',
"allLanguages": 'Pob iaith',
"current": true
}
]
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
Census NISRA
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONS Design System</title>
<link rel="stylesheet" href="/css/census.css">
<link rel="stylesheet" media="print" href="/css/print.css">
<meta name="theme-color" content="#902082" />
<!-- Favicons -->
<meta name="msapplication-config" content="/favicons/census/en/browserconfig.json">
<link rel="icon" type="image/x-icon" href="/favicons/census/en/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/census/en/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/favicons/census/en/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" type="image/png" href="/favicons/census/en/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/favicons/census/en/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-link" href="#main-content">Skip to main content</a>
<header class="ons-header " role="banner">
<div class="ons-header__top">
<div class="ons-container">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-header__grid-top-nisra">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-nisra-svg-logo" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54">
<path class="ons-st0" d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" />
<path class="ons-st1" d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" />
<g>
<path class="ons-st2" d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z
M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1
c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2
c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4
c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2
z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z
M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" />
</g>
</svg>
</a>
</div>
<div class="ons-header__logo--small">
<a class="ons-header__logo-link" href="#0">
<svg class="ons-nisra-svg-logo" xmlns="http://www.w3.org/2000/svg" width="107" height="35" viewBox="0 0 170 54">
<path class="ons-st0" d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" />
<path class="ons-st1" d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" />
<g>
<path class="ons-st2" d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z
M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1
c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2
c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4
c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2
z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z
M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink ons-header__title-census-logo-en">
<a class="ons-header__title-link" href="#0">
<svg class="ons-header__title--svg-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" width="228" height="28" viewBox="0 8 228 28" role="img" aria-labelledby="census-logo-en-alt">
<title id="census-logo-en-alt">Census 2021</title>
<path d="M35.85,10a12,12,0,0,0,0,24,2.73,2.73,0,0,0,0-5.45,6.57,6.57,0,0,1-6-3.82H45.12A2.73,2.73,0,0,0,47.85,22,12,12,0,0,0,35.85,10Zm-6,9.27a6.55,6.55,0,0,1,11.91,0Z" />
<path d="M62.42,10a12,12,0,0,0-12,12v9.12a2.73,2.73,0,0,0,5.45,0V22A6.55,6.55,0,1,1,69,22v9.12a2.73,2.73,0,0,0,5.45,0V22A12,12,0,0,0,62.42,10Z" />
<path d="M120.41,10a2.72,2.72,0,0,0-2.72,2.73v9.11a6.55,6.55,0,1,1-13.1,0V12.73a2.73,2.73,0,1,0-5.45,0v9.11a12,12,0,0,0,24,0V12.73A2.73,2.73,0,0,0,120.41,10Z" />
<path d="M88.64,19.78c-3.85-.82-5.4-1.15-5.4-2.55s2-2.17,4.15-2.17a8.87,8.87,0,0,1,3.15.63,3.2,3.2,0,0,0,1.12.24,2.55,2.55,0,0,0,2.55-2.55,2.58,2.58,0,0,0-1.79-2.47,14.64,14.64,0,0,0-5-.9c-6.27,0-9.83,3.56-9.83,7.13,0,4.33,4,6.26,8.48,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.34,2.08a11,11,0,0,1-5.13-1.58,2.91,2.91,0,0,0-1-.22A2.57,2.57,0,0,0,79,32a14.84,14.84,0,0,0,7.47,2c5.83,0,10-3.13,10-7C96.39,22.24,93.17,20.75,88.64,19.78Z" />
<path d="M81.1,27.36Z" />
<path d="M129.43,27.34h0Z" />
<path d="M129.42,27.33Z" />
<path d="M137,19.78c-3.86-.82-5.4-1.15-5.4-2.55s2-2.17,4.14-2.17a8.78,8.78,0,0,1,3.15.63,3.18,3.18,0,0,0,1.13.24,2.55,2.55,0,0,0,2.54-2.55,2.61,2.61,0,0,0-1.79-2.47,14.59,14.59,0,0,0-5-.9c-6.26,0-9.82,3.56-9.82,7.13,0,4.33,3.95,6.26,8.47,7.22,3.47.72,4.53,1,4.53,2.5s-2,2.08-4.33,2.08a11.16,11.16,0,0,1-5.18-1.6,2.44,2.44,0,0,0-1-.2,2.57,2.57,0,0,0-2.58,2.57A2.64,2.64,0,0,0,127.33,32a14.81,14.81,0,0,0,7.47,2c5.83,0,10-3.13,10-7C144.77,22.24,141.54,20.75,137,19.78Z" />
<path d="M12,15.45a6.45,6.45,0,0,1,4.78,2.09,2.72,2.72,0,1,0,4-3.71,12,12,0,1,0,0,16.34,2.73,2.73,0,0,0-4-3.72A6.46,6.46,0,0,1,12,28.55a6.55,6.55,0,0,1,0-13.1Z" />
<path style="opacity:0.7" d="M166.51,30.35H154.9a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.46-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2,5.15,5.15,0,0,0-2.09,3.75c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C168.24,30.85,167.71,30.35,166.51,30.35Z" />
<path style="opacity:0.7" d="M207.91,30.35H196.3a4.74,4.74,0,0,1,.14-1c.6-2.45,3.08-3.72,6.09-5.06,3.47-1.6,6.72-3.22,6.72-7.33s-3-6.83-8-6.83a9.6,9.6,0,0,0-6.15,2A5.15,5.15,0,0,0,193,15.84c0,1.92,2.4,1.88,2.4,1.77a5.43,5.43,0,0,1,5.6-4.38c2.93,0,4.67,1.41,4.67,3.78s-2.69,3.61-5.7,5.1c-3.43,1.7-7.08,3.78-7.08,8.49v.88c0,1.46.67,2,2.27,2h12.74c1.2,0,1.73-.53,1.73-1.49v-.21C209.64,30.85,209.11,30.35,207.91,30.35Z" />
<path style="opacity:0.7" d="M226.17,30.39h-3.08l0-18.33a1.49,1.49,0,0,0-1.63-1.67h-1.23l-6.83,4.5a2,2,0,0,0,1.87,2.23,2.9,2.9,0,0,0,1.88-.78c.67-.53,1.24-1.17,2.62-2.27V30.39H216c-1.09,0-1.66.46-1.66,1.48v.18c0,1,.57,1.42,1.66,1.42h10.2c1.09,0,1.66-.43,1.66-1.42v-.18C227.83,30.85,227.26,30.39,226.17,30.39Z" />
<path style="opacity:0.7" d="M180.31,10.11c-5.88,0-9.52,4.14-9.52,10.76V23.2c0,6.62,3.57,10.73,9.52,10.73s9.55-4.18,9.55-10.8v-2.3C189.86,14.22,186.25,10.11,180.31,10.11Zm5.91,13.2c0,4.81-2.13,7.54-5.91,7.54s-5.84-2.76-5.84-7.57V20.69c0-4.81,2.12-7.57,5.84-7.57s5.91,2.83,5.91,7.64Z" />
</svg>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-toggle-main ons-btn--mobile ons-btn--ghost" aria-label="Toggle main navigation" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">
<span class="ons-btn__inner">Menu
<svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m">
<nav class="ons-header-nav ons-js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
<li class="ons-header-nav__item ons-header-nav__item--active">
<a class="ons-header-nav__link" href="#home">Home</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">About the census</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Help with your census</a>
</li>
<li class="ons-header-nav__item ">
<a class="ons-header-nav__link" href="#0">Contact us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="ons-page__container ons-container ">
<div class="ons-grid">
<div class="ons-grid__col ons-col-8@m">
<main id="main-content" class="ons-page__main ">
</main>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
</body>
</html>{% extends "foundations/layout/page-template/_template.njk" %}
{% set pageConfig = {
"theme": 'census',
"header": {
"logo": "nisra-logo-en",
"mobileLogo": "nisra-logo-en-mobile",
"logoAlt": "Northern Ireland Statistics and Research Agency logo",
"logoHref": "#0",
"customHeaderLogo": "nisra",
"titleLogo": "census-logo-en",
"titleLogoAlt": "Census 2021",
"titleLogoHref": '#0'
},
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#home',
"itemsList": [
{
"title": 'Home',
"url": '#home'
},
{
"title": 'About the census',
"url": '#0'
},
{
"title": 'Help with your census',
"url": '#0'
},
{
"title": 'Contact us',
"url": '#0'
}
]
},
"toggleButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main navigation'
}
} %}
{% macro onsHeader(params) %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/icons/_macro.njk" import onsIcon %}
{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{% set title_tag = "h1" if params.tilteAsH1 else "div" %}
{% set currentLanguageISOCode = "en" %}
{% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
{% set currentLanguage = params.language.languages | selectattr("current") | first %}
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
{% endif %}
<header class="ons-header {{ params.classes if params.classes }}" role="banner">
{% if params.phase is defined and params.phase %}
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
{{ onsPhaseBanner(params.phase) }}
{% endif %}
<div class="ons-header__top">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__logo--large">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
<div class="ons-header__logo--small">
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
{{
onsIcon({
"iconType": params.mobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
"altText": params.logoAlt | default('Office for National Statistics logo')
})
}}
{% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
</div>
</div>
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-header__links grid__col col-auto">
{% if params.language is defined and params.language %}
<div class="ons-grid__col ons-col-auto">
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
{{ onsLanguageSelector(params.language) }}
</div>
{% endif %}
{% if params.serviceLinks is defined and params.serviceLinks %}
<div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
<nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
<li class="ons-header-service-nav__item">
<a
href="{{ item.url }}"
class="ons-header-service-nav__link"
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
{% from "components/icons/_macro.njk" import onsIcon %}
{{
onsIcon({
"iconType": params.titleLogo,
"altText": params.titleLogoAlt
})
}}
{% else %}
<{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
{% endif %}
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
</div>
{% if params.button is defined and params.button %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
{{ onsButton({
"text": params.button.text,
"classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
"variants": "ghost",
"name": params.button.name,
"attributes": params.button.attributes,
"url": params.button.url,
"iconType": params.button.iconType,
"iconPosition": params.button.iconPosition
}) }}
</div>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<span class="ons-grid ons-u-d-no@xxs@xs">
{{ onsButton({
"text": "Search",
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
"variants": ["ghost", "small"],
"iconType": "search",
"iconPosition": "only",
"attributes": {
"aria-label": params.searchToggle.ariaLabel | default("Toggle search") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
</span>
{% endif %}
{% if params.toggleButton is defined and params.toggleButton %}
{{ onsButton({
"text": params.toggleButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
"buttonStyle": "mobile",
"variants": ["mobile", "ghost"],
"attributes": {
"aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
"aria-controls": params.navigation.id,
"aria-haspopup": "true",
"aria-expanded": "false"
}
}) }}
{% endif %}
</div>
{% endif %}
</div>
{% if params.desc is defined and params.desc %}
<p class="ons-header__desc">{{ params.desc }}</p>
{% endif %}
</div>
</div>
{% if params.navigation is defined and params.navigation %}
<div class="ons-header__bottom">
<div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
<div class="ons-header-search ons-js-header-search">
{{ onsAutosuggest({
"id": "ons-autosuggest-header-search",
"containerClasses": "ons-autosuggest-input--header",
"classes": "ons-input--ghost ons-input-search ons-input-search--icon",
"label": {
"text": params.autosuggest.label,
"id": "ons-autosuggest-header-search-label",
"classes": "ons-label--white ons-u-pl-m"
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.autosuggest.instructions,
"ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
"ariaMinChars": params.autosuggest.ariaMinChars,
"ariaResultsLabel": params.autosuggest.ariaResultsLabel,
"ariaOneResult": params.autosuggest.ariaOneResult,
"ariaNResults": params.autosuggest.ariaNResults,
"ariaLimitedResults": params.autosuggest.ariaLimitedResults,
"moreResults": params.autosuggest.moreResults,
"resultsTitle": params.autosuggest.resultsTitle,
"autosuggestData": params.autosuggest.autosuggestData,
"noResults": params.autosuggest.noResults,
"typeMore": params.autosuggest.typeMore
}) }}
</div>
{% endif %}
<nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
<ul class="ons-header-nav__list">
{% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
<li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
<a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{% endif %}
</header>
{% endmacro %}
.ons-header-nav {
position: relative;
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
margin: 0;
padding: 0.3rem 0;
@include mq(m) {
border-bottom: 4px solid transparent;
border-top: 0;
display: inline-block;
margin: 0 0 0 1rem;
padding: 0 0 0.3rem;
position: relative;
text-align: center;
&:first-child {
margin-left: 0;
}
&--active,
&:hover {
border-color: $color-white;
}
}
}
&__item + &__item--secondary {
border-top: 2px solid $color-white;
margin-top: 0.5rem;
}
&__link {
color: $color-white;
display: block;
font-size: 0.9rem;
margin: 0 0.35rem;
padding: 0 0.65rem;
text-decoration: none;
&:hover,
&:focus {
color: #c2ecff;
text-decoration: none;
}
@include mq(m) {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
&:hover,
&:focus {
color: $color-white;
}
}
}
&__item--active &__link {
font-weight: 700;
}
}
.ons-header-service-nav {
&__list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 0 0 1rem;
&:first-child {
margin-left: 0;
}
}
}
// Block
.ons-header {
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
position: relative;
& &__title--svg-logo {
display: block;
fill: $color-white;
@include mq(m) {
margin: 0.84rem 0;
}
@include mq(xxs, 399px) {
max-width: 160px;
}
}
// Elements
&__top {
background: $color-header-top;
width: 100%;
}
&__grid-top {
height: 54px;
@include mq(xs) {
height: 46px;
}
}
&__grid-top-nisra {
@include mq(xs) {
height: 76px;
}
}
&__main {
background: $color-header;
padding: 0.56rem 0;
@include mq(m) {
height: 95px;
}
&--border {
border-bottom: 3px solid $color-header;
border-top: 3px solid $color-header;
padding: 0.934rem 0;
}
&--with-description {
height: auto;
}
}
&__title {
@extend .ons-u-fs-r--b;
@extend .ons-u-fs-xl\@xxs;
color: $color-white;
@include mq(m) {
margin-top: 0.8rem;
}
&--with-description,
&--with-button {
@include mq(m) {
margin-top: 0.45rem;
}
}
//to allow for differences in size between welsh and english logos
&-census-logo-en {
@include mq(xxs) {
margin: 0.19rem 0 0.2rem;
padding: 0.25rem 0;
}
}
&-link {
display: block;
text-decoration: none;
&:focus {
.ons-header__title--svg-logo {
fill: $color-text-link-focus;
}
.ons-header__title {
color: $color-text-link-focus;
}
}
&:hover {
text-decoration: underline solid $color-text-inverse-link 2px;
}
}
&--nav-adj {
@include mq(399px) {
padding-top: 0.2rem;
}
}
}
&__desc {
@extend .ons-u-fs-s;
@extend .ons-u-fs-r\@s;
color: $color-white;
margin: 0;
@include mq(m) {
margin: 0 0 1rem;
}
}
// Modifier - Hero variant
&--hero {
.ons-header {
&__title {
@extend .ons-u-fs-m;
@extend .ons-u-fs-xxl\@m;
}
}
}
&--internal & {
&__top {
background: $color-header-top-internal;
.ons-svg-logo {
display: block;
fill: $color-white;
&--accent {
fill: $color-ons-logo-secondary;
}
}
}
&__logo-link:focus {
background-color: transparent;
box-shadow: none;
outline: 3px solid $color-focus;
}
&__grid-top {
min-height: 36px;
}
&-service-nav__link {
color: $color-white;
&:hover {
text-decoration: underline solid $color-white 3px;
}
}
}
.ons-svg-logo,
.ons-nisra-svg-logo {
display: block;
}
.ons-svg-logo {
fill: $color-ons-logo-primary;
&--accent {
fill: $color-ons-logo-secondary;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-nisra-logo-primary;
}
.ons-st1 {
fill: $color-nisra-logo-secondary;
}
.ons-st2 {
fill: $color-nisra-logo-tertiary;
}
}
&__logo-link:focus {
.ons-svg-logo {
fill: $color-black !important;
&--accent {
fill: $color-black !important;
}
}
.ons-nisra-svg-logo {
.ons-st0 {
fill: $color-black !important;
}
.ons-st1 {
fill: $color-black !important;
}
.ons-st2 {
fill: $color-black !important;
}
}
}
.ons-header__logo--large {
@include mq(xxs, 399px) {
display: none;
}
}
.ons-header__logo--small {
@include mq(400px) {
display: none;
}
}
&__logo-link,
&__logo-link:hover {
text-decoration: none;
}
&__logo-link {
display: block;
}
&__bottom {
background: $color-header;
margin-top: -0.03rem;
}
&-search {
padding: 1rem;
@include mq(m) {
bottom: 65px;
padding: 0;
position: absolute;
right: 1rem;
width: 20rem;
}
}
}
Help improve this component
Let us know how we could improve this component or share your user research findings. Discuss the ‘Header’ component on GitHub