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

Hero

Overview

A hero banner is a prominent visual element, usually appearing at the top of the page that introduces the page's primary purpose or highlights key content. It often includes a heading, secondary text and sometimes a call to action.

Important information:
This component requires documentation

When to use this component

Use the hero banner component to create immediate impact and communicate the main purpose or action on the page. use on landing pages, main topic pages or key article pages.

When not to use this component

Avoid using hero banners when user need to access content quickly such as on a dashboard page or search results or if the page doesn't have a single clear message or action to highlight.

How to use this component

The Hero Banner uses an H1 styled with the ons-u-fs-2xl utility class. For full heading guidance, see Headings in the Base page template
 

Variants

Default

Example Hero Default contents

Nunjucks

{% from "components/hero/_macro.njk" import onsHero %}
{{
    onsHero({
        "title": 'Design and build digital services for the ONS',
        "text": 'Everything you need to make accessible, consistent digital products',
        "button": {
            "url": '#0',
            "text": 'Get started'
        }
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
descriptionListDescriptionList (ref)falseSettings to set the DescriptionList component within the HTML <hero> element
officialStatisticsBadgebooleanfalseSet to “true” display the official statistics badge (only available for the "grey" hero variant)
officialStatisticsBadgeUrlstringfalseURL for the Statistics Badge
topicstringfalseTopic for the hero
breadcrumbsBreadcrumbs (ref)falseSettings to set the Breadcrumbs component within the HTML <hero> element
censusLogobooleanfalseSet to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanelObject<InformationPanel>falseSettings for the information panel (only available for the "grey" hero variant)
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button
InformationPanel
NameTypeRequiredDescription
panelTextstringfalseText for the panel
panelTypestringfalseA single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLinkObject<PanelLink>falseSettings for the panel link
PanelLink
NameTypeRequiredDescription
textstringfalseText for the panel link
urlstringfalseURL for the panel link

HTML

<section class="ons-hero ons-grid--gutterless ons-hero--">
  <div class="ons-hero__container ons-container">
    <div class="ons-hero__details ons-grid__col ons-col-8@m col-10@s@m">
      <div class="ons-hero__content">
        <div class="ons-hero__title-container">
          <header>
            <h1 class="ons-hero__title ons-u-fs-3xl">Design and build digital services for the ONS</h1>
          </header>
          <p class="ons-hero__text">Everything you need to make accessible, consistent digital products</p>
        </div>
      </div>
      <a href="#0" role="button" class="ons-btn ons-u-mt-s ons-btn--link ons-js-submit-btn">
        <span class="ons-btn__inner"><span class="ons-btn__text">Get started</span><svg class="ons-icon ons-u-ml-2xs"
            viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
            title="ons-icon-arrow-next">
            <path
              d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z" />
          </svg></span>
      </a>
    </div>
  </div>
</section>

Dark

Example Hero Dark contents

Nunjucks

{% from "components/hero/_macro.njk" import onsHero %}
{{
    onsHero({
        "title": 'Design and build digital services for the ONS',
        "text": 'Everything you need to make accessible, consistent digital products',
        "button": {
            "url": '#0',
            "text": 'Get started'
        },
        "variants": ['dark']
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
descriptionListDescriptionList (ref)falseSettings to set the DescriptionList component within the HTML <hero> element
officialStatisticsBadgebooleanfalseSet to “true” display the official statistics badge (only available for the "grey" hero variant)
officialStatisticsBadgeUrlstringfalseURL for the Statistics Badge
topicstringfalseTopic for the hero
breadcrumbsBreadcrumbs (ref)falseSettings to set the Breadcrumbs component within the HTML <hero> element
censusLogobooleanfalseSet to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanelObject<InformationPanel>falseSettings for the information panel (only available for the "grey" hero variant)
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button
InformationPanel
NameTypeRequiredDescription
panelTextstringfalseText for the panel
panelTypestringfalseA single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLinkObject<PanelLink>falseSettings for the panel link
PanelLink
NameTypeRequiredDescription
textstringfalseText for the panel link
urlstringfalseURL for the panel link

HTML

<section class="ons-hero ons-grid--gutterless ons-hero--dark">
  <div class="ons-hero__container ons-container">
    <div class="ons-hero__details ons-grid__col ons-col-8@m col-10@s@m">
      <div class="ons-hero__content">
        <div class="ons-hero__title-container">
          <header>
            <h1 class="ons-hero__title ons-u-fs-3xl">Design and build digital services for the ONS</h1>
          </header>
          <p class="ons-hero__text">Everything you need to make accessible, consistent digital products</p>
        </div>
      </div>
      <a href="#0" role="button" class="ons-btn ons-u-mt-s ons-btn--ghost ons-btn--link ons-js-submit-btn">
        <span class="ons-btn__inner"><span class="ons-btn__text">Get started</span><svg class="ons-icon ons-u-ml-2xs"
            viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
            title="ons-icon-arrow-next">
            <path
              d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z" />
          </svg></span>
      </a>
    </div>
  </div>
</section>

The navy blue hero component is used on the Landing page of the ONS Website

Example Hero Navy Blue contents

Nunjucks

{% from "components/hero/_macro.njk" import onsHero %}
{{
    onsHero({
        "title": 'Welcome to the ONS Beta',
        "text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
                new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
                The active links will take you through the journey to test the new design features.',
        "variants": 'navy-blue'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
descriptionListDescriptionList (ref)falseSettings to set the DescriptionList component within the HTML <hero> element
officialStatisticsBadgebooleanfalseSet to “true” display the official statistics badge (only available for the "grey" hero variant)
officialStatisticsBadgeUrlstringfalseURL for the Statistics Badge
topicstringfalseTopic for the hero
breadcrumbsBreadcrumbs (ref)falseSettings to set the Breadcrumbs component within the HTML <hero> element
censusLogobooleanfalseSet to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanelObject<InformationPanel>falseSettings for the information panel (only available for the "grey" hero variant)
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button
InformationPanel
NameTypeRequiredDescription
panelTextstringfalseText for the panel
panelTypestringfalseA single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLinkObject<PanelLink>falseSettings for the panel link
PanelLink
NameTypeRequiredDescription
textstringfalseText for the panel link
urlstringfalseURL for the panel link

HTML

<section class="ons-hero ons-grid--gutterless ons-hero--navy-blue">
  <div class="ons-hero__circles" aria-hidden="true">
    <div class="ons-hero__circle-1"></div>
    <div class="ons-hero__circle-2"></div>
    <div class="ons-hero__circle-3"></div>
    <div class="ons-hero__circle-4"></div>
    <div class="ons-hero__circle-5"></div>
    <div class="ons-hero__circle-6"></div>
    <div class="ons-hero__circle-7"></div>
    <div class="ons-hero__circle-8"></div>
    <div class="ons-hero__circle-9"></div>
    <div class="ons-hero__circle-10"></div>
    <div class="ons-hero__circle-11"></div>
    <div class="ons-hero__circle-12"></div>
  </div>
  <div class="ons-hero__container ons-container">
    <div class="ons-hero__details ons-grid__col ons-col-8@m col-10@s@m">
      <div class="ons-hero__content">
        <div class="ons-hero__title-container">
          <header>
            <h1 class="ons-hero__title ons-u-fs-3xl">Welcome to the ONS Beta</h1>
          </header>
          <p class="ons-hero__text">Thank you for participating in our beta test. This limited preview of the ONS
            website focuses on our new design and navigation for the retail insutry section. Please be aware that
            greyed-out links indicate sections still under development. The active links will take you through the
            journey to test the new design features.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Pale blue

The pale blue hero component is used on the Topic page on the ONS website

Example Hero Pale Blue contents

Nunjucks

{% from "components/hero/_macro.njk" import onsHero %}
{{
    onsHero({
        "topic": 'Topic',
        "title": 'Retail Industry',
        "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
                (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
                of how the wider economy is performing and the strength of consumer spending.',
        "breadcrumbs": {
            "ariaLabel": 'Breadcrumbs',
            "itemsList": [
                {
                    "url": '/',
                    "text": 'Home'
                }
            ]
        },
        "variants": 'pale-blue'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
descriptionListDescriptionList (ref)falseSettings to set the DescriptionList component within the HTML <hero> element
officialStatisticsBadgebooleanfalseSet to “true” display the official statistics badge (only available for the "grey" hero variant)
officialStatisticsBadgeUrlstringfalseURL for the Statistics Badge
topicstringfalseTopic for the hero
breadcrumbsBreadcrumbs (ref)falseSettings to set the Breadcrumbs component within the HTML <hero> element
censusLogobooleanfalseSet to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanelObject<InformationPanel>falseSettings for the information panel (only available for the "grey" hero variant)
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button
InformationPanel
NameTypeRequiredDescription
panelTextstringfalseText for the panel
panelTypestringfalseA single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLinkObject<PanelLink>falseSettings for the panel link
PanelLink
NameTypeRequiredDescription
textstringfalseText for the panel link
urlstringfalseURL for the panel link

HTML

<section class="ons-hero ons-grid--gutterless ons-hero--pale-blue">
  <div class="ons-hero__circles" aria-hidden="true">
    <div class="ons-hero__circle-1"></div>
    <div class="ons-hero__circle-2"></div>
    <div class="ons-hero__circle-3"></div>
  </div>
  <div class="ons-hero__container ons-container">
    <div class="ons-hero__details ons-grid__col ons-col-8@m col-10@s@m">
      <nav class="ons-breadcrumbs ons-u-pt-no" aria-label="Breadcrumbs">
        <ol class="ons-breadcrumbs__items ons-u-fs-s">
          <li class="ons-breadcrumbs__item" id="breadcrumb-1">
            <a class="ons-breadcrumbs__link" href="/">Home</a><svg class="ons-icon" viewBox="0 0 8 13"
              xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
              title="ons-icon-chevron">
              <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>
          </li>
        </ol>
      </nav>
      <h2 class="ons-hero--topic">Topic</h2>
      <div class="ons-hero__content">
        <div class="ons-hero__title-container">
          <header>
            <h1 class="ons-hero__title ons-u-fs-3xl">Retail Industry</h1>
          </header>
          <p class="ons-hero__text">Sales by retailers in Great Britain directly to end consumers, including spending on
            goods (in store and online) (Retail Sales Index) and spending on services (Index of Services). The industry
            as a whole is used as an indicator of how the wider economy is performing and the strength of consumer
            spending.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Grey

The grey hero component is used on the statistical article on the ONS website. The Census logo & Statistical logo is optional and can be toggled on or off.
With the status toggle, the user can select which one they present from 3 different options.

Example Hero Grey contents

Nunjucks

{% from "components/hero/_macro.njk" import onsHero %}
{{
    onsHero({
        "variants": 'grey',
        "detailsColumns": '12',
        "officialStatisticsBadge": true,
        "officialStatisticsBadgeUrl": 'https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/',
        "informationPanel":{
            "panelText": 'Latest release',
            "panelType": 'ons-green',
            "panelLink": {
                "text": 'View previous releases',
                "url": '#0'
            }
        },
        "topic": 'Statistical article',
        "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',
        "censusLogo": true,
        "breadcrumbs": {
            "ariaLabel": 'Breadcrumbs',
            "itemsList": [
                {
                    "url": '/',
                    "text": 'Home'
                },
                {
                    "url": '/',
                    "text": 'Business, industry and trade'
                },
                {
                    "url": '/',
                    "text": 'Retail industry'
                }
            ]
        },
        "descriptionList": {
            "termCol": "5",
            "descriptionCol": "7",
            "itemsList": [
                {
                    "term": "Release date:",
                    "descriptions": [
                        {
                            "description": "16 August 2024"
                        }
                    ]
                },
                {
                    "term": "Next release:",
                    "descriptions": [
                        {
                            "description": "20 September 2024"
                        }
                    ]
                },
                {
                    "term": "Edition:",
                    "descriptions": [
                        {
                            "description": "Latest"
                        }
                    ]
                },
                {
                    "term": "Releases:",
                    "descriptions": [
                        {
                            "description": "View previous releases"
                        }
                    ]
                },
                {
                    "term": "Contact:",
                    "descriptions": [
                        {
                            "description": "Retail Sales team"
                        }
                    ]
                }
            ]
        }
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
descriptionListDescriptionList (ref)falseSettings to set the DescriptionList component within the HTML <hero> element
officialStatisticsBadgebooleanfalseSet to “true” display the official statistics badge (only available for the "grey" hero variant)
officialStatisticsBadgeUrlstringfalseURL for the Statistics Badge
topicstringfalseTopic for the hero
breadcrumbsBreadcrumbs (ref)falseSettings to set the Breadcrumbs component within the HTML <hero> element
censusLogobooleanfalseSet to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanelObject<InformationPanel>falseSettings for the information panel (only available for the "grey" hero variant)
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button
InformationPanel
NameTypeRequiredDescription
panelTextstringfalseText for the panel
panelTypestringfalseA single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLinkObject<PanelLink>falseSettings for the panel link
PanelLink
NameTypeRequiredDescription
textstringfalseText for the panel link
urlstringfalseURL for the panel link

HTML

<section class="ons-hero ons-grid--gutterless ons-hero--grey">
  <div class="ons-hero__container ons-container">
    <div class="ons-hero__details ons-grid__col ons-col-12@m col-10@s@m">
      <nav class="ons-breadcrumbs ons-u-pt-no" aria-label="Breadcrumbs">
        <ol class="ons-breadcrumbs__items ons-u-fs-s">
          <li class="ons-breadcrumbs__item" id="breadcrumb-1">
            <a class="ons-breadcrumbs__link" href="/">Home</a><svg class="ons-icon" viewBox="0 0 8 13"
              xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
              title="ons-icon-chevron">
              <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>
          </li>
          <li class="ons-breadcrumbs__item" id="breadcrumb-2">
            <a class="ons-breadcrumbs__link" href="/">Business, industry and trade</a><svg class="ons-icon"
              viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
              title="ons-icon-chevron">
              <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>
          </li>
          <li class="ons-breadcrumbs__item" id="breadcrumb-3">
            <a class="ons-breadcrumbs__link" href="/">Retail industry</a><svg class="ons-icon" viewBox="0 0 8 13"
              xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
              title="ons-icon-chevron">
              <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>
          </li>
        </ol>
      </nav>
      <h2 class="ons-hero--topic">Statistical article</h2>
      <div class="ons-hero__content">
        <div class="ons-hero__title-container">
          <header>
            <h1 class="ons-hero__title ons-u-fs-3xl">Retail sales rise amid summer discounts and sporting events,
              according to a first estimate</h1>
          </header>
          <p class="ons-hero__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis
            ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.</p>
        </div>
        <div class="ons-hero__badge ons-u-mb-s">
          <a href="https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/"
            target="_blank" rel="noopener noreferrer" class="ons-hero__badge-link"><svg
              xmlns="http://www.w3.org/2000/svg" width="75" height="90" viewBox="-6 0 90 90" fill="none"
              title="ons-official-statistics-badge" focusable="false" role="img" class="ons-icon--logo">
              <title id="official-statistics-alt"> Offical Statistics Badge </title>
              <path
                d="M12.4999 92.59C7.18988 92.59 2.87988 88.27 2.87988 82.97C2.87988 77.67 7.19988 73.35 12.4999 73.35H64.4999C69.8099 73.35 74.1199 77.67 74.1199 82.97C74.1199 88.27 69.7999 92.59 64.4999 92.59H12.4999Z"
                fill="white" />
              <path
                d="M64.5 73.71C69.6 73.71 73.75 77.86 73.75 82.96C73.75 88.06 69.6 92.21 64.5 92.21H12.5C7.4 92.21 3.25 88.06 3.25 82.96C3.25 77.86 7.4 73.71 12.5 73.71H64.5ZM64.5 72.96H12.5C6.98 72.96 2.5 77.44 2.5 82.96C2.5 88.48 6.98 92.96 12.5 92.96H64.5C70.02 92.96 74.5 88.48 74.5 82.96C74.5 77.44 70.02 72.96 64.5 72.96Z"
                fill="#003C57" />
              <path
                d="M16.4702 86.67L15.9502 84.97H13.3502L12.8302 86.67H11.2002L13.7202 79.5H15.5702L18.1002 86.67H16.4702ZM15.5902 83.7C15.1102 82.16 14.8402 81.29 14.7802 81.09C14.7202 80.89 14.6802 80.73 14.6502 80.61C14.5402 81.03 14.2302 82.06 13.7302 83.7H15.5902Z"
                fill="#003C57" />
              <path
                d="M21.2004 86.76C19.5004 86.76 18.6504 85.83 18.6504 83.96C18.6504 83.03 18.8804 82.32 19.3404 81.83C19.8004 81.34 20.4604 81.09 21.3304 81.09C21.9604 81.09 22.5304 81.21 23.0304 81.46L22.5904 82.61C22.3604 82.52 22.1404 82.44 21.9404 82.38C21.7404 82.32 21.5404 82.29 21.3304 82.29C20.5604 82.29 20.1704 82.84 20.1704 83.94C20.1704 85.04 20.5604 85.54 21.3304 85.54C21.6204 85.54 21.8804 85.5 22.1304 85.43C22.3704 85.35 22.6204 85.23 22.8604 85.07V86.34C22.6204 86.49 22.3804 86.6 22.1304 86.66C21.8804 86.72 21.5804 86.75 21.2004 86.75V86.76Z"
                fill="#003C57" />
              <path
                d="M26.4504 86.76C24.7504 86.76 23.9004 85.83 23.9004 83.96C23.9004 83.03 24.1304 82.32 24.5904 81.83C25.0504 81.34 25.7104 81.09 26.5804 81.09C27.2104 81.09 27.7804 81.21 28.2804 81.46L27.8404 82.61C27.6104 82.52 27.3904 82.44 27.1904 82.38C26.9904 82.32 26.7904 82.29 26.5804 82.29C25.8104 82.29 25.4204 82.84 25.4204 83.94C25.4204 85.04 25.8104 85.54 26.5804 85.54C26.8704 85.54 27.1304 85.5 27.3804 85.43C27.6204 85.35 27.8704 85.23 28.1104 85.07V86.34C27.8704 86.49 27.6304 86.6 27.3804 86.66C27.1304 86.72 26.8204 86.75 26.4504 86.75V86.76Z"
                fill="#003C57" />
              <path
                d="M32.5197 81.11C32.7197 81.11 32.8897 81.12 33.0197 81.15L32.9097 82.55C32.7897 82.52 32.6397 82.5 32.4697 82.5C31.9997 82.5 31.6197 82.62 31.3597 82.87C31.0997 83.12 30.9597 83.46 30.9597 83.9V86.68H29.4697V81.22H30.5997L30.8197 82.14H30.8897C31.0597 81.83 31.2897 81.59 31.5797 81.4C31.8697 81.21 32.1797 81.12 32.5197 81.12V81.11Z"
                fill="#003C57" />
              <path
                d="M36.5803 86.76C35.7003 86.76 35.0103 86.52 34.5203 86.03C34.0303 85.54 33.7803 84.86 33.7803 83.97C33.7803 83.08 34.0103 82.35 34.4703 81.85C34.9303 81.35 35.5603 81.1 36.3703 81.1C37.1803 81.1 37.7403 81.32 38.1703 81.76C38.6003 82.2 38.8103 82.81 38.8103 83.58V84.3H35.2903C35.3103 84.72 35.4303 85.05 35.6703 85.29C35.9103 85.53 36.2303 85.65 36.6603 85.65C36.9903 85.65 37.3003 85.62 37.5903 85.55C37.8803 85.48 38.1903 85.37 38.5103 85.22V86.37C38.2503 86.5 37.9703 86.6 37.6803 86.66C37.3803 86.72 37.0203 86.76 36.6003 86.76H36.5803ZM36.3703 82.16C36.0503 82.16 35.8103 82.26 35.6303 82.46C35.4503 82.66 35.3503 82.94 35.3203 83.31H37.4103C37.4103 82.94 37.3103 82.66 37.1203 82.46C36.9303 82.26 36.6803 82.16 36.3703 82.16Z"
                fill="#003C57" />
              <path
                d="M41.85 86.7599C41.21 86.7599 40.71 86.5099 40.34 86.0099C39.97 85.5099 39.79 84.8199 39.79 83.9399C39.79 83.0599 39.98 82.3499 40.35 81.8499C40.72 81.3499 41.24 81.0999 41.89 81.0999C42.54 81.0999 43.1 81.3699 43.46 81.8999H43.51C43.43 81.4899 43.4 81.1299 43.4 80.8099V79.0599H44.89V86.6599H43.75L43.46 85.9499H43.4C43.06 86.4899 42.55 86.7599 41.85 86.7599ZM42.37 85.5699C42.75 85.5699 43.03 85.4599 43.21 85.2399C43.39 85.0199 43.48 84.6399 43.5 84.1099V83.9499C43.5 83.3599 43.41 82.9399 43.23 82.6899C43.05 82.4399 42.76 82.3099 42.35 82.3099C42.02 82.3099 41.76 82.4499 41.58 82.7299C41.39 83.0099 41.3 83.4199 41.3 83.9599C41.3 84.4999 41.39 84.8999 41.58 85.1699C41.77 85.4399 42.03 85.5699 42.37 85.5699Z"
                fill="#003C57" />
              <path
                d="M46.4805 79.7999C46.4805 79.3099 46.7505 79.0699 47.2905 79.0699C47.8305 79.0699 48.1005 79.3099 48.1005 79.7999C48.1005 80.0299 48.0305 80.2099 47.9005 80.3399C47.7605 80.4699 47.5605 80.5299 47.2905 80.5299C46.7505 80.5299 46.4805 80.2899 46.4805 79.7999ZM48.0305 86.6699H46.5405V81.2099H48.0305V86.6699Z"
                fill="#003C57" />
              <path
                d="M52.0004 85.5799C52.2604 85.5799 52.5704 85.5199 52.9404 85.4099V86.5199C52.5704 86.6899 52.1104 86.7699 51.5704 86.7699C50.9704 86.7699 50.5404 86.6199 50.2704 86.3199C50.0004 86.0199 49.8604 85.5699 49.8604 84.9599V82.3299H49.1504V81.6999L49.9704 81.1999L50.4004 80.0499H51.3504V81.2099H52.8804V82.3299H51.3504V84.9599C51.3504 85.1699 51.4104 85.3299 51.5304 85.4299C51.6504 85.5299 51.8104 85.5799 52.0004 85.5799Z"
                fill="#003C57" />
              <path
                d="M56.6105 86.76C55.7305 86.76 55.0406 86.52 54.5506 86.03C54.0606 85.54 53.8105 84.86 53.8105 83.97C53.8105 83.08 54.0405 82.35 54.5005 81.85C54.9605 81.35 55.5906 81.1 56.4006 81.1C57.2106 81.1 57.7705 81.32 58.2005 81.76C58.6305 82.2 58.8405 82.81 58.8405 83.58V84.3H55.3205C55.3405 84.72 55.4605 85.05 55.7005 85.29C55.9405 85.53 56.2606 85.65 56.6906 85.65C57.0206 85.65 57.3306 85.62 57.6206 85.55C57.9106 85.48 58.2206 85.37 58.5406 85.22V86.37C58.2806 86.5 58.0005 86.6 57.7105 86.66C57.4105 86.72 57.0505 86.76 56.6305 86.76H56.6105ZM56.4006 82.16C56.0806 82.16 55.8406 82.26 55.6606 82.46C55.4806 82.66 55.3805 82.94 55.3505 83.31H57.4406C57.4406 82.94 57.3406 82.66 57.1506 82.46C56.9606 82.26 56.7106 82.16 56.4006 82.16Z"
                fill="#003C57" />
              <path
                d="M61.8803 86.7599C61.2403 86.7599 60.7403 86.5099 60.3703 86.0099C60.0003 85.5099 59.8203 84.8199 59.8203 83.9399C59.8203 83.0599 60.0103 82.3499 60.3803 81.8499C60.7503 81.3499 61.2703 81.0999 61.9203 81.0999C62.6103 81.0999 63.1303 81.3699 63.4903 81.8999H63.5403C63.4603 81.4899 63.4303 81.1299 63.4303 80.8099V79.0599H64.9203V86.6599H63.7803L63.4903 85.9499H63.4303C63.0903 86.4899 62.5803 86.7599 61.8803 86.7599ZM62.4003 85.5699C62.7803 85.5699 63.0603 85.4599 63.2403 85.2399C63.4203 85.0199 63.5103 84.6399 63.5303 84.1099V83.9499C63.5303 83.3599 63.4403 82.9399 63.2603 82.6899C63.0803 82.4399 62.7903 82.3099 62.3803 82.3099C62.0503 82.3099 61.7903 82.4499 61.6103 82.7299C61.4303 83.0099 61.3303 83.4199 61.3303 83.9599C61.3303 84.4999 61.4203 84.8999 61.6103 85.1699C61.8003 85.4399 62.0603 85.5699 62.4103 85.5699H62.4003Z"
                fill="#003C57" />
              <path
                d="M1 38.5C1 17.79 17.79 1 38.5 1C59.21 1 76 17.79 76 38.5C76 59.21 59.21 76 38.5 76C17.79 76 1 59.21 1 38.5Z"
                fill="white" stroke="#003C57" stroke-width="0.75" stroke-miterlimit="10" />
              <path
                d="M16.3799 18.47C17.5699 19.28 18.2799 20.19 18.4999 21.2C18.7199 22.21 18.4499 23.27 17.6799 24.4C16.9299 25.51 16.0299 26.15 15.0099 26.32C13.9799 26.49 12.8699 26.17 11.6799 25.36C10.4999 24.56 9.79994 23.65 9.57994 22.64C9.35994 21.63 9.62994 20.56 10.3899 19.44C11.1599 18.31 12.0499 17.67 13.0599 17.51C14.0699 17.35 15.1799 17.67 16.3699 18.49L16.3799 18.47ZM13.0699 23.34C14.4399 24.27 15.4499 24.26 16.0999 23.31C16.4299 22.83 16.5099 22.35 16.3299 21.89C16.1599 21.43 15.7199 20.96 15.0099 20.48C14.2999 20 13.6999 19.76 13.1999 19.77C12.6999 19.77 12.2899 20.02 11.9699 20.49C11.3199 21.45 11.6799 22.4 13.0699 23.34Z"
                fill="#003C57" />
              <path
                d="M23.4603 18.2101L21.6303 19.5701L16.5303 12.6901L20.6003 9.68005L21.7103 11.1701L19.4703 12.8301L20.4403 14.1401L22.5003 12.6101L23.6103 14.1001L21.5503 15.6301L23.4703 18.2101H23.4603Z"
                fill="#003C57" />
              <path
                d="M29.6796 14.8301L27.5396 15.6201L24.5596 7.59008L29.3096 5.83008L29.9596 7.57008L27.3496 8.54008L27.9196 10.0701L30.3296 9.18008L30.9796 10.9201L28.5696 11.8101L29.6896 14.8301H29.6796Z"
                fill="#003C57" />
              <path d="M34.4002 13.55L33.4102 5.04002L35.7202 4.77002L36.7102 13.28L34.4002 13.55Z" fill="#003C57" />
              <path
                d="M44.0304 6.92005C43.4904 6.84005 43.0304 7.00005 42.6604 7.40005C42.2904 7.80005 42.0504 8.39005 41.9304 9.18005C41.6904 10.81 42.1904 11.72 43.4304 11.9C43.8104 11.95 44.1804 11.96 44.5404 11.9C44.9004 11.84 45.2804 11.77 45.6604 11.68L45.3704 13.62C44.6204 13.83 43.7904 13.87 42.9004 13.74C41.6204 13.55 40.6904 13.04 40.1204 12.19C39.5504 11.35 39.3604 10.23 39.5704 8.82005C39.7004 7.94005 39.9804 7.20005 40.4004 6.58005C40.8304 5.96005 41.3804 5.52005 42.0504 5.26005C42.7204 5.00005 43.4804 4.92005 44.3204 5.05005C45.2404 5.18005 46.0804 5.51005 46.8604 6.03005L45.8904 7.73005C45.6004 7.54005 45.3004 7.37005 45.0104 7.22005C44.7104 7.07005 44.3804 6.97005 44.0204 6.92005H44.0304Z"
                fill="#003C57" />
              <path d="M47.5098 14.87L50.9298 7.02002L53.0598 7.95002L49.6398 15.8L47.5098 14.87Z" fill="#003C57" />
              <path
                d="M56.0002 20.2L56.7002 18.69L54.5602 16.92L53.2002 17.88L51.2402 16.26L58.8802 11.42L61.2602 13.39L57.9502 21.82L56.0002 20.21V20.2ZM57.5402 16.93L58.1502 15.61C58.2802 15.31 58.4602 14.94 58.6802 14.48C58.9002 14.02 59.0702 13.69 59.1702 13.5C59.0202 13.63 58.7502 13.84 58.3802 14.13C58.0102 14.42 57.2602 14.96 56.1302 15.77L57.5302 16.93H57.5402Z"
                fill="#003C57" />
              <path
                d="M58.7197 23.1501L66.0297 18.6801L67.2397 20.6501L61.5297 24.1501L63.2497 26.9601L61.6597 27.9401L58.7297 23.1501H58.7197Z"
                fill="#003C57" />
              <path
                d="M9.56963 51.1301C9.06963 51.3001 8.57963 51.3201 8.09963 51.1901C7.61963 51.0701 7.19963 50.8001 6.81963 50.3901C6.43963 49.9801 6.14963 49.4501 5.92963 48.8001C5.74963 48.2601 5.63963 47.7901 5.58963 47.4001C5.53963 47.0101 5.54963 46.5801 5.60963 46.1201L7.56963 45.4701C7.49963 45.9601 7.46963 46.4501 7.49963 46.9401C7.52963 47.4301 7.60963 47.8701 7.72963 48.2401C7.83963 48.5701 7.96963 48.7901 8.13963 48.9001C8.29963 49.0101 8.46963 49.0401 8.64963 48.9801C8.75963 48.9401 8.84963 48.8801 8.90963 48.7901C8.96963 48.7001 9.01963 48.5701 9.05963 48.4101C9.09963 48.2501 9.14963 47.8301 9.21963 47.1501C9.27963 46.5401 9.38963 46.0701 9.51963 45.7201C9.65963 45.3801 9.84963 45.1001 10.0996 44.8701C10.3496 44.6401 10.6796 44.4701 11.0796 44.3301C11.8296 44.0801 12.4996 44.1601 13.0996 44.5601C13.6996 44.9701 14.1596 45.6401 14.4796 46.6001C14.7596 47.4401 14.8496 48.3601 14.7496 49.3701L12.8296 49.2601C12.9296 48.3801 12.8796 47.6701 12.6996 47.1201C12.5996 46.8301 12.4896 46.6401 12.3396 46.5501C12.1996 46.4501 12.0496 46.4301 11.8996 46.4801C11.7396 46.5301 11.6196 46.6601 11.5496 46.8701C11.4796 47.0801 11.3996 47.6001 11.3096 48.4401C11.2296 49.2401 11.0496 49.8401 10.7796 50.2401C10.5096 50.6401 10.0996 50.9201 9.54963 51.1001L9.56963 51.1301Z"
                fill="#003C57" />
              <path
                d="M11.11 58.62L9.79004 56.72L15.28 52.92L14.09 51.2L15.65 50.12L19.35 55.46L17.79 56.54L16.6 54.83L11.11 58.63V58.62Z"
                fill="#003C57" />
              <path
                d="M19.2596 66.4801L19.8996 64.9501L17.6896 63.2601L16.3696 64.2701L14.3496 62.7301L21.7896 57.5901L24.2396 59.4701L21.2696 68.0201L19.2596 66.4801ZM20.6696 63.1501L21.2296 61.8101C21.3496 61.5101 21.5096 61.1301 21.7196 60.6601C21.9196 60.1901 22.0796 59.8601 22.1796 59.6701C22.0296 59.8101 21.7796 60.0301 21.4196 60.3301C21.0596 60.6301 20.3296 61.2101 19.2296 62.0601L20.6796 63.1701L20.6696 63.1501Z"
                fill="#003C57" />
              <path
                d="M28.2894 70.83L26.1094 70.06L28.3194 63.76L26.3494 63.07L26.9794 61.28L33.0994 63.43L32.4694 65.22L30.4994 64.53L28.2894 70.83Z"
                fill="#003C57" />
              <path d="M34.9893 72.2L35.5693 63.65L37.8893 63.81L37.3093 72.36L34.9893 72.2Z" fill="#003C57" />
              <path
                d="M46.6697 68.85C46.7597 69.37 46.6997 69.86 46.4997 70.31C46.2997 70.76 45.9697 71.14 45.4997 71.45C45.0397 71.76 44.4697 71.97 43.7897 72.08C43.2297 72.17 42.7497 72.21 42.3497 72.19C41.9597 72.17 41.5397 72.1 41.0897 71.97L40.7597 69.93C41.2297 70.08 41.7097 70.18 42.1997 70.23C42.6897 70.28 43.1297 70.27 43.5297 70.21C43.8697 70.15 44.1097 70.05 44.2497 69.91C44.3897 69.77 44.4397 69.6 44.4097 69.42C44.3897 69.3 44.3397 69.21 44.2597 69.13C44.1797 69.05 44.0697 68.98 43.9097 68.92C43.7497 68.85 43.3497 68.73 42.6997 68.56C42.1097 68.4 41.6497 68.23 41.3397 68.03C41.0297 67.84 40.7797 67.6 40.5897 67.32C40.4097 67.04 40.2797 66.69 40.2097 66.27C40.0797 65.49 40.2697 64.84 40.7597 64.31C41.2497 63.78 41.9997 63.44 42.9897 63.27C43.8697 63.13 44.7897 63.18 45.7697 63.44L45.3597 65.32C44.5097 65.09 43.7997 65.02 43.2197 65.11C42.9197 65.16 42.7197 65.25 42.5997 65.37C42.4797 65.5 42.4397 65.64 42.4597 65.79C42.4897 65.96 42.5997 66.09 42.7897 66.19C42.9797 66.29 43.4897 66.46 44.2997 66.68C45.0797 66.89 45.6497 67.16 45.9897 67.49C46.3297 67.82 46.5497 68.27 46.6497 68.84L46.6697 68.85Z"
                fill="#003C57" />
              <path
                d="M54.2896 68.52L52.1996 69.52L49.3096 63.5L47.4196 64.41L46.5996 62.7L52.4496 59.89L53.2696 61.6L51.3896 62.5L54.2796 68.52H54.2896Z"
                fill="#003C57" />
              <path d="M59.78 64.94L54.21 58.43L55.98 56.92L61.55 63.43L59.78 64.94Z" fill="#003C57" />
              <path
                d="M61.29 53.34C60.97 53.79 60.91 54.27 61.1 54.78C61.29 55.29 61.71 55.78 62.35 56.24C63.69 57.19 64.73 57.16 65.45 56.14C65.67 55.83 65.84 55.5 65.96 55.15C66.08 54.8 66.18 54.43 66.27 54.06L67.87 55.19C67.71 55.96 67.38 56.71 66.85 57.44C66.1 58.49 65.22 59.09 64.21 59.22C63.2 59.35 62.12 59 60.96 58.18C60.24 57.67 59.7 57.08 59.34 56.42C58.98 55.76 58.84 55.07 58.91 54.35C58.98 53.63 59.26 52.92 59.75 52.23C60.29 51.48 60.96 50.87 61.78 50.41L62.86 52.04C62.56 52.21 62.27 52.4 62.01 52.6C61.75 52.8 61.51 53.05 61.3 53.34H61.29Z"
                fill="#003C57" />
              <path
                d="M69.3701 45.2701C69.8701 45.4401 70.2801 45.7101 70.5901 46.1001C70.9001 46.4801 71.0801 46.9501 71.1301 47.5101C71.1901 48.0601 71.1101 48.6701 70.8901 49.3101C70.7101 49.8501 70.5201 50.29 70.3201 50.64C70.1201 50.98 69.8601 51.3201 69.5401 51.6501L67.5801 51C67.9301 50.65 68.2501 50.2701 68.5201 49.8601C68.7901 49.4501 68.9901 49.0501 69.1101 48.6701C69.2201 48.3401 69.2401 48.0901 69.1801 47.9001C69.1201 47.7101 69.0001 47.59 68.8201 47.53C68.7101 47.49 68.6001 47.49 68.5001 47.53C68.4001 47.56 68.2801 47.6301 68.1501 47.7401C68.0201 47.8501 67.7301 48.1501 67.2701 48.6501C66.8501 49.1001 66.4901 49.4201 66.1701 49.6101C65.8601 49.8001 65.5301 49.91 65.2001 49.94C64.8701 49.97 64.5001 49.9201 64.1001 49.7901C63.3501 49.5401 62.8601 49.08 62.6201 48.39C62.3801 47.7 62.4201 46.89 62.7401 45.93C63.0201 45.09 63.5001 44.29 64.1801 43.55L65.6501 44.7901C65.0501 45.4301 64.6601 46.03 64.4701 46.59C64.3801 46.88 64.3601 47.1001 64.4101 47.2601C64.4701 47.4201 64.5701 47.5301 64.7201 47.5801C64.8801 47.6301 65.0501 47.6001 65.2301 47.4701C65.4101 47.3501 65.7901 46.9801 66.3701 46.3601C66.9201 45.7601 67.4201 45.3901 67.8701 45.2401C68.3201 45.0901 68.8201 45.1 69.3701 45.28V45.2701Z"
                fill="#003C57" />
              <path
                d="M38.5004 60.85C50.844 60.85 60.8504 50.8436 60.8504 38.5C60.8504 26.1565 50.844 16.15 38.5004 16.15C26.1568 16.15 16.1504 26.1565 16.1504 38.5C16.1504 50.8436 26.1568 60.85 38.5004 60.85Z"
                fill="#003C57" />
              <path d="M32.5902 37.8201H27.7402V46.7401H32.5902V37.8201Z" fill="white" />
              <path d="M40.1498 28.26H35.2998V46.73H40.1498V28.26Z" fill="white" />
              <path d="M47.7104 33.36H42.8604V46.73H47.7104V33.36Z" fill="white" />
              <path
                d="M42.6506 44.2001C42.2706 44.2001 41.9006 44.0501 41.6306 43.7801L37.3106 39.4601C36.7506 38.9001 36.7506 37.9901 37.3106 37.4201L37.9806 36.7601C38.2506 36.4901 38.6106 36.3401 39.0006 36.3401C39.3906 36.3401 39.7506 36.4901 40.0206 36.7601L42.6606 39.4001L50.5606 31.5001C50.8306 31.2301 51.1906 31.0801 51.5806 31.0801C51.9706 31.0801 52.3306 31.2301 52.6006 31.5001L53.2606 32.1601C53.8206 32.7201 53.8206 33.6301 53.2606 34.2001L43.6806 43.7801C43.4106 44.0501 43.0506 44.2001 42.6606 44.2001H42.6506Z"
                fill="#A8BD3A" />
              <path
                d="M51.5709 31.5801C51.8109 31.5801 52.0509 31.6701 52.2309 31.8601L52.8909 32.5201C53.2609 32.8901 53.2609 33.4801 52.8909 33.8501L43.3109 43.4301C43.1309 43.6101 42.8909 43.7101 42.6509 43.7101C42.4109 43.7101 42.1709 43.6201 41.9909 43.4301L37.6709 39.1101C37.3009 38.7401 37.3009 38.1501 37.6709 37.7801L38.3309 37.1201C38.5109 36.9401 38.7509 36.8501 38.9909 36.8501C39.2309 36.8501 39.4709 36.9401 39.6509 37.1301L42.6409 40.1201L50.9009 31.8601C51.0809 31.6801 51.3209 31.5801 51.5609 31.5801M51.5609 30.5801C51.0409 30.5801 50.5609 30.7801 50.1909 31.1501L42.6409 38.7001L40.3509 36.4101C39.9809 36.0401 39.5009 35.8401 38.9809 35.8401C38.4609 35.8401 37.9809 36.0401 37.6109 36.4101L36.9509 37.0701C36.1909 37.8301 36.1909 39.0601 36.9509 39.8101L41.2709 44.1301C41.6409 44.5001 42.1209 44.7001 42.6409 44.7001C43.1609 44.7001 43.6409 44.5001 44.0109 44.1301L53.5909 34.5501C53.9609 34.1801 54.1609 33.7001 54.1609 33.1801C54.1609 32.6601 53.9609 32.1801 53.5909 31.8101L52.9309 31.1501C52.5609 30.7801 52.0809 30.5801 51.5609 30.5801Z"
                fill="#003C57" />
            </svg></a>
        </div>
      </div>
      <div class="ons-hero__census-logo"><svg xmlns="http://www.w3.org/2000/svg" class="ons-icon--logo" width="152"
          height="16" viewBox="0 0 171 18">
          <title id="census-logo-alt">Census 2021 Logo</title>
          <path
            d="M22.9246 6.96226H31.8567C31.0755 5.26415 29.3774 4.09245 27.3906 4.09245C25.4038 4.09245 23.7057 5.26415 22.9246 6.96226ZM27.3906 18C22.4321 18 18.3906 13.9585 18.3906 9C18.3906 4.04151 22.4321 0 27.3906 0C32.3491 0 36.3906 4.04151 36.3906 9C36.3906 10.1208 35.4736 11.0377 34.3529 11.0377H22.9246C23.7057 12.7358 25.4038 13.9076 27.3906 13.9076C28.5114 13.9076 29.4284 14.8245 29.4284 15.9453C29.4284 17.083 28.5114 18 27.3906 18Z"
            fill="#902092" />
          <path
            d="M54.2716 17.8811C53.1508 17.8811 52.2338 16.9642 52.2338 15.8434V9C52.2338 6.3 50.0263 4.09245 47.3263 4.09245C44.6263 4.09245 42.4187 6.3 42.4187 9V15.8434C42.4187 16.9642 41.5018 17.8811 40.381 17.8811C39.2602 17.8811 38.3433 16.9642 38.3433 15.8434V9C38.3433 4.04151 42.3848 0 47.3433 0C52.3018 0 56.3433 4.04151 56.3433 9V15.8434C56.3093 16.9642 55.3923 17.8811 54.2716 17.8811Z"
            fill="#902092" />
          <path
            d="M83.8359 17.8811C78.8774 17.8811 74.8359 13.8396 74.8359 8.88113V2.03774C74.8359 0.916981 75.7529 0 76.8737 0C78.0114 0 78.9114 0.916981 78.9114 2.03774V8.88113C78.9114 11.5811 81.119 13.7887 83.819 13.7887C86.519 13.7887 88.7265 11.5811 88.7265 8.88113V2.03774C88.7265 0.916981 89.6435 0 90.7642 0C91.885 0 92.802 0.916981 92.802 2.03774V8.88113C92.8359 13.8396 88.8114 17.8811 83.8359 17.8811Z"
            fill="#902092" />
          <path
            d="M66.9735 7.33596C64.0867 6.72464 62.932 6.46992 62.932 5.41709C62.932 4.36426 64.4093 3.7869 66.0395 3.7869C66.9056 3.7869 67.7207 3.99067 68.3999 4.26237C68.6716 4.36425 68.9433 4.44917 69.249 4.44917C70.3018 4.44917 71.1509 3.60011 71.1509 2.54728C71.1509 1.68124 70.5905 0.934071 69.8093 0.696335C68.7905 0.32275 67.4999 0.0170898 66.0395 0.0170898C61.3527 0.0170898 58.6697 2.68312 58.6697 5.36614C58.6697 8.60954 61.6244 10.0529 65.0207 10.7831C67.6188 11.3265 68.4169 11.5473 68.4169 12.668C68.4169 13.7209 66.9395 14.2133 65.1735 14.2133C63.5773 14.2133 62.3886 13.568 61.3357 13.0246C61.3188 13.0246 61.3357 13.0246 61.3357 13.0246C61.115 12.9397 60.8263 12.8548 60.5716 12.8548C59.5018 12.8548 58.6357 13.7209 58.6357 14.7907C58.6357 15.5548 59.0773 16.2171 59.7225 16.5227C61.0301 17.2699 62.898 18.0001 65.3263 18.0001C69.6905 18.0001 72.798 15.6567 72.798 12.719C72.781 9.1869 70.3697 8.06615 66.9735 7.33596Z"
            fill="#902092" />
          <path
            d="M103.245 7.33596C100.359 6.72464 99.2038 6.46992 99.2038 5.41709C99.2038 4.36426 100.681 3.7869 102.311 3.7869C103.177 3.7869 103.993 3.99067 104.672 4.26237C104.943 4.36425 105.215 4.44917 105.521 4.44917C106.574 4.44917 107.423 3.60011 107.423 2.54728C107.423 1.68124 106.862 0.968033 106.081 0.696335C105.062 0.32275 103.772 0.0170898 102.311 0.0170898C97.6246 0.0170898 94.9416 2.68312 94.9416 5.36614C94.9416 8.60954 97.8963 10.0529 101.293 10.7831C103.891 11.3265 104.689 11.5473 104.689 12.668C104.689 13.7209 103.211 14.2133 101.445 14.2133C99.8491 14.2133 98.6265 13.551 97.5567 13.0076C97.5397 12.9907 97.5567 13.0076 97.5567 13.0076C97.3359 12.9227 97.0812 12.8548 96.8265 12.8548C95.7567 12.8548 94.8906 13.7209 94.8906 14.7907C94.8906 15.5548 95.3491 16.2001 95.9774 16.5227C97.285 17.2699 99.1529 18.0001 101.581 18.0001C105.945 18.0001 109.053 15.6567 109.053 12.719C109.053 9.1869 106.642 8.06615 103.245 7.33596Z"
            fill="#902092" />
          <path
            d="M9.50928 18C4.55079 18 0.509277 13.9585 0.509277 9C0.509277 4.04151 4.55079 0 9.50928 0C11.9885 0 14.3829 1.05283 16.081 2.86981C16.8451 3.70189 16.8112 4.99246 15.9791 5.75661C15.147 6.52076 13.8564 6.48679 13.0923 5.65472C12.1583 4.63585 10.8678 4.09245 9.50928 4.09245C6.80928 4.09245 4.60173 6.3 4.60173 9C4.60173 11.7 6.80928 13.9076 9.50928 13.9076C10.8848 13.9076 12.1583 13.3472 13.0923 12.3283C13.8564 11.4962 15.147 11.4623 15.9791 12.2264C16.8112 12.9906 16.8451 14.2811 16.081 15.1132C14.3829 16.9472 11.9885 18 9.50928 18Z"
            fill="#902092" />
          <path opacity="0.7"
            d="M114.113 16.1152V15.4529C114.113 11.9208 116.847 10.3585 119.428 9.08496C121.687 7.96421 123.708 7.11515 123.708 5.26421C123.708 3.48119 122.4 2.42836 120.21 2.42836C117.696 2.42836 116.491 3.97364 116.015 5.7227C116.015 5.80761 114.215 5.82459 114.215 4.39817C114.215 3.49817 114.742 2.42836 115.777 1.5793C116.813 0.730242 118.376 0.0849609 120.396 0.0849609C124.132 0.0849609 126.391 2.02081 126.391 5.21327C126.391 8.28685 123.945 9.50949 121.347 10.6982C119.089 11.7001 117.238 12.668 116.779 14.485C116.728 14.7227 116.677 14.9944 116.677 15.2491H125.389C126.289 15.2491 126.696 15.6227 126.696 16.3189V16.4718C126.696 17.185 126.306 17.5925 125.389 17.5925H115.811C114.606 17.5925 114.113 17.2019 114.113 16.1152ZM128.564 9.90005V8.151C128.564 3.19251 131.298 0.0849609 135.696 0.0849609C140.162 0.0849609 142.862 3.15854 142.862 8.11703V9.84911C142.862 14.8076 140.128 17.9491 135.696 17.9491C131.247 17.9491 128.564 14.8585 128.564 9.90005ZM140.145 9.98496V8.06609C140.145 4.44911 138.498 2.32647 135.713 2.32647C132.928 2.32647 131.332 4.39816 131.332 7.99817V9.93402C131.332 13.551 132.945 15.6057 135.713 15.6057C138.549 15.6397 140.145 13.585 140.145 9.98496ZM145.155 16.1152V15.4529C145.155 11.9208 147.889 10.3585 150.47 9.08496C152.728 7.96421 154.749 7.11515 154.749 5.26421C154.749 3.48119 153.442 2.42836 151.251 2.42836C148.738 2.42836 147.532 3.97364 147.057 5.7227C147.057 5.80761 145.257 5.82459 145.257 4.39817C145.257 3.49817 145.783 2.42836 146.819 1.5793C147.855 0.730242 149.417 0.0849609 151.438 0.0849609C155.174 0.0849609 157.432 2.02081 157.432 5.21327C157.432 8.28685 154.987 9.50949 152.389 10.6982C150.13 11.7001 148.279 12.668 147.821 14.485C147.77 14.7227 147.719 14.9944 147.719 15.2491H156.43C157.33 15.2491 157.738 15.6227 157.738 16.3189V16.4718C157.738 17.185 157.347 17.5925 156.43 17.5925H146.87C145.647 17.5925 145.155 17.2019 145.155 16.1152ZM161.202 16.5397V16.4038C161.202 15.6397 161.626 15.2831 162.442 15.2831H165.311V3.05666C164.276 3.87175 163.851 4.36421 163.342 4.75477C162.815 5.1793 162.391 5.33214 161.932 5.33214C161.032 5.33214 160.523 4.56798 160.523 3.66798L165.651 0.305714H166.585C167.349 0.305714 167.808 0.730245 167.808 1.54534L167.774 15.2831H170.083C170.898 15.2831 171.323 15.6227 171.323 16.4038V16.5397C171.323 17.2869 170.898 17.6095 170.083 17.6095H162.442C161.626 17.5925 161.202 17.2869 161.202 16.5397Z"
            fill="#902092" />
        </svg></div>
      <div class="ons-hero__information ons-u-mt-s">
        <div class="ons-hero__panel ons-hero__panel--ons-green">Latest release</div>
        <div class="ons-hero__link">
          <a href="#0">View previous releases</a>
        </div>
      </div>
      <dl
        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-description-list--inline ons-u-mb-no ons-u-mt-s ons-u-mt-l@l">
        <div class="ons-description-list__item">
          <dt class="ons-description-list__term ons-grid__col ons-col-5@xs@l">Release date:</dt>
          <dd class="ons-description-list__value ons-grid__col ons-col-7@xs@l">16 August 2024</dd>
        </div>
        <div class="ons-description-list__item">
          <dt class="ons-description-list__term ons-grid__col ons-col-5@xs@l">Next release:</dt>
          <dd class="ons-description-list__value ons-grid__col ons-col-7@xs@l">20 September 2024</dd>
        </div>
        <div class="ons-description-list__item">
          <dt class="ons-description-list__term ons-grid__col ons-col-5@xs@l">Edition:</dt>
          <dd class="ons-description-list__value ons-grid__col ons-col-7@xs@l">Latest</dd>
        </div>
        <div class="ons-description-list__item">
          <dt class="ons-description-list__term ons-grid__col ons-col-5@xs@l">Releases:</dt>
          <dd class="ons-description-list__value ons-grid__col ons-col-7@xs@l">View previous releases</dd>
        </div>
        <div class="ons-description-list__item">
          <dt class="ons-description-list__term ons-grid__col ons-col-5@xs@l">Contact:</dt>
          <dd class="ons-description-list__value ons-grid__col ons-col-7@xs@l">Retail Sales team</dd>
        </div>
      </dl>
    </div>
  </div>
</section>

Help improve this page

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