Try out the statistical article hero wtih the hero component from the design system

cms/jinja2/templates/pages/statistical_article_page.html

@@ -1,9 +1,101 @@
 {% extends "templates/base_page.html" %}
 
+{% from "components/hero/_macro.njk" import onsHero %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
 
 {% block header_area %}
+    {# Currently missing email link as the onsDescriptionList does not allow markup #}
+    {% if page.contact_details %}
+        {# fmt:off #}
+        {% set contact_details =
+            {
+                "term": "Contact:",
+                "descriptions": [
+                    {
+                        "description": page.contact_details.name
+                    }
+                ]
+            }
+        %}
+        {# fmt:on #}
+    {% else %}
+        {% set contact_details = "" %}
+    {% endif %}
+    {% if page.is_census %}
+        {% import "templates/components/census/census-logo.html" as census_logo %}
+        {% set census_html = ['<div class="ons-container">'|safe, census_logo] | join %}
+        {% set census_html = [census_html, "</div>"|safe] | join %}
+    {% else %}
+        {% set census_html = "" %}
+    {% endif %}
+    {# Currently missing links as the onsDescriptionList does not allow markup #}
+    {% if page.is_latest %}
+        {% set releases_text = _("View previous releases") %}
+    {% else %}
+        {% set releases_text = _("View latest release") %}
+    {% endif %}
+    {% set next_release_date_text = page.next_release_date|date("DATE_FORMAT") or _("To be announced") %}
+    {# fmt:off #}
+    {{
+        onsHero({
+            "topic": _("Statistical article"),
+            "title": page.display_title,
+            "variants": 'grey',
+            "text": page.summary,
+            "officialStatisticsBadge": page.is_accredited,
+            "wide": true,
+            "detailsColumns": 12,
+            "html": census_html,
+            "descriptionList": {
+
+                "descriptionListLabel": "",
+                "termCol": "6",
+                "descriptionCol": "6",
+                "itemsList": [
+                    {
+                        "term": _("Release date"),
+                        "descriptions": [
+                            {
+                                "description": page.release_date|date("DATE_FORMAT")
+                            }
+                        ]
+                    },
+                    {
+                        "term": _("Edition"),
+                        "descriptions": [
+                            {
+                                "description": _("Latest")
+                            }
+                        ]
+                    },
+                    contact_details,
+                    {
+                        "term": _("Next release"),
+                        "descriptions": [
+                            {
+                                "description": next_release_date_text
+                            }
+                        ]
+                    },
+                    {
+                        "term": _("Releases"),
+                        "descriptions": [
+                            {
+                                "description": releases_text
+                            }
+                        ]
+                    },
+                ]
+            },
+            "breadcrumbs":
+                {
+                    "ariaLabel": 'Breadcrumbs',
+                    "itemsList": breadcrumbs(page),
+                }
+        })
+    }}
+    {# fmt:on #}
     <div class="common-header article-header {% if page.updates %}article-header--flush{% endif %}">
         <div class="ons-container">
             {% include "templates/components/navigation/breadcrumbs.html" %}

cms/navigation/jinja2tags.py

@@ -0,0 +1,17 @@
+from typing import TYPE_CHECKING
+
+from jinja2.ext import Extension
+
+from cms.navigation.templatetags.navigation_tags import breadcrumbs
+
+if TYPE_CHECKING:
+    from jinja2 import Environment
+
+
+class NavigationExtension(Extension):  # pylint: disable=abstract-method
+    """Extends Jinja templates with what's needed to render the navigation and breadcrumbs."""
+
+    def __init__(self, environment: "Environment"):
+        super().__init__(environment)
+
+        self.environment.globals.update({"breadcrumbs": breadcrumbs})

cms/navigation/templatetags/navigation_tags.py

@@ -0,0 +1,24 @@
+from typing import TYPE_CHECKING
+
+import jinja2
+from django.utils.translation import gettext_lazy as _
+
+if TYPE_CHECKING:
+    from wagtail.models import Page
+
+
+# Breadcrumbs
+@jinja2.pass_context
+def breadcrumbs(context: jinja2.runtime.Context, page: "Page") -> list[dict[str, object]]:
+    """Returns the breadcrumbs as a list of dictionaries for the given page."""
+    breadcrumbs_list = []
+    page_depth = 2
+    for ancestor_page in page.get_ancestors().specific().defer_streamfields():
+        if not ancestor_page.is_root():
+            if ancestor_page.depth <= page_depth:
+                breadcrumbs_list.append({"url": "/", "text": _("Home")})
+            elif not getattr(ancestor_page, "exclude_from_breadcrumbs", False):
+                breadcrumbs_list.append(
+                    {"url": ancestor_page.get_url(request=context.get("request")), "text": ancestor_page.title}
+                )
+    return breadcrumbs_list

cms/settings/base.py

@@ -165,6 +165,7 @@
                 "wagtail.images.jinja2tags.images",
                 "wagtail.contrib.settings.jinja2tags.settings",
                 "cms.core.jinja2tags.CoreExtension",
+                "cms.navigation.jinja2tags.NavigationExtension",
             ],
         },
     },