Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Header

Overview

Use the Office for National Statistics (ONS) header to show users which ONS service they are using.

Example Header Default contents

Nunjucks

{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Page title',
        "mastheadLogoUrl": '#0',
        "titleUrl": '#0'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
phasePhaseBanner (ref)falseSettings to set the Phase banner component within the HTML <header> element
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport
classesstringfalseClasses to add to the wrapping header
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description”
mastheadLogoUrlstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
mastheadLogoobject<MastheadLogo>falseSettings for a custom organisation logo in the masthead. Defaults to the ONS logo.
languageobject<Language>falseSettings for the language selector
serviceLinksobject<ServiceLinks>falseSettings for the service links in the masthead
titlestringtrue (unless titleLogo is set)The title for the service
descriptionstringfalseTagline or description for the service
titleAsH1booleanfalseOverride to wrap the header title in an <h1> heading
titleLogoobject<TitleLogo>falseSettings for a custom title logo in the header.
titleUrlstringfalseWraps the title logo in a link. Set the URL for the HTML href attribute for the link.
buttonobject<SignOutButton>falseSettings for the sign out button in the header used to exit a transactional service
navigationarray<Navigation>falseSettings for the main menu links
MastheadLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLfalseAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
multipleLogosobject<MultipleLogos>falseAllows for up to three logos to be used in the masthead.
MultipleLogos
NameTypeRequiredDescription
logo1object<LogoObject>trueFirst Logo
logo2object<LogoObject>falseSecond Logo
logo3object<LogoObject>falseThird Logo
LogoObject
NameTypeRequiredDescription
logoImageHTML or stringfalseAny HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon.
logoURLstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
TitleLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLtrueAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
ServiceLinks
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports.
classesstringfalseClasses to add to the <nav> element
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Service links navigation”.
ariaListLabelstringfalseThe aria-label attribute added to the <ul> element. Defaults to “Service links”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
toggleServicesButtonobject<ToggleButton>trueSettings for the mobile service links toggle button
Language
NameTypeRequiredDescription
languagesarray<languages>trueSettings for an array of language toggle links
Languages
NameTypeRequiredDescription
urlstringtrueURL to change the application language
ISOCodestringtrueThe ISO language code for the language
textstringtrueThe name of the language to display
textAbbrstringfalseAbbreviated version of the language text can be provided. This will be displayed on small viewports
currentbooleantrueThe current selected language
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details element
Navigation
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports.
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Main menu”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
currentPathstring or array<string>trueThe path of the current active page. Multiple paths can be provided using an array to highlight nested navigation.
toggleButtonarray<ToggleButton>trueSettings for the navigation menu toggle button displayed on small viewports
removeHorizontalSubNavbooleanfalseSet to “true” to remove the sub navigation
ToggleButton
NameTypeRequiredDescription
textstringfalseThe text for the toggle button label. Defaults to “Menu”.
ariaLabelstringfalseThe aria-label attribute for the toggle button. Defaults to “Toggle menu”.
Item
NameTypeRequiredDescription
classesstringfalseClasses to add to the list item element
urlstringtrueThe URL for the HTML href attribute for the path to the linked page
textstringtrueThe text label for the link
idstringfalseThe HTML id of the link
ariaLabelstringfalseThe aria-label for the item.
SignOutButton
NameTypeRequiredDescription
textstringtrueText for the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
urlstringfalseIf set, will create an HTML anchor link with the required classes and attributes
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button

HTML

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

When to use this component

You should use the ONS header at the top of every page of your ONS service.

Variants

Internal

Use this for internal services for ONS staff.

Set the variant parameter with the value “internal”.

Example Header Internal contents

Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Service title',
        "mastheadLogoUrl": '#0',
        "variants": 'internal',
        "titleUrl": '#0',
        "serviceLinks": {
            "id": "service-links-internal",
            "ariaLabel": 'Services menu',
            "ariaListLabel": 'Menu',
            "toggleServicesButton": {
                "text": 'Account',
                "ariaLabel": 'Toggle services menu'
            },
            "itemsList": [
                {
                    "text": "Jacky Turner",
                    "iconType": 'person'
                },
                {
                    "text": "Sign out",
                    "url": "#0"
                }
            ]
        }
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
phasePhaseBanner (ref)falseSettings to set the Phase banner component within the HTML <header> element
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport
classesstringfalseClasses to add to the wrapping header
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description”
mastheadLogoUrlstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
mastheadLogoobject<MastheadLogo>falseSettings for a custom organisation logo in the masthead. Defaults to the ONS logo.
languageobject<Language>falseSettings for the language selector
serviceLinksobject<ServiceLinks>falseSettings for the service links in the masthead
titlestringtrue (unless titleLogo is set)The title for the service
descriptionstringfalseTagline or description for the service
titleAsH1booleanfalseOverride to wrap the header title in an <h1> heading
titleLogoobject<TitleLogo>falseSettings for a custom title logo in the header.
titleUrlstringfalseWraps the title logo in a link. Set the URL for the HTML href attribute for the link.
buttonobject<SignOutButton>falseSettings for the sign out button in the header used to exit a transactional service
navigationarray<Navigation>falseSettings for the main menu links
MastheadLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLfalseAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
multipleLogosobject<MultipleLogos>falseAllows for up to three logos to be used in the masthead.
MultipleLogos
NameTypeRequiredDescription
logo1object<LogoObject>trueFirst Logo
logo2object<LogoObject>falseSecond Logo
logo3object<LogoObject>falseThird Logo
LogoObject
NameTypeRequiredDescription
logoImageHTML or stringfalseAny HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon.
logoURLstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
TitleLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLtrueAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
ServiceLinks
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports.
classesstringfalseClasses to add to the <nav> element
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Service links navigation”.
ariaListLabelstringfalseThe aria-label attribute added to the <ul> element. Defaults to “Service links”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
toggleServicesButtonobject<ToggleButton>trueSettings for the mobile service links toggle button
Language
NameTypeRequiredDescription
languagesarray<languages>trueSettings for an array of language toggle links
Languages
NameTypeRequiredDescription
urlstringtrueURL to change the application language
ISOCodestringtrueThe ISO language code for the language
textstringtrueThe name of the language to display
textAbbrstringfalseAbbreviated version of the language text can be provided. This will be displayed on small viewports
currentbooleantrueThe current selected language
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details element
Navigation
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports.
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Main menu”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
currentPathstring or array<string>trueThe path of the current active page. Multiple paths can be provided using an array to highlight nested navigation.
toggleButtonarray<ToggleButton>trueSettings for the navigation menu toggle button displayed on small viewports
removeHorizontalSubNavbooleanfalseSet to “true” to remove the sub navigation
ToggleButton
NameTypeRequiredDescription
textstringfalseThe text for the toggle button label. Defaults to “Menu”.
ariaLabelstringfalseThe aria-label attribute for the toggle button. Defaults to “Toggle menu”.
Item
NameTypeRequiredDescription
classesstringfalseClasses to add to the list item element
urlstringtrueThe URL for the HTML href attribute for the path to the linked page
textstringtrueThe text label for the link
idstringfalseThe HTML id of the link
ariaLabelstringfalseThe aria-label for the item.
SignOutButton
NameTypeRequiredDescription
textstringtrueText for the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
urlstringfalseIf set, will create an HTML anchor link with the required classes and attributes
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button
HTML
<header class="ons-header ons-header--internal" role="banner">
  <div class="ons-browser-banner">
    <div class="ons-container">
      <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer supports your
          browser.</span><span class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
            href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span></p>
    </div>
  </div>
  <div class="ons-header__top">
    <div class="ons-container">
      <div
        class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
        <div class="ons-grid__col ons-col-auto">
          <a class="ons-header__org-logo-link" href="#0">
            <div class="ons-header__org-logo ons-header__org-logo--large">
              <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19"
                viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                  <path
                    d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                  <path
                    d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                  <path
                    d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path
                    d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path
                    d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path
                    d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path
                    d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path
                    d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path
                    d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path
                    d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path
                    d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path
                    d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path
                    d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path
                    d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path
                    d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path
                    d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path
                    d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon
                    points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path
                    d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path
                    d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path
                    d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path
                    d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path
                    d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path
                    d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path
                    d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path
                    d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </div>
            <div class="ons-header__org-logo ons-header__org-logo--small">
              <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
                viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                  <path
                    d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                  <path
                    d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                  <path
                    d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </div>
          </a>
        </div>
        <div class="ons-header__links ons-grid__col ons-u-ml-auto">
          <div class="ons-grid__col ons-col-auto ons-u-d-no@xxs@m">
            <nav class="ons-header-service-nav ons-header-service-nav--main " aria-label="Services menu">
              <ul class="ons-header-service-nav__list">
                <li class="ons-header-service-nav__item">
                  <svg class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                    fill="currentColor">
                    <path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
                    <circle cx="6" cy="3" r="3" />
                  </svg> Jacky Turner
                </li>
                <li class="ons-header-service-nav__item">
                  <a href="#0" class="ons-header-service-nav__link">Sign out</a>
                </li>
              </ul>
            </nav>
          </div>
          <div class="ons-grid__col ons-col-auto ons-u-d-no@m">
            <button type="button"
              class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--text-link ons-btn--text-link-inverse"
              aria-label="Toggle services menu" aria-controls="service-links-internal" aria-expanded="false">
              <span class="ons-btn__inner"><span class="ons-btn__text">Account</span><svg class="ons-icon ons-u-ml-xs"
                  viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                  <path
                    d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                    transform="translate(-5.02 -1.59)" />
                </svg></span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav"
      id="service-links-internal" aria-label="Services menu">
      <ul class="ons-header-service-nav__list">
        <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
          <svg class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
            fill="currentColor">
            <path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
            <circle cx="6" cy="3" r="3" />
          </svg> Jacky Turner
        </li>
        <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
          <a href="#0" class="ons-header-service-nav__link">Sign out</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div
        class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Service title</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

External survey with sign out button and language toggle

The external header for public-facing surveys provides a button to save and sign out.

Translated surveys also use a persistent language toggle to allow users to change language.

The signoutButton is removed from the header and displayed in the footer when the width of the viewport is below the medium breakpoint, when using the base page template.

Example Header External For Surveys contents

Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Survey title',
        "mastheadLogoUrl": '#0',
        "button": {
            "text": 'Save and sign out',
            "url": '#0',
            "iconType": 'exit',
            "iconPosition": 'after'
        },
        "language": {
            "languages": [
                {
                    "url": '#0',
                    "ISOCode": 'en',
                    "text": 'English',
                    "current": true
                },
                {
                    "url": '#0',
                    "ISOCode": 'cy',
                    "text": 'Cymraeg',
                    "current": false
                }
            ]
        }
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
phasePhaseBanner (ref)falseSettings to set the Phase banner component within the HTML <header> element
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport
classesstringfalseClasses to add to the wrapping header
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description”
mastheadLogoUrlstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
mastheadLogoobject<MastheadLogo>falseSettings for a custom organisation logo in the masthead. Defaults to the ONS logo.
languageobject<Language>falseSettings for the language selector
serviceLinksobject<ServiceLinks>falseSettings for the service links in the masthead
titlestringtrue (unless titleLogo is set)The title for the service
descriptionstringfalseTagline or description for the service
titleAsH1booleanfalseOverride to wrap the header title in an <h1> heading
titleLogoobject<TitleLogo>falseSettings for a custom title logo in the header.
titleUrlstringfalseWraps the title logo in a link. Set the URL for the HTML href attribute for the link.
buttonobject<SignOutButton>falseSettings for the sign out button in the header used to exit a transactional service
navigationarray<Navigation>falseSettings for the main menu links
MastheadLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLfalseAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
multipleLogosobject<MultipleLogos>falseAllows for up to three logos to be used in the masthead.
MultipleLogos
NameTypeRequiredDescription
logo1object<LogoObject>trueFirst Logo
logo2object<LogoObject>falseSecond Logo
logo3object<LogoObject>falseThird Logo
LogoObject
NameTypeRequiredDescription
logoImageHTML or stringfalseAny HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon.
logoURLstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
TitleLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLtrueAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
ServiceLinks
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports.
classesstringfalseClasses to add to the <nav> element
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Service links navigation”.
ariaListLabelstringfalseThe aria-label attribute added to the <ul> element. Defaults to “Service links”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
toggleServicesButtonobject<ToggleButton>trueSettings for the mobile service links toggle button
Language
NameTypeRequiredDescription
languagesarray<languages>trueSettings for an array of language toggle links
Languages
NameTypeRequiredDescription
urlstringtrueURL to change the application language
ISOCodestringtrueThe ISO language code for the language
textstringtrueThe name of the language to display
textAbbrstringfalseAbbreviated version of the language text can be provided. This will be displayed on small viewports
currentbooleantrueThe current selected language
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details element
Navigation
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports.
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Main menu”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
currentPathstring or array<string>trueThe path of the current active page. Multiple paths can be provided using an array to highlight nested navigation.
toggleButtonarray<ToggleButton>trueSettings for the navigation menu toggle button displayed on small viewports
removeHorizontalSubNavbooleanfalseSet to “true” to remove the sub navigation
ToggleButton
NameTypeRequiredDescription
textstringfalseThe text for the toggle button label. Defaults to “Menu”.
ariaLabelstringfalseThe aria-label attribute for the toggle button. Defaults to “Toggle menu”.
Item
NameTypeRequiredDescription
classesstringfalseClasses to add to the list item element
urlstringtrueThe URL for the HTML href attribute for the path to the linked page
textstringtrueThe text label for the link
idstringfalseThe HTML id of the link
ariaLabelstringfalseThe aria-label for the item.
SignOutButton
NameTypeRequiredDescription
textstringtrueText for the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
urlstringfalseIf set, will create an HTML anchor link with the required classes and attributes
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button
HTML
<header class="ons-header" role="banner">
  <div class="ons-browser-banner">
    <div class="ons-container">
      <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer supports your
          browser.</span><span class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
            href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span></p>
    </div>
  </div>
  <div class="ons-header__top">
    <div class="ons-container">
      <div
        class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
        <div class="ons-grid__col ons-col-auto">
          <a class="ons-header__org-logo-link" href="#0">
            <div class="ons-header__org-logo ons-header__org-logo--large">
              <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19"
                viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                  <path
                    d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                  <path
                    d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                  <path
                    d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path
                    d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path
                    d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path
                    d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path
                    d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path
                    d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path
                    d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path
                    d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path
                    d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path
                    d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path
                    d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path
                    d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path
                    d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path
                    d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path
                    d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon
                    points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path
                    d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path
                    d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path
                    d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path
                    d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path
                    d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path
                    d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path
                    d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path
                    d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </div>
            <div class="ons-header__org-logo ons-header__org-logo--small">
              <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
                viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                  <path
                    d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                  <path
                    d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                  <path
                    d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </div>
          </a>
        </div>
        <div class="ons-header__links ons-grid__col ons-u-ml-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--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <div class="ons-header__title">Survey title</div>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
          <a href="#0" role="button" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
            <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg
                class="ons-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path
                  d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z"
                  transform="translate(-2 -2)" />
                <path
                  d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z"
                  transform="translate(-2 -2)" />
              </svg></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

External with main navigation

Use this for services that require a main navigation.

When the width of the viewport is below the large breakpoint, the navigation will be hidden. A menu button is instead shown which allows the navigation menu to be open and closed.

Example Header External With Navigation contents

Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "title": 'Design system',
        "titleUrl": '#0',
        "navigation": {
            "id": 'main-nav',
            "ariaLabel": 'Main menu',
            "currentPath": '#home',
            "itemsList": [
                {
                    "text": 'Home',
                    "url": '#home'
                },
                {
                    "text": 'Guidance',
                    "url": '#0'
                },
                {
                    "text": 'Foundations',
                    "url": '#0'
                },
                {
                    "text": 'Components',
                    "url": '#0'
                },
                {
                    "text": 'Patterns',
                    "url": '#0'
                }
            ],
            "toggleNavigationButton": {
                "text": 'Menu',
                "ariaLabel": 'Toggle main menu'
            }
        }
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
phasePhaseBanner (ref)falseSettings to set the Phase banner component within the HTML <header> element
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport
classesstringfalseClasses to add to the wrapping header
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description”
mastheadLogoUrlstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
mastheadLogoobject<MastheadLogo>falseSettings for a custom organisation logo in the masthead. Defaults to the ONS logo.
languageobject<Language>falseSettings for the language selector
serviceLinksobject<ServiceLinks>falseSettings for the service links in the masthead
titlestringtrue (unless titleLogo is set)The title for the service
descriptionstringfalseTagline or description for the service
titleAsH1booleanfalseOverride to wrap the header title in an <h1> heading
titleLogoobject<TitleLogo>falseSettings for a custom title logo in the header.
titleUrlstringfalseWraps the title logo in a link. Set the URL for the HTML href attribute for the link.
buttonobject<SignOutButton>falseSettings for the sign out button in the header used to exit a transactional service
navigationarray<Navigation>falseSettings for the main menu links
MastheadLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLfalseAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
multipleLogosobject<MultipleLogos>falseAllows for up to three logos to be used in the masthead.
MultipleLogos
NameTypeRequiredDescription
logo1object<LogoObject>trueFirst Logo
logo2object<LogoObject>falseSecond Logo
logo3object<LogoObject>falseThird Logo
LogoObject
NameTypeRequiredDescription
logoImageHTML or stringfalseAny HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon.
logoURLstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
TitleLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLtrueAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
ServiceLinks
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports.
classesstringfalseClasses to add to the <nav> element
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Service links navigation”.
ariaListLabelstringfalseThe aria-label attribute added to the <ul> element. Defaults to “Service links”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
toggleServicesButtonobject<ToggleButton>trueSettings for the mobile service links toggle button
Language
NameTypeRequiredDescription
languagesarray<languages>trueSettings for an array of language toggle links
Languages
NameTypeRequiredDescription
urlstringtrueURL to change the application language
ISOCodestringtrueThe ISO language code for the language
textstringtrueThe name of the language to display
textAbbrstringfalseAbbreviated version of the language text can be provided. This will be displayed on small viewports
currentbooleantrueThe current selected language
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details element
Navigation
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports.
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Main menu”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
currentPathstring or array<string>trueThe path of the current active page. Multiple paths can be provided using an array to highlight nested navigation.
toggleButtonarray<ToggleButton>trueSettings for the navigation menu toggle button displayed on small viewports
removeHorizontalSubNavbooleanfalseSet to “true” to remove the sub navigation
ToggleButton
NameTypeRequiredDescription
textstringfalseThe text for the toggle button label. Defaults to “Menu”.
ariaLabelstringfalseThe aria-label attribute for the toggle button. Defaults to “Toggle menu”.
Item
NameTypeRequiredDescription
classesstringfalseClasses to add to the list item element
urlstringtrueThe URL for the HTML href attribute for the path to the linked page
textstringtrueThe text label for the link
idstringfalseThe HTML id of the link
ariaLabelstringfalseThe aria-label for the item.
SignOutButton
NameTypeRequiredDescription
textstringtrueText for the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
urlstringfalseIf set, will create an HTML anchor link with the required classes and attributes
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button
HTML
<header class="ons-header" role="banner">
  <div class="ons-browser-banner">
    <div class="ons-container">
      <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer supports your
          browser.</span><span class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
            href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span></p>
    </div>
  </div>
  <div class="ons-header__top">
    <div class="ons-container">
      <div
        class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
        <div class="ons-grid__col ons-col-auto">
          <div class="ons-header__org-logo ons-header__org-logo--large">
            <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60"
              aria-labelledby="ons-logo-en-alt">
              <title id="ons-logo-en-alt">Office for National Statistics logo</title>
              <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                <path
                  d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
              </g>
              <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                <path
                  d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
              </g>
              <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                <path
                  d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                <path
                  d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                <path
                  d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                <path
                  d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                <path
                  d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                <path
                  d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                <path
                  d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                <path
                  d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                <path
                  d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                <path
                  d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                <path
                  d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                <path
                  d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                <path
                  d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                <path
                  d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                <path
                  d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                <polygon
                  points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                <path
                  d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                <path
                  d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                <path
                  d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                <path
                  d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                <path
                  d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                <path
                  d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                <path
                  d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                <path
                  d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                <path
                  d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                <path
                  d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
              </g>
            </svg>
          </div>
          <div class="ons-header__org-logo ons-header__org-logo--small">
            <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116"
              aria-labelledby="ons-logo-stacked-en-alt">
              <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
              <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                <path
                  d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
              </g>
              <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                <path
                  d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
              </g>
              <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                <path
                  d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
              </g>
            </svg>
          </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">
          <button type="submit"
            class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost"
            aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
            <span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-xs"
                viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                <path
                  d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                  transform="translate(-5.02 -1.59)" />
              </svg></span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-navigation-wrapper">
    <div class="ons-container ons-container--gutterless@xxs@l">
      <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="main-nav" aria-label="Main menu"
        data-analytics="header-navigation">
        <ul class="ons-navigation__list">
          <li class="ons-navigation__item  ons-navigation__item--active">
            <a class="ons-navigation__link" href="#home"> Home </a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0"> Guidance </a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0"> Foundations </a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0"> Components </a>
          </li>
          <li class="ons-navigation__item ">
            <a class="ons-navigation__link" href="#0"> Patterns </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Use this to display links in the masthead.

When the width of the viewport is below the medium breakpoint, if more than one service link is used, the links will be hidden. A menu button is instead shown which allows the menu to be opened and closed.

External survey with description

This should be used when the service would benefit from a description which informs users of what the service provides.

It allows for text to be added below the title by adding the parameter description to the header configuration.

Example Header External For Survey With Description contents

Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}

{{
    onsHeader({
        "variants": 'description',
        "title": 'Service title',
        "titleUrl": '#0',
        "mastheadLogoUrl": '#0',
        "description": 'This is the description or tagline',
        "button": {
            "text": 'Save and sign out',
            "url": '#0',
            "iconType": 'exit',
            "iconPosition": 'after'
        }
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
phasePhaseBanner (ref)falseSettings to set the Phase banner component within the HTML <header> element
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport
classesstringfalseClasses to add to the wrapping header
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description”
mastheadLogoUrlstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
mastheadLogoobject<MastheadLogo>falseSettings for a custom organisation logo in the masthead. Defaults to the ONS logo.
languageobject<Language>falseSettings for the language selector
serviceLinksobject<ServiceLinks>falseSettings for the service links in the masthead
titlestringtrue (unless titleLogo is set)The title for the service
descriptionstringfalseTagline or description for the service
titleAsH1booleanfalseOverride to wrap the header title in an <h1> heading
titleLogoobject<TitleLogo>falseSettings for a custom title logo in the header.
titleUrlstringfalseWraps the title logo in a link. Set the URL for the HTML href attribute for the link.
buttonobject<SignOutButton>falseSettings for the sign out button in the header used to exit a transactional service
navigationarray<Navigation>falseSettings for the main menu links
MastheadLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLfalseAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
multipleLogosobject<MultipleLogos>falseAllows for up to three logos to be used in the masthead.
MultipleLogos
NameTypeRequiredDescription
logo1object<LogoObject>trueFirst Logo
logo2object<LogoObject>falseSecond Logo
logo3object<LogoObject>falseThird Logo
LogoObject
NameTypeRequiredDescription
logoImageHTML or stringfalseAny HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon.
logoURLstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
TitleLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLtrueAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
ServiceLinks
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports.
classesstringfalseClasses to add to the <nav> element
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Service links navigation”.
ariaListLabelstringfalseThe aria-label attribute added to the <ul> element. Defaults to “Service links”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
toggleServicesButtonobject<ToggleButton>trueSettings for the mobile service links toggle button
Language
NameTypeRequiredDescription
languagesarray<languages>trueSettings for an array of language toggle links
Languages
NameTypeRequiredDescription
urlstringtrueURL to change the application language
ISOCodestringtrueThe ISO language code for the language
textstringtrueThe name of the language to display
textAbbrstringfalseAbbreviated version of the language text can be provided. This will be displayed on small viewports
currentbooleantrueThe current selected language
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details element
Navigation
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports.
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Main menu”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
currentPathstring or array<string>trueThe path of the current active page. Multiple paths can be provided using an array to highlight nested navigation.
toggleButtonarray<ToggleButton>trueSettings for the navigation menu toggle button displayed on small viewports
removeHorizontalSubNavbooleanfalseSet to “true” to remove the sub navigation
ToggleButton
NameTypeRequiredDescription
textstringfalseThe text for the toggle button label. Defaults to “Menu”.
ariaLabelstringfalseThe aria-label attribute for the toggle button. Defaults to “Toggle menu”.
Item
NameTypeRequiredDescription
classesstringfalseClasses to add to the list item element
urlstringtrueThe URL for the HTML href attribute for the path to the linked page
textstringtrueThe text label for the link
idstringfalseThe HTML id of the link
ariaLabelstringfalseThe aria-label for the item.
SignOutButton
NameTypeRequiredDescription
textstringtrueText for the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
urlstringfalseIf set, will create an HTML anchor link with the required classes and attributes
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button
HTML
<header class="ons-header ons-header--description" role="banner">
  <div class="ons-browser-banner">
    <div class="ons-container">
      <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer supports your
          browser.</span><span class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
            href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span></p>
    </div>
  </div>
  <div class="ons-header__top">
    <div class="ons-container">
      <div
        class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
        <div class="ons-grid__col ons-col-auto">
          <a class="ons-header__org-logo-link" href="#0">
            <div class="ons-header__org-logo ons-header__org-logo--large">
              <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19"
                viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
                <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                  <path
                    d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                  <path
                    d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                  <path
                    d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path
                    d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path
                    d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path
                    d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path
                    d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path
                    d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path
                    d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path
                    d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path
                    d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path
                    d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path
                    d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path
                    d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path
                    d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path
                    d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path
                    d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon
                    points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path
                    d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path
                    d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path
                    d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path
                    d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path
                    d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path
                    d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path
                    d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path
                    d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path
                    d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </g>
              </svg>
            </div>
            <div class="ons-header__org-logo ons-header__org-logo--small">
              <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
                viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
                <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                  <path
                    d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                  <path
                    d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                </g>
                <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                  <path
                    d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                </g>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="ons-header__main">
    <div class="ons-container">
      <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
          <a class="ons-header__title-link" href="#0">
            <div class="ons-header__title">Service title</div>
          </a>
          <p class="ons-header__description">This is the description or tagline</p>
        </div>
        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
          <a href="#0" role="button" class="ons-btn ons-u-d-no@xxs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
            <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg
                class="ons-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path
                  d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z"
                  transform="translate(-2 -2)" />
                <path
                  d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z"
                  transform="translate(-2 -2)" />
              </svg></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

External with sub-navigation

Use this for services that require multiple levels of navigation.

When the width of the viewport is below the large breakpoint, a menu button is shown which allows the sub navigation menu to be open and closed.

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

Example Header External With Sub Navigation contents

Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}

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

Use this for services translated in Welsh.

Example Header External Welsh contents

Nunjucks
{% extends "layout/_template.njk" %}

{% set pageConfig = {
    "header": {
        "mastheadLogoUrl": '#0',
        "title": 'Gwasanaeth Cymraeg',
        "titleUrl": '#0',
        "language": {
            "languages": [
                {
                    "url": '#0',
                    "ISOCode": 'en',
                    "text": 'English',
                    "current": false
                },
                {
                    "url": '#0',
                    "ISOCode": 'cy',
                    "text": 'Cymraeg',
                    "current": true
                }
            ]
        }
    }
} %}

      {% block scripts %}
        {% from "components/embeddable/macro.njk" import embeddable %}
        {{ embeddable() }}

        <style>
          body {
            height: auto;
          }
        </style>

        <script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
      {% endblock %}
    
Nunjucks macro options
NameTypeRequiredDescription
phasePhaseBanner (ref)falseSettings to set the Phase banner component within the HTML <header> element
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport
classesstringfalseClasses to add to the wrapping header
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description”
mastheadLogoUrlstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
mastheadLogoobject<MastheadLogo>falseSettings for a custom organisation logo in the masthead. Defaults to the ONS logo.
languageobject<Language>falseSettings for the language selector
serviceLinksobject<ServiceLinks>falseSettings for the service links in the masthead
titlestringtrue (unless titleLogo is set)The title for the service
descriptionstringfalseTagline or description for the service
titleAsH1booleanfalseOverride to wrap the header title in an <h1> heading
titleLogoobject<TitleLogo>falseSettings for a custom title logo in the header.
titleUrlstringfalseWraps the title logo in a link. Set the URL for the HTML href attribute for the link.
buttonobject<SignOutButton>falseSettings for the sign out button in the header used to exit a transactional service
navigationarray<Navigation>falseSettings for the main menu links
MastheadLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLfalseAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
multipleLogosobject<MultipleLogos>falseAllows for up to three logos to be used in the masthead.
MultipleLogos
NameTypeRequiredDescription
logo1object<LogoObject>trueFirst Logo
logo2object<LogoObject>falseSecond Logo
logo3object<LogoObject>falseThird Logo
LogoObject
NameTypeRequiredDescription
logoImageHTML or stringfalseAny HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon.
logoURLstringfalseWraps the masthead logo in a link. Set the URL for the HTML href attribute for the link.
TitleLogo
NameTypeRequiredDescription
classesstringfalseClasses to be added. Helpful to add a margin utility class to control spacing.
largeHTMLtrueAny HTML to render an image for example embedded <svg> or <img>
smallHTMLfalseOptionally provide a version of the logo more suited to mobile viewports
ServiceLinks
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports.
classesstringfalseClasses to add to the <nav> element
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Service links navigation”.
ariaListLabelstringfalseThe aria-label attribute added to the <ul> element. Defaults to “Service links”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
toggleServicesButtonobject<ToggleButton>trueSettings for the mobile service links toggle button
Language
NameTypeRequiredDescription
languagesarray<languages>trueSettings for an array of language toggle links
Languages
NameTypeRequiredDescription
urlstringtrueURL to change the application language
ISOCodestringtrueThe ISO language code for the language
textstringtrueThe name of the language to display
textAbbrstringfalseAbbreviated version of the language text can be provided. This will be displayed on small viewports
currentbooleantrueThe current selected language
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details element
Navigation
NameTypeRequiredDescription
idstringtrueThe HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports.
ariaLabelstringfalseThe aria-label attribute added to the <nav> element. Defaults to “Main menu”.
itemsListarray<Item>trueSettings for an array of list items for each navigation link
currentPathstring or array<string>trueThe path of the current active page. Multiple paths can be provided using an array to highlight nested navigation.
toggleButtonarray<ToggleButton>trueSettings for the navigation menu toggle button displayed on small viewports
removeHorizontalSubNavbooleanfalseSet to “true” to remove the sub navigation
ToggleButton
NameTypeRequiredDescription
textstringfalseThe text for the toggle button label. Defaults to “Menu”.
ariaLabelstringfalseThe aria-label attribute for the toggle button. Defaults to “Toggle menu”.
Item
NameTypeRequiredDescription
classesstringfalseClasses to add to the list item element
urlstringtrueThe URL for the HTML href attribute for the path to the linked page
textstringtrueThe text label for the link
idstringfalseThe HTML id of the link
ariaLabelstringfalseThe aria-label for the item.
SignOutButton
NameTypeRequiredDescription
textstringtrueText for the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
urlstringfalseIf set, will create an HTML anchor link with the required classes and attributes
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button
HTML
<!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>Example Header External Welsh</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/css/main.css">
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/favicons/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="">
    <meta property="og:site_name" content="Gwasanaeth Cymraeg">
    <meta property="og:locale" content="cy">
    <meta property="og:locale:alternate" content="en">
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/favicons/favicon-32x32.png"
      sizes="32x32">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/favicons/favicon-16x16.png"
      sizes="16x16">
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/favicons/safari-pinned-tab.svg"
      color="#000000">
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/67.1.0/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-to-content" href="#main-content">Skip to main content</a>
        <header class="ons-header" role="banner">
          <div class="ons-browser-banner">
            <div class="ons-container">
              <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">Nid yw’r wefan hon yn
                  cefnogi eich porwr mwyach.</span><span class="ons-browser-banner__cta"> Gallwch <a
                    class="ons-browser-banner__link" href="https://cy.ons.gov.uk/help/browsers">ddiweddaru eich porwr
                    i’r fersiwn ddiweddaraf</a>.</span></p>
            </div>
          </div>
          <div class="ons-header__top">
            <div class="ons-container">
              <div
                class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
                <div class="ons-grid__col ons-col-auto">
                  <a class="ons-header__org-logo-link" href="#0">
                    <div class="ons-header__org-logo ons-header__org-logo--large">
                      <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="207" height="19"
                        viewBox="15 2 620 60" aria-labelledby="ons-logo-cy-alt">
                        <title id="ons-logo-cy-alt">Office for National Statistics logo</title>
                        <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                          <path
                            d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                        </g>
                        <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                          <path
                            d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                        </g>
                        <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                          <path
                            d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
                          <path
                            d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
                          <path
                            d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
                          <path
                            d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
                          <path
                            d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
                          <path
                            d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
                          <path
                            d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
                          <path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
                          <path
                            d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
                          <path
                            d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
                          <path
                            d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path
                            d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
                          <path
                            d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
                          <path
                            d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
                          <path
                            d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path
                            d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
                          <path
                            d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
                          <path
                            d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
                          <path d="M554.49,48.41V11.58h5.4V48.41Z" />
                          <path
                            d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
                          <path
                            d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
                          <path
                            d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
                          <path d="M643.63,48.41V11.58H649V48.41Z" />
                        </g>
                      </svg>
                    </div>
                    <div class="ons-header__org-logo ons-header__org-logo--small">
                      <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27"
                        viewBox="0 5 645 116" aria-labelledby="ons-logo-stacked-cy-alt">
                        <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                        <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                          <path
                            d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                        </g>
                        <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                          <path
                            d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                        </g>
                        <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                          <path
                            d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
                          <path
                            d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
                          <path
                            d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
                          <path
                            d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
                          <path
                            d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
                          <path
                            d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
                          <path
                            d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
                          <polygon
                            points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
                          <path
                            d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
                          <path
                            d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
                          <path
                            d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
                          <path
                            d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
                          <path
                            d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
                          <path
                            d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
                          <path
                            d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
                          <path
                            d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
                          <path
                            d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
                          <path
                            d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
                          <polygon
                            points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
                          <path
                            d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
                          <path
                            d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
                          <path
                            d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
                          <polygon
                            points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
                        </g>
                      </svg>
                    </div>
                  </a>
                </div>
                <div class="ons-header__links ons-grid__col ons-u-ml-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-12@m ">
              <main id="main-content" class="ons-page__main ">
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/67.1.0/scripts/main.js'],
          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>
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1709117646125"></script>
  </body>

</html>

A colourless variant for services with a multi-coloured primary brand logo.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Header’ component on GitHub (opens in a new tab)