From dae9fc0854b0a1c4c00d7f13f34db16dbe6eecad Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 18:01:48 +0200
Subject: [PATCH 01/56] feat(hubs): add Product.Hub field for product hub URL
 mapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Maps each product to an optional hub page URL slug, used by the upcoming
product badge renderer to link page-level product metadata to a 360°
landing page. Elasticsearch and Kibana wired to /hubs/{product}/9.0 for
the prototype; other products leave the field null and render no badge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/products.yml                                        | 2 ++
 .../Products/Product.cs                                    | 7 +++++++
 .../Products/ProductExtensions.cs                          | 6 +++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/config/products.yml b/config/products.yml
index d96d39e83e..b5471b8912 100644
--- a/config/products.yml
+++ b/config/products.yml
@@ -147,6 +147,7 @@ products:
   elasticsearch:
     display: 'Elasticsearch'
     versioning: 'stack'
+    hub: 'hubs/elasticsearch/9.0'
   elasticsearch-client:
     display: 'Elasticsearch Client'
     versioning: 'stack'
@@ -207,6 +208,7 @@ products:
   kibana:
     display: 'Kibana'
     versioning: 'stack'
+    hub: 'hubs/kibana/9.0'
   logstash:
     display: 'Logstash'
     versioning: 'stack'
diff --git a/src/Elastic.Documentation.Configuration/Products/Product.cs b/src/Elastic.Documentation.Configuration/Products/Product.cs
index a1f6366468..3f4e851551 100644
--- a/src/Elastic.Documentation.Configuration/Products/Product.cs
+++ b/src/Elastic.Documentation.Configuration/Products/Product.cs
@@ -84,5 +84,12 @@ public record Product
 	public VersioningSystem? VersioningSystem { get; init; }
 	public string? Repository { get; init; }
 	public ProductFeatures Features { get; init; } = ProductFeatures.All;
+
+	/// <summary>
+	/// Slug of the product hub page, relative to the site root (no leading or trailing slash).
+	/// When set, regular pages that declare this product in frontmatter render a clickable
+	/// badge linking to <c>/{Hub}/</c>. When null, no badge is rendered for the product.
+	/// </summary>
+	public string? Hub { get; init; }
 }
 
diff --git a/src/Elastic.Documentation.Configuration/Products/ProductExtensions.cs b/src/Elastic.Documentation.Configuration/Products/ProductExtensions.cs
index 0c825afb2d..3e12fa8498 100644
--- a/src/Elastic.Documentation.Configuration/Products/ProductExtensions.cs
+++ b/src/Elastic.Documentation.Configuration/Products/ProductExtensions.cs
@@ -34,7 +34,8 @@ public static ProductsConfiguration CreateProducts(this ConfigurationFileProvide
 					DisplayName = kvp.Value.Display,
 					VersioningSystem = versioningSystem,
 					Repository = kvp.Value.Repository ?? kvp.Key,
-					Features = features
+					Features = features,
+					Hub = kvp.Value.Hub
 				};
 			});
 
@@ -103,4 +104,7 @@ internal sealed record ProductDto
 
 	[YamlMember(Alias = "features")]
 	public Dictionary<string, bool>? Features { get; set; }
+
+	[YamlMember(Alias = "hub")]
+	public string? Hub { get; set; }
 }

From dbda3a4290c0c4e16cd3ecf1281601e7c9add6b8 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 18:09:18 +0200
Subject: [PATCH 02/56] feat(hubs): add 'hub' page layout with full-width
 chrome

Adds a new MarkdownPageLayout.Hub value selected by frontmatter
'layout: hub'. The hub layout shares the section sidebar with regular
pages but drops the right-hand TOC and prev/next nav, and renders the
markdown body in a full-width <article class="hub-content"> wrapper so
hero and card-group directives can manage their own widths.

Two placeholder hub pages are wired in at /hubs/elasticsearch/9.0/ and
/hubs/kibana/9.0/, listed as hidden entries in docs/_docset.yml. They
are reached only via the upcoming Product hubs nav section and the
product-badge links; their bodies will be filled by hero/card-group
directives in subsequent commits.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/_docset.yml                           |  2 ++
 docs/hubs/elasticsearch/9.0.md             |  7 +++++++
 docs/hubs/kibana/9.0.md                    |  7 +++++++
 src/Elastic.Markdown/MarkdownPageLayout.cs |  3 ++-
 src/Elastic.Markdown/_Layout.cshtml        | 22 +++++++++++++++++++++-
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 docs/hubs/elasticsearch/9.0.md
 create mode 100644 docs/hubs/kibana/9.0.md

diff --git a/docs/_docset.yml b/docs/_docset.yml
index 16e604fe9a..c43759d2fb 100644
--- a/docs/_docset.yml
+++ b/docs/_docset.yml
@@ -60,6 +60,8 @@ toc:
   - hidden: 404.md
   - hidden: _search.md
   - hidden: developer-notes.md
+  - hidden: hubs/elasticsearch/9.0.md
+  - hidden: hubs/kibana/9.0.md
   - hidden: contribute/cumulative-docs/index.md
   - hidden: contribute/cumulative-docs/guidelines.md
   - hidden: contribute/cumulative-docs/badge-placement.md
diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
new file mode 100644
index 0000000000..8346214f32
--- /dev/null
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -0,0 +1,7 @@
+---
+layout: hub
+---
+
+# Elasticsearch
+
+Elasticsearch hub page placeholder. Hero and section directives land here in step 3.
diff --git a/docs/hubs/kibana/9.0.md b/docs/hubs/kibana/9.0.md
new file mode 100644
index 0000000000..7595573dbe
--- /dev/null
+++ b/docs/hubs/kibana/9.0.md
@@ -0,0 +1,7 @@
+---
+layout: hub
+---
+
+# Kibana
+
+Kibana hub page placeholder. Hero and section directives land here in step 3.
diff --git a/src/Elastic.Markdown/MarkdownPageLayout.cs b/src/Elastic.Markdown/MarkdownPageLayout.cs
index 6563b2a0fc..7f80d07134 100644
--- a/src/Elastic.Markdown/MarkdownPageLayout.cs
+++ b/src/Elastic.Markdown/MarkdownPageLayout.cs
@@ -11,5 +11,6 @@ public enum MarkdownPageLayout
 	[EnumMember(Value = "landing-page")] LandingPage,
 	[EnumMember(Value = "not-found")] NotFound,
 	[EnumMember(Value = "archive")] Archive,
-	[EnumMember(Value = "full-search")] FullSearch
+	[EnumMember(Value = "full-search")] FullSearch,
+	[EnumMember(Value = "hub")] Hub
 }
diff --git a/src/Elastic.Markdown/_Layout.cshtml b/src/Elastic.Markdown/_Layout.cshtml
index b88596eddd..9e1208d25e 100644
--- a/src/Elastic.Markdown/_Layout.cshtml
+++ b/src/Elastic.Markdown/_Layout.cshtml
@@ -22,7 +22,7 @@
 	private async Task RenderDefault()
 	{
 		<div class="relative">
-			
+
 			<div class="min-h-screen
 						w-full
 						max-w-(--max-layout-width)
@@ -46,6 +46,23 @@
 			</div>
 		</div>
 	}
+
+	private async Task RenderHub()
+	{
+		<div class="relative hub-page">
+			<div class="min-h-screen w-full max-w-(--max-layout-width) mx-auto md:px-4">
+				<div class="min-h-screen grid grid-cols-1 md:grid-cols-[var(--max-sidebar-width)_1fr] gap-4">
+					@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
+					<main id="content-container" class="min-w-0">
+						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+						<article id="hub-content" class="hub-content min-w-0">
+							@await RenderBodyAsync()
+						</article>
+					</main>
+				</div>
+			</div>
+		</div>
+	}
 }
 
 @if (RenderHeaderAndFooter)
@@ -75,6 +92,9 @@
 	case MarkdownPageLayout.FullSearch:
 		await RenderPartialAsync(_FullSearch.Create(Model));
 		break;
+	case MarkdownPageLayout.Hub:
+		await RenderHub();
+		break;
 	default:
 		await RenderDefault();
 		break;

From e9676c67d2b0abdbd56a2cc164b2de44a4a90358 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 18:41:27 +0200
Subject: [PATCH 03/56] feat(hubs): add {hero} directive for landing-page
 heroes

Generic, reusable directive that renders a full-bleed hero region with
optional icon, version badge, search box, and quick links. Body content
(typically an H1 plus a short description paragraph) renders inside the
hero, so the page's H1 stays the canonical title.

Title detection in MarkdownFile falls back to descendant H1s when no
top-level H1 is present, so a {hero}-wrapped H1 is still picked up as
the page title without spurious 'no title' warnings.

The wired-up Elasticsearch placeholder hub now drives the hero. Cards
and card-group come in subsequent commits.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/hubs/elasticsearch/9.0.md                | 10 ++-
 src/Elastic.Markdown/IO/MarkdownFile.cs       | 10 +++
 .../Myst/Directives/DirectiveBlockParser.cs   |  4 ++
 .../Myst/Directives/DirectiveHtmlRenderer.cs  | 17 +++++
 .../Myst/Directives/Hub/HeroBlock.cs          | 66 +++++++++++++++++++
 .../Myst/Directives/Hub/HeroView.cshtml       | 34 ++++++++++
 .../Myst/Directives/Hub/HeroViewModel.cs      | 13 ++++
 7 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs

diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
index 8346214f32..88a5fadf0a 100644
--- a/docs/hubs/elasticsearch/9.0.md
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -2,6 +2,14 @@
 layout: hub
 ---
 
+:::{hero}
+:icon: E
+:version: 9.0
+:quick-links: What's new=#whats-new,Get started=#get-started,All versions=/
+
 # Elasticsearch
 
-Elasticsearch hub page placeholder. Hero and section directives land here in step 3.
+The distributed search and analytics engine, ready for production at scale.
+:::
+
+Card sections will land here in step 4.
diff --git a/src/Elastic.Markdown/IO/MarkdownFile.cs b/src/Elastic.Markdown/IO/MarkdownFile.cs
index ee548e9bba..8fdb7835ce 100644
--- a/src/Elastic.Markdown/IO/MarkdownFile.cs
+++ b/src/Elastic.Markdown/IO/MarkdownFile.cs
@@ -156,6 +156,16 @@ protected void ReadDocumentInstructions(MarkdownDocument document, Func<string,
 			.FirstOrDefault(block => block is HeadingBlock { Level: 1 })?
 			.GetData("header") as string ?? Title;
 
+		// Fall back to any H1 nested in directive containers (e.g. {hero}) so layouts
+		// that wrap the page title in a directive still get title detection.
+		if (Title == RelativePath)
+		{
+			Title = document
+				.Descendants<HeadingBlock>()
+				.FirstOrDefault(h => h.Level == 1)?
+				.GetData("header") as string ?? Title;
+		}
+
 		var yamlFrontMatter = ProcessYamlFrontMatter(document);
 		YamlFrontMatter = yamlFrontMatter;
 		if (yamlFrontMatter.NavigationTitle is not null)
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
index 301822195b..a479e4180c 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
@@ -9,6 +9,7 @@
 using Elastic.Markdown.Myst.Directives.Button;
 using Elastic.Markdown.Myst.Directives.Changelog;
 using Elastic.Markdown.Myst.Directives.CsvInclude;
+using Elastic.Markdown.Myst.Directives.Hub;
 using Elastic.Markdown.Myst.Directives.Image;
 using Elastic.Markdown.Myst.Directives.Include;
 using Elastic.Markdown.Myst.Directives.Math;
@@ -136,6 +137,9 @@ protected override DirectiveBlock CreateFencedBlock(BlockProcessor processor)
 		if (info.IndexOf("{agent-skill}") > 0)
 			return new AgentSkillBlock(this, context);
 
+		if (info.IndexOf("{hero}") > 0)
+			return new HeroBlock(this, context);
+
 		foreach (var admonition in Admonitions)
 		{
 			if (info.IndexOf(admonition) > 0)
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index d731bf1b45..7c912068ea 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -15,6 +15,7 @@
 using Elastic.Markdown.Myst.Directives.Changelog;
 using Elastic.Markdown.Myst.Directives.CsvInclude;
 using Elastic.Markdown.Myst.Directives.Dropdown;
+using Elastic.Markdown.Myst.Directives.Hub;
 using Elastic.Markdown.Myst.Directives.Image;
 using Elastic.Markdown.Myst.Directives.Include;
 using Elastic.Markdown.Myst.Directives.Math;
@@ -121,6 +122,9 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 			case AgentSkillBlock agentSkillBlock:
 				WriteAgentSkill(renderer, agentSkillBlock);
 				return;
+			case HeroBlock heroBlock:
+				WriteHero(renderer, heroBlock);
+				return;
 			default:
 				// if (!string.IsNullOrEmpty(directiveBlock.Info) && !directiveBlock.Info.StartsWith('{'))
 				// 	WriteCode(renderer, directiveBlock);
@@ -332,6 +336,19 @@ private static void WriteTabSet(HtmlRenderer renderer, TabSetBlock block)
 		RenderRazorSlice(slice, renderer);
 	}
 
+	private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
+	{
+		var slice = HeroView.Create(new HeroViewModel
+		{
+			DirectiveBlock = block,
+			Icon = block.Icon,
+			Version = block.Version,
+			ShowSearch = block.ShowSearch,
+			QuickLinks = block.QuickLinks
+		});
+		RenderRazorSlice(slice, renderer);
+	}
+
 	private static void WriteTabItem(HtmlRenderer renderer, TabItemBlock block)
 	{
 		var slice = TabItemView.Create(new TabItemViewModel
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
new file mode 100644
index 0000000000..c28ea58412
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -0,0 +1,66 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Renders a full-bleed page hero (dark background, icon, title, description, optional
+/// version badge, optional quick links, optional search box). Designed for landing-style
+/// pages such as product hubs, but the directive is generic and reusable.
+/// </summary>
+/// <example>
+/// <code>
+/// :::{hero}
+/// :icon: elasticsearch
+/// :version: 9.0
+/// :quick-links: What's new=#whats-new,Get started=/get-started
+///
+/// # Elasticsearch
+///
+/// The distributed search and analytics engine.
+/// :::
+/// </code>
+/// </example>
+public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "hero";
+
+	public string? Icon { get; private set; }
+	public string? Version { get; private set; }
+	public bool ShowSearch { get; private set; }
+	public IReadOnlyList<HeroQuickLink> QuickLinks { get; private set; } = [];
+
+	public override void FinalizeAndValidate(ParserContext context)
+	{
+		Icon = Prop("icon");
+		Version = Prop("version");
+		// search defaults to true; explicit ":search: false" hides it
+		ShowSearch = TryPropBool("search") ?? true;
+		QuickLinks = ParseQuickLinks(Prop("quick-links"));
+	}
+
+	private static IReadOnlyList<HeroQuickLink> ParseQuickLinks(string? raw)
+	{
+		if (string.IsNullOrWhiteSpace(raw))
+			return [];
+
+		var entries = new List<HeroQuickLink>();
+		foreach (var part in raw.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
+		{
+			var separator = part.IndexOf('=');
+			if (separator <= 0 || separator == part.Length - 1)
+				continue;
+
+			var label = part[..separator].Trim();
+			var url = part[(separator + 1)..].Trim();
+			if (label.Length > 0 && url.Length > 0)
+				entries.Add(new HeroQuickLink(label, url));
+		}
+
+		return entries;
+	}
+}
+
+public readonly record struct HeroQuickLink(string Label, string Url);
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
new file mode 100644
index 0000000000..cbd2d794e0
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -0,0 +1,34 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.HeroViewModel>
+
+<section class="hub-hero">
+	<div class="hub-hero-inner">
+		<div class="hub-hero-top">
+			@if (!string.IsNullOrWhiteSpace(Model.Icon))
+			{
+				<span class="hub-hero-icon" aria-hidden="true">@Model.Icon</span>
+			}
+			@if (!string.IsNullOrWhiteSpace(Model.Version))
+			{
+				<span class="hub-hero-version">@Model.Version</span>
+			}
+		</div>
+		<div class="hub-hero-content">
+			@Model.RenderBlock()
+		</div>
+		@if (Model.ShowSearch)
+		{
+			<div class="hub-hero-search">
+				<navigation-search></navigation-search>
+			</div>
+		}
+		@if (Model.QuickLinks.Count > 0)
+		{
+			<ul class="hub-hero-links">
+				@foreach (var link in Model.QuickLinks)
+				{
+					<li><a href="@link.Url">@link.Label</a></li>
+				}
+			</ul>
+		}
+	</div>
+</section>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
new file mode 100644
index 0000000000..1809af3d30
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -0,0 +1,13 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class HeroViewModel : DirectiveViewModel
+{
+	public required string? Icon { get; init; }
+	public required string? Version { get; init; }
+	public required bool ShowSearch { get; init; }
+	public required IReadOnlyList<HeroQuickLink> QuickLinks { get; init; }
+}

From ec6ff071d4e0aeb29e1d65763e8e18e3adb3a601 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 18:44:46 +0200
Subject: [PATCH 04/56] feat(hubs): add {card-group} and {link-card} directives

{card-group} is a container with optional :title:, :intro:, :id:, and
:variant: options that wraps a grid of {link-card} children. {link-card}
is a leaf with a required title argument and :link: option, plus an
optional :badge: pill, and renders the directive body as the card
description.

Both are generic enough to be used outside hub pages -- any landing or
section page can render a titled card grid with these.

The Elasticsearch placeholder hub is wired up with three card groups
(What's new in news variant, Install and deploy, Index and ingest data)
to exercise the rendering end to end.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/hubs/elasticsearch/9.0.md                | 64 ++++++++++++++++++-
 .../Myst/Directives/DirectiveBlockParser.cs   |  6 ++
 .../Myst/Directives/DirectiveHtmlRenderer.cs  | 31 +++++++++
 .../Myst/Directives/Hub/CardGroupBlock.cs     | 46 +++++++++++++
 .../Myst/Directives/Hub/CardGroupView.cshtml  | 23 +++++++
 .../Myst/Directives/Hub/CardGroupViewModel.cs | 13 ++++
 .../Myst/Directives/Hub/LinkCardBlock.cs      | 45 +++++++++++++
 .../Myst/Directives/Hub/LinkCardView.cshtml   | 16 +++++
 .../Myst/Directives/Hub/LinkCardViewModel.cs  | 12 ++++
 9 files changed, 254 insertions(+), 2 deletions(-)
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/CardGroupBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs

diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
index 88a5fadf0a..1069f120a3 100644
--- a/docs/hubs/elasticsearch/9.0.md
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -5,11 +5,71 @@ layout: hub
 :::{hero}
 :icon: E
 :version: 9.0
-:quick-links: What's new=#whats-new,Get started=#get-started,All versions=/
+:quick-links: What's new=#whats-new,Get started=#install,All versions=/
 
 # Elasticsearch
 
 The distributed search and analytics engine, ready for production at scale.
 :::
 
-Card sections will land here in step 4.
+::::{card-group}
+:title: What's new
+:variant: news
+:id: whats-new
+
+:::{link-card} ES|QL JOIN syntax now GA
+:link: /
+:badge: 9.0
+Run cross-index joins in ES|QL queries with full GA stability and performance.
+:::
+
+:::{link-card} Vector quantization improvements
+:link: /
+:badge: 9.0
+30% smaller indices and faster search with the new BBQ encoding.
+:::
+
+::::
+
+::::{card-group}
+:title: Install and deploy
+:intro: Get Elasticsearch running on the platform of your choice.
+:id: install
+
+:::{link-card} Self-managed
+:link: /
+Run Elasticsearch on your own infrastructure for full control over hardware and configuration.
+:::
+
+:::{link-card} Elastic Cloud Hosted
+:link: /
+Managed deployments on AWS, GCP, or Azure with one-click upgrades and zero downtime.
+:::
+
+:::{link-card} Elastic Cloud Serverless
+:link: /
+Pay-per-use Elasticsearch with no clusters to manage and elastic auto-scaling.
+:::
+
+::::
+
+::::{card-group}
+:title: Index and ingest data
+:intro: Move data into Elasticsearch from any source.
+
+:::{link-card} Elastic integrations
+:link: /
+Pre-built integrations for hundreds of services and platforms.
+:::
+
+:::{link-card} Logstash
+:link: /
+Ingest, transform, and enrich data from any source.
+:::
+
+:::{link-card} Beats
+:link: /
+Lightweight shippers for logs, metrics, and network data.
+:::
+
+::::
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
index a479e4180c..d38bfa1921 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
@@ -140,6 +140,12 @@ protected override DirectiveBlock CreateFencedBlock(BlockProcessor processor)
 		if (info.IndexOf("{hero}") > 0)
 			return new HeroBlock(this, context);
 
+		if (info.IndexOf("{card-group}") > 0)
+			return new CardGroupBlock(this, context);
+
+		if (info.IndexOf("{link-card}") > 0)
+			return new LinkCardBlock(this, context);
+
 		foreach (var admonition in Admonitions)
 		{
 			if (info.IndexOf(admonition) > 0)
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 7c912068ea..df6f26b8a2 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -125,6 +125,12 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 			case HeroBlock heroBlock:
 				WriteHero(renderer, heroBlock);
 				return;
+			case CardGroupBlock cardGroupBlock:
+				WriteCardGroup(renderer, cardGroupBlock);
+				return;
+			case LinkCardBlock linkCardBlock:
+				WriteLinkCard(renderer, linkCardBlock);
+				return;
 			default:
 				// if (!string.IsNullOrEmpty(directiveBlock.Info) && !directiveBlock.Info.StartsWith('{'))
 				// 	WriteCode(renderer, directiveBlock);
@@ -349,6 +355,31 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 		RenderRazorSlice(slice, renderer);
 	}
 
+	private static void WriteCardGroup(HtmlRenderer renderer, CardGroupBlock block)
+	{
+		var slice = CardGroupView.Create(new CardGroupViewModel
+		{
+			DirectiveBlock = block,
+			Title = block.Title,
+			Intro = block.Intro,
+			Anchor = block.Anchor,
+			Variant = block.Variant
+		});
+		RenderRazorSlice(slice, renderer);
+	}
+
+	private static void WriteLinkCard(HtmlRenderer renderer, LinkCardBlock block)
+	{
+		var slice = LinkCardView.Create(new LinkCardViewModel
+		{
+			DirectiveBlock = block,
+			Title = block.Title,
+			Link = block.Link,
+			Badge = block.Badge
+		});
+		RenderRazorSlice(slice, renderer);
+	}
+
 	private static void WriteTabItem(HtmlRenderer renderer, TabItemBlock block)
 	{
 		var slice = TabItemView.Create(new TabItemViewModel
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupBlock.cs
new file mode 100644
index 0000000000..ed6a11d43a
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupBlock.cs
@@ -0,0 +1,46 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Container directive that renders a titled section housing a grid of
+/// <see cref="LinkCardBlock"/> children. Generic and reusable wherever a
+/// linked-card grid is appropriate.
+/// </summary>
+/// <example>
+/// <code>
+/// ::::{card-group}
+/// :title: Install and deploy
+/// :intro: Set up Elasticsearch on your platform of choice.
+/// :id: install
+///
+/// :::{link-card} Self-managed
+/// :link: /deploy-manage/deploy/self-managed
+/// Run on your own infrastructure.
+/// :::
+/// ::::
+/// </code>
+/// </example>
+public class CardGroupBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "card-group";
+
+	public string? Title { get; private set; }
+	public string? Intro { get; private set; }
+	public string? Anchor { get; private set; }
+	public string? Variant { get; private set; }
+
+	public override void FinalizeAndValidate(ParserContext context)
+	{
+		Title = Prop("title");
+		Intro = Prop("intro");
+		Anchor = Prop("id");
+		Variant = Prop("variant");
+	}
+
+	public override IEnumerable<string> GeneratedAnchors =>
+		string.IsNullOrWhiteSpace(Anchor) ? [] : [Anchor];
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
new file mode 100644
index 0000000000..979065318e
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
@@ -0,0 +1,23 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.CardGroupViewModel>
+
+@{
+	var sectionClass = string.IsNullOrWhiteSpace(Model.Variant)
+		? "hub-card-group"
+		: $"hub-card-group hub-card-group-{Model.Variant}";
+}
+
+<section class="@sectionClass" id="@Model.Anchor">
+	@if (!string.IsNullOrWhiteSpace(Model.Title))
+	{
+		<header class="hub-card-group-header">
+			<h2>@Model.Title</h2>
+			@if (!string.IsNullOrWhiteSpace(Model.Intro))
+			{
+				<p class="hub-card-group-intro">@Model.Intro</p>
+			}
+		</header>
+	}
+	<ul class="hub-card-grid">
+		@Model.RenderBlock()
+	</ul>
+</section>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs
new file mode 100644
index 0000000000..d75d8716ac
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs
@@ -0,0 +1,13 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class CardGroupViewModel : DirectiveViewModel
+{
+	public required string? Title { get; init; }
+	public required string? Intro { get; init; }
+	public required string? Anchor { get; init; }
+	public required string? Variant { get; init; }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
new file mode 100644
index 0000000000..8c4431a8a4
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
@@ -0,0 +1,45 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Elastic.Markdown.Diagnostics;
+using Elastic.Markdown.Helpers;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// A single card with a required title and link, plus an optional badge and
+/// description body. Designed to live inside a <see cref="CardGroupBlock"/>
+/// but rendered standalone if used outside one.
+/// </summary>
+/// <example>
+/// <code>
+/// :::{link-card} Self-managed
+/// :link: /deploy-manage/deploy/self-managed
+/// :badge: 9.0
+/// Run Elasticsearch on your own infrastructure.
+/// :::
+/// </code>
+/// </example>
+public class LinkCardBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context), IBlockTitle
+{
+	public override string Directive => "link-card";
+
+	public string Title { get; private set; } = default!;
+	public string? Link { get; private set; }
+	public string? Badge { get; private set; }
+
+	public override void FinalizeAndValidate(ParserContext context)
+	{
+		if (string.IsNullOrWhiteSpace(Arguments))
+			this.EmitError("{link-card} requires a title argument, e.g. `:::{link-card} My title`.");
+
+		Title = (Arguments ?? "{undefined}").ReplaceSubstitutions(context);
+		Link = Prop("link");
+		Badge = Prop("badge");
+
+		if (string.IsNullOrWhiteSpace(Link))
+			this.EmitError("{link-card} requires a `:link:` option.");
+	}
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
new file mode 100644
index 0000000000..d9bb7d3d60
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
@@ -0,0 +1,16 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.LinkCardViewModel>
+
+<li class="hub-card">
+	<a class="hub-card-link" href="@Model.Link">
+		<div class="hub-card-head">
+			<span class="hub-card-title">@Model.Title</span>
+			@if (!string.IsNullOrWhiteSpace(Model.Badge))
+			{
+				<span class="hub-card-badge">@Model.Badge</span>
+			}
+		</div>
+		<div class="hub-card-body">
+			@Model.RenderBlock()
+		</div>
+	</a>
+</li>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
new file mode 100644
index 0000000000..7d91af642c
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
@@ -0,0 +1,12 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class LinkCardViewModel : DirectiveViewModel
+{
+	public required string Title { get; init; }
+	public required string? Link { get; init; }
+	public required string? Badge { get; init; }
+}

From 8817c8ce2899cdb827e48c23305e747083cf74ba Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 18:47:19 +0200
Subject: [PATCH 05/56] feat(hubs): add 'Product hubs' top-bar section to
 nav-v2

New section in navigation-v2.yml that surfaces the prototype hub pages
in the V2 secondary nav. The Elasticsearch and Kibana hubs are wired up
as page references; Observability, Security, and the three deployment
runbooks are placeholder title leaves until their hub markdown lands.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/navigation-v2.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index a212064cd7..a3f262d205 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -2871,6 +2871,21 @@ nav:
     children:
     - toc: docs-content://release-notes/intro
 
+  - section: Product hubs
+    url: /hubs/
+    children:
+    - label: Stack products
+      children:
+      - page: docs-builder://hubs/elasticsearch/9.0.md
+      - page: docs-builder://hubs/kibana/9.0.md
+      - title: Observability
+      - title: Security
+    - label: Deployment runbooks
+      children:
+      - title: Elastic Cloud Hosted
+      - title: Elastic Cloud Serverless
+      - title: Self-managed
+
   - section: Extension points
     url: /extend/
     isolated: true

From e3d365f655bd9bfc9cfe410f16df1e3e4ea4e3f7 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 19:03:48 +0200
Subject: [PATCH 06/56] feat(hubs): render product badges linking to hub pages

Adds a ProductBadges partial that renders a clickable pill for each
frontmatter product whose Product.Hub field is set, linking to that
product's hub page. Skipped on layouts that own their own chrome
(hub, landing, archive, full-search). For products without a hub
configured, no badge is rendered, so the feature lights up
incrementally as more products get hub URLs in products.yml.

The mapping is centralized: products.yml is the single source of
truth for which products have hubs and where they live.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/Elastic.Markdown/Page/Index.cshtml        |  2 ++
 .../Page/ProductBadges.cshtml                 | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/Elastic.Markdown/Page/ProductBadges.cshtml

diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index f820b165a6..e31eb35864 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -6,6 +6,7 @@
 @using Elastic.Markdown
 @using Elastic.Markdown.Myst.Components
 @using Markdig
+@using Elastic.Markdown.Page
 @using ViewModelSerializerContext = Elastic.Markdown.Page.ViewModelSerializerContext
 @inherits RazorSliceHttpResult<Elastic.Markdown.Page.IndexViewModel>
 @implements IUsesLayout<Elastic.Markdown._Layout, MarkdownLayoutViewModel>
@@ -91,6 +92,7 @@
 <section id="elastic-docs-v3">
 	@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
 	@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
+	@await RenderPartialAsync(ProductBadges.Create(Model))
 	@if (Model.AppliesTo is not null)
 	{
 		<p class="applies applies-block">
diff --git a/src/Elastic.Markdown/Page/ProductBadges.cshtml b/src/Elastic.Markdown/Page/ProductBadges.cshtml
new file mode 100644
index 0000000000..bc3066f2f1
--- /dev/null
+++ b/src/Elastic.Markdown/Page/ProductBadges.cshtml
@@ -0,0 +1,24 @@
+@inherits RazorSlice<Elastic.Markdown.Page.IndexViewModel>
+@{
+	// Hide on layouts that own the page chrome themselves (hub, landing, archive, search).
+	var layout = Model.CurrentDocument.YamlFrontMatter?.Layout;
+	var skip = layout is not null;
+	var withHubs = skip
+		? []
+		: Model.Products
+			.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
+			.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
+			.ToList();
+	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
+}
+@if (withHubs.Count > 0)
+{
+	<ul class="product-badges" aria-label="Related product hubs">
+		@foreach (var product in withHubs)
+		{
+			<li>
+				<a class="product-badge" href="@($"{prefix}/{product.Hub!.Trim('/')}/")">@product.DisplayName</a>
+			</li>
+		}
+	</ul>
+}

From 28cbacacc316a4600424b1c957e9d8d6cc0d04d4 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 19:11:46 +0200
Subject: [PATCH 07/56] feat(hubs): style hub pages, cards, and product badges
 + port Kibana hub

Adds hub.css with Tailwind component layer rules for hero, card-group,
link-card, and product-badges. The hero is full-bleed dark navy with
icon and version chips, content rail constrained to the standard text
width. Cards are a responsive 1/2/3-column grid; the news variant
collapses to a tighter 1/2-column list. Product badges are subtle
grey pills that hover blue.

The Kibana hub markdown is filled in with seven sections (What's new,
Install and administer, Explore visualize and analyze, Track and
respond, AI and automation, Management and developer tools) mirroring
the gist prototype.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/hubs/kibana/9.0.md                       | 137 +++++++++++++++++-
 .../Assets/markdown/hub.css                   | 136 +++++++++++++++++
 .../Assets/styles.css                         |   1 +
 3 files changed, 273 insertions(+), 1 deletion(-)
 create mode 100644 src/Elastic.Documentation.Site/Assets/markdown/hub.css

diff --git a/docs/hubs/kibana/9.0.md b/docs/hubs/kibana/9.0.md
index 7595573dbe..2bc63dd2c4 100644
--- a/docs/hubs/kibana/9.0.md
+++ b/docs/hubs/kibana/9.0.md
@@ -2,6 +2,141 @@
 layout: hub
 ---
 
+:::{hero}
+:icon: K
+:version: 9.0
+:quick-links: What's new=#whats-new,Install=#install,All versions=/
+
 # Kibana
 
-Kibana hub page placeholder. Hero and section directives land here in step 3.
+The window into the Elastic Stack. Visualize, analyze, and explore your data with dashboards, queries, and machine learning.
+:::
+
+::::{card-group}
+:title: What's new
+:variant: news
+:id: whats-new
+
+:::{link-card} Refreshed dashboard layout engine
+:link: /
+:badge: 9.0
+Smoother resizing, faster panel rendering, and improved touch behavior.
+:::
+
+:::{link-card} Lens chart suggestions
+:link: /
+:badge: 9.0
+Lens now suggests visualizations based on your data shape automatically.
+:::
+
+::::
+
+::::{card-group}
+:title: Install and administer
+:intro: Get Kibana running and configure it for your environment.
+:id: install
+
+:::{link-card} Self-managed
+:link: /
+Install Kibana on your own infrastructure with full configuration control.
+:::
+
+:::{link-card} Elastic Cloud Hosted
+:link: /
+Kibana included in every Elastic Cloud deployment, fully managed.
+:::
+
+:::{link-card} Configure Kibana
+:link: /
+Set up authentication, spaces, monitoring, alerts, and more.
+:::
+
+::::
+
+::::{card-group}
+:title: Explore, visualize, and analyze
+:intro: The core Kibana surfaces for working with your data.
+:id: explore
+
+:::{link-card} Discover
+:link: /
+Search and explore raw documents in any Elasticsearch index.
+:::
+
+:::{link-card} Dashboards
+:link: /
+Build and share interactive dashboards with charts, maps, and metrics.
+:::
+
+:::{link-card} Lens
+:link: /
+Drag-and-drop visualization builder with smart suggestions.
+:::
+
+::::
+
+::::{card-group}
+:title: Track and respond
+:intro: Alerting, watchers, and case management.
+:id: track
+
+:::{link-card} Alerting
+:link: /
+Define rules and trigger actions when conditions are met.
+:::
+
+:::{link-card} Cases
+:link: /
+Collect, track, and resolve issues across teams.
+:::
+
+:::{link-card} Maps
+:link: /
+Geospatial analysis and live tracking on layered maps.
+:::
+
+::::
+
+::::{card-group}
+:title: AI and automation
+:intro: Machine learning and AI-assisted workflows in Kibana.
+:id: ai
+
+:::{link-card} Machine learning
+:link: /
+Detect anomalies, classify data, and forecast trends.
+:::
+
+:::{link-card} AI Assistant
+:link: /
+A conversational assistant that helps you query and analyze data.
+:::
+
+:::{link-card} Automatic insights
+:link: /
+Surface notable changes in your data without writing rules.
+:::
+
+::::
+
+::::{card-group}
+:title: Management and developer tools
+:intro: Stack management, Dev Tools, and APIs.
+:id: manage
+
+:::{link-card} Stack Management
+:link: /
+Manage spaces, roles, index lifecycle, snapshots, and more.
+:::
+
+:::{link-card} Dev Tools
+:link: /
+Console, Painless Lab, Search Profiler, Grok Debugger.
+:::
+
+:::{link-card} Kibana APIs
+:link: /
+Automate Kibana with the public REST APIs.
+:::
+
+::::
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
new file mode 100644
index 0000000000..c959e1cc42
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -0,0 +1,136 @@
+@layer components {
+	.hub-page {
+		.hub-content {
+			@apply mx-auto mb-12 max-w-(--max-text-width) py-0;
+		}
+	}
+
+	/* Full-bleed hero, breaks out of the article container width. */
+	.hub-hero {
+		@apply bg-ink-navy mx-auto -mt-4 mb-10 w-full max-w-none px-6 py-14 text-white;
+
+		.hub-hero-inner {
+			@apply mx-auto max-w-(--max-text-width);
+		}
+
+		.hub-hero-top {
+			@apply mb-3 flex items-center gap-4;
+		}
+
+		.hub-hero-icon {
+			@apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-white/8 text-xl font-bold text-white;
+		}
+
+		.hub-hero-version {
+			@apply inline-flex items-center rounded-full border border-white/15 bg-white/10 px-2 py-0.5 text-xs font-semibold tracking-wide;
+		}
+
+		.hub-hero-content {
+			h1 {
+				@apply mb-3 text-4xl font-bold tracking-tight text-white;
+			}
+			h1 a.headerlink {
+				@apply text-white no-underline;
+			}
+			p {
+				@apply max-w-3xl text-base leading-relaxed text-white/70;
+			}
+		}
+
+		.hub-hero-search {
+			@apply mt-6 max-w-md;
+		}
+
+		.hub-hero-links {
+			@apply mt-5 flex list-none flex-wrap gap-x-5 gap-y-2 p-0;
+
+			li {
+				@apply m-0 p-0;
+			}
+
+			a {
+				@apply border-b border-transparent text-sm font-semibold text-white/85 no-underline;
+			}
+			a:hover {
+				@apply border-white/40 text-white;
+			}
+		}
+	}
+
+	.hub-card-group {
+		@apply mt-10 px-6;
+
+		.hub-card-group-header {
+			@apply mx-auto mb-5 max-w-(--max-text-width);
+
+			h2 {
+				@apply text-ink-dark m-0 text-2xl font-bold;
+			}
+		}
+
+		.hub-card-group-intro {
+			@apply text-ink-light mt-1;
+		}
+
+		.hub-card-grid {
+			@apply mx-auto grid max-w-(--max-text-width) list-none grid-cols-1 gap-4 p-0 md:grid-cols-2 lg:grid-cols-3;
+		}
+	}
+
+	/* News variant: vertical list, version chip leading. */
+	.hub-card-group-news {
+		.hub-card-grid {
+			@apply grid-cols-1 gap-3 lg:grid-cols-2;
+		}
+	}
+
+	.hub-card {
+		@apply m-0 p-0;
+	}
+
+	.hub-card-link {
+		@apply border-grey-20 block h-full rounded-xl border bg-white p-5 no-underline transition-colors;
+	}
+	.hub-card-link:hover {
+		@apply border-blue-elastic no-underline;
+	}
+
+	.hub-card-head {
+		@apply mb-2 flex items-start justify-between gap-3;
+	}
+
+	.hub-card-title {
+		@apply text-ink-dark text-base font-semibold;
+	}
+
+	.hub-card-badge {
+		@apply bg-grey-10 text-ink-light border-grey-20 inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-xs font-semibold tracking-wide;
+	}
+
+	.hub-card-body {
+		@apply text-ink-light text-sm leading-relaxed;
+
+		& > *:first-child {
+			@apply mt-0;
+		}
+		& > *:last-child {
+			@apply mb-0;
+		}
+	}
+
+	/* Product badges shown above the H1 of a regular page. */
+	.product-badges {
+		@apply mb-3 flex list-none flex-wrap gap-2 p-0;
+
+		li {
+			@apply m-0 p-0;
+		}
+	}
+
+	.product-badge {
+		@apply bg-grey-10 text-ink-light border-grey-20 inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold tracking-wide no-underline;
+	}
+	.product-badge:hover {
+		@apply bg-blue-elastic-10 text-blue-elastic-100 border-blue-elastic no-underline;
+	}
+}
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index 3a45bfa2c5..6ce8ef6141 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -27,6 +27,7 @@
 @import './markdown/stepper.css';
 @import './markdown/button.css';
 @import './markdown/agent-skill.css';
+@import './markdown/hub.css';
 @import './markdown/contributors.css';
 @import './api-docs.css';
 @import 'tippy.js/dist/tippy.css';

From a7ff2208682febc3e993f6dd38cbb32ed1e7026c Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 20:58:01 +0200
Subject: [PATCH 08/56] fix(hubs): suppress page preamble on hub layout, widen
 hub content

- Index.cshtml skips its auto-rendered H1, product-badges, and applies-to
  block when the page declares 'layout: hub' so the hero owns the page
  header and there is no duplicate H1.
- hub.css drops the article-level max-width and lets hero/card-group
  manage their own inner rails. Hero goes edge-to-edge of the content
  area; card grids open up to a 5xl rail so 3 columns render.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Assets/markdown/hub.css                   | 49 +++++++++++--------
 src/Elastic.Markdown/Page/Index.cshtml        | 25 +++++-----
 2 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index c959e1cc42..3578c6ff0a 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -1,16 +1,20 @@
 @layer components {
-	.hub-page {
-		.hub-content {
-			@apply mx-auto mb-12 max-w-(--max-text-width) py-0;
-		}
+	/* Full-width content area; hero and card-group manage their own inner rails. */
+	.hub-page .hub-content {
+		@apply mb-12 w-full max-w-none p-0;
+	}
+
+	/* Section-content rail used by hero/group internals. */
+	.hub-page :where(.hub-rail) {
+		@apply mx-auto w-full max-w-5xl px-6;
 	}
 
-	/* Full-bleed hero, breaks out of the article container width. */
+	/* Full-bleed hero with dark background and inner content rail. */
 	.hub-hero {
-		@apply bg-ink-navy mx-auto -mt-4 mb-10 w-full max-w-none px-6 py-14 text-white;
+		@apply bg-ink-navy mb-10 w-full px-0 py-14 text-white;
 
 		.hub-hero-inner {
-			@apply mx-auto max-w-(--max-text-width);
+			@apply mx-auto w-full max-w-5xl px-6;
 		}
 
 		.hub-hero-top {
@@ -18,11 +22,14 @@
 		}
 
 		.hub-hero-icon {
-			@apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-white/8 text-xl font-bold text-white;
+			@apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-xl font-bold text-white;
+			background-color: rgb(255 255 255 / 0.08);
 		}
 
 		.hub-hero-version {
-			@apply inline-flex items-center rounded-full border border-white/15 bg-white/10 px-2 py-0.5 text-xs font-semibold tracking-wide;
+			@apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold tracking-wide;
+			background-color: rgb(255 255 255 / 0.1);
+			border: 1px solid rgb(255 255 255 / 0.15);
 		}
 
 		.hub-hero-content {
@@ -33,7 +40,8 @@
 				@apply text-white no-underline;
 			}
 			p {
-				@apply max-w-3xl text-base leading-relaxed text-white/70;
+				@apply max-w-3xl text-base leading-relaxed;
+				color: rgb(255 255 255 / 0.7);
 			}
 		}
 
@@ -49,19 +57,22 @@
 			}
 
 			a {
-				@apply border-b border-transparent text-sm font-semibold text-white/85 no-underline;
+				@apply border-b border-transparent text-sm font-semibold no-underline;
+				color: rgb(255 255 255 / 0.85);
 			}
 			a:hover {
-				@apply border-white/40 text-white;
+				@apply text-white;
+				border-bottom-color: rgb(255 255 255 / 0.4);
 			}
 		}
 	}
 
+	/* Card group: section title rail, then card grid rail. */
 	.hub-card-group {
-		@apply mt-10 px-6;
+		@apply mt-10;
 
 		.hub-card-group-header {
-			@apply mx-auto mb-5 max-w-(--max-text-width);
+			@apply mx-auto mb-5 w-full max-w-5xl px-6;
 
 			h2 {
 				@apply text-ink-dark m-0 text-2xl font-bold;
@@ -73,15 +84,13 @@
 		}
 
 		.hub-card-grid {
-			@apply mx-auto grid max-w-(--max-text-width) list-none grid-cols-1 gap-4 p-0 md:grid-cols-2 lg:grid-cols-3;
+			@apply mx-auto grid w-full max-w-5xl list-none grid-cols-1 gap-4 p-0 px-6 md:grid-cols-2 lg:grid-cols-3;
 		}
 	}
 
-	/* News variant: vertical list, version chip leading. */
-	.hub-card-group-news {
-		.hub-card-grid {
-			@apply grid-cols-1 gap-3 lg:grid-cols-2;
-		}
+	/* News variant: tighter 2-column list. */
+	.hub-card-group-news .hub-card-grid {
+		@apply grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-2;
 	}
 
 	.hub-card {
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index e31eb35864..d1ad409c34 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -90,19 +90,22 @@
 	}
 }
 <section id="elastic-docs-v3">
-	@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
-	@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
-	@await RenderPartialAsync(ProductBadges.Create(Model))
-	@if (Model.AppliesTo is not null)
+	@if (Model.CurrentDocument.YamlFrontMatter?.Layout != MarkdownPageLayout.Hub)
 	{
-		<p class="applies applies-block">
-		@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+		@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
+		@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
+		@await RenderPartialAsync(ProductBadges.Create(Model))
+		@if (Model.AppliesTo is not null)
 		{
-			AppliesTo = Model.AppliesTo,
-			Inline = false,
-			VersionsConfig = Model.VersionsConfig
-		}))
-		</p>
+			<p class="applies applies-block">
+			@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+			{
+				AppliesTo = Model.AppliesTo,
+				Inline = false,
+				VersionsConfig = Model.VersionsConfig
+			}))
+			</p>
+		}
 	}
 	@(new HtmlString(Model.MarkdownHtml))
 </section>

From 26b4886478e43779a8966c55b7987115d3088674 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:13:21 +0200
Subject: [PATCH 09/56] feat(hubs): rewrite hub directives to match gist
 prototypes

Aligns the hub-page directives with the HTML gist prototypes' DOM and
visual structure. The card / what's new / hero shapes were too thin to
reproduce the gists; this commit replaces them with richer directives:

- {hero}: adds inline product-icon SVGs (kibana/elasticsearch/observability/
  security via ProductIcons lookup; first-letter fallback otherwise),
  a version pill with status dot, quick-action pill bar, and a release
  status line rendered as inline markdown.
- {link-card}: now consumes a YAML body with title/link/description plus a
  primary link list and an optional aside (label + inline link list with
  middle-dot separators). Adds optional :icon: / :variant: for solution
  cards (es / obs / sec accent borders).
- {whats-new}: new directive for the gist's "New" panel -- header with pink
  badge, section title, optional release-notes link list on the right,
  and items rendered as link rows with title / description / right-side
  meta pill.
- {intro}: new directive for the teal-bar tip panel below the hero.
- {on-this-page}: new directive that auto-collects every {card-group} and
  {whats-new} on the page (by id+title) and renders a single inline-link
  TOC chip.

Both YAML-bodied directives use the existing YamlSerialization static
context (AOT-safe) with new types registered.

The two hub markdown files (Elasticsearch and Kibana) are rewritten to
exercise the full directive set, mirroring the gists' content and shape.
hub.css is rewritten to model the gists' rules with the project's design
tokens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/hubs/elasticsearch/9.0.md                | 136 +++--
 docs/hubs/kibana/9.0.md                       | 332 +++++++----
 .../Assets/markdown/hub.css                   | 546 ++++++++++++++----
 .../Myst/Directives/DirectiveBlockParser.cs   |   9 +
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |  61 +-
 .../Myst/Directives/Hub/CardGroupView.cshtml  |  32 +-
 .../Myst/Directives/Hub/HeroBlock.cs          |  21 +-
 .../Myst/Directives/Hub/HeroView.cshtml       |  46 +-
 .../Myst/Directives/Hub/HeroViewModel.cs      |   4 +-
 .../Myst/Directives/Hub/HubYamlBody.cs        |  96 +++
 .../Myst/Directives/Hub/IntroBlock.cs         |  26 +
 .../Myst/Directives/Hub/IntroView.cshtml      |   5 +
 .../Myst/Directives/Hub/IntroViewModel.cs     |   7 +
 .../Myst/Directives/Hub/LinkCardBlock.cs      | 106 +++-
 .../Myst/Directives/Hub/LinkCardView.cshtml   |  71 ++-
 .../Myst/Directives/Hub/LinkCardViewModel.cs  |   5 +-
 .../Myst/Directives/Hub/OnThisPageBlock.cs    |  54 ++
 .../Myst/Directives/Hub/OnThisPageView.cshtml |  17 +
 .../Directives/Hub/OnThisPageViewModel.cs     |  10 +
 .../Myst/Directives/Hub/ProductIcons.cs       |  68 +++
 .../Myst/Directives/Hub/WhatsNewBlock.cs      |  99 ++++
 .../Myst/Directives/Hub/WhatsNewView.cshtml   |  75 +++
 .../Myst/Directives/Hub/WhatsNewViewModel.cs  |  10 +
 .../Myst/YamlSerialization.cs                 |   5 +
 24 files changed, 1521 insertions(+), 320 deletions(-)
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HubYamlBody.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageViewModel.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/ProductIcons.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs

diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
index 1069f120a3..005007f1a0 100644
--- a/docs/hubs/elasticsearch/9.0.md
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -3,73 +3,125 @@ layout: hub
 ---
 
 :::{hero}
-:icon: E
-:version: 9.0
-:quick-links: What's new=#whats-new,Get started=#install,All versions=/
+:icon: elasticsearch
+:version: v9 / Serverless (current)
+:quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
+:releases: Latest&#58; [Stack 9.4.1](/release-notes/elasticsearch) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
 
 # Elasticsearch
 
-The distributed search and analytics engine, ready for production at scale.
+The distributed search and analytics engine. Store, search, and analyze data at any scale, with vector search, AI toolkits, and a high-performance retrieval engine.
 :::
 
-::::{card-group}
-:title: What's new
-:variant: news
-:id: whats-new
-
-:::{link-card} ES|QL JOIN syntax now GA
-:link: /
-:badge: 9.0
-Run cross-index joins in ES|QL queries with full GA stability and performance.
+:::{on-this-page}
 :::
 
-:::{link-card} Vector quantization improvements
-:link: /
-:badge: 9.0
-30% smaller indices and faster search with the new BBQ encoding.
+:::{intro}
+**New to Elasticsearch?** [Start with Elastic Fundamentals](https://www.elastic.co/docs/get-started) — a hands-on walk-through of indexing, querying, and search relevance.
 :::
 
-::::
+:::{whats-new}
+title: What's new in Elasticsearch
+id: whats-new
+release-links:
+  - label: 9.4
+    url: /release-notes/elasticsearch
+  - label: Serverless
+    url: /release-notes/serverless
+items:
+  - title: ES|QL JOIN syntax
+    description: Run cross-index joins in ES|QL queries with full GA stability and performance
+    link: /reference/esql/joins
+    meta: 9.0 GA
+  - title: BBQ vector quantization
+    description: 30% smaller indices and faster search with the new Better Binary Quantization encoding
+    link: /reference/vector-quantization
+    meta: 9.0 GA
+:::
 
 ::::{card-group}
 :title: Install and deploy
-:intro: Get Elasticsearch running on the platform of your choice.
 :id: install
 
-:::{link-card} Self-managed
-:link: /
-Run Elasticsearch on your own infrastructure for full control over hardware and configuration.
+:::{link-card}
+title: Self-managed
+link: /deploy-manage/deploy/self-managed
+description: Run Elasticsearch on your own infrastructure for full control over hardware and configuration.
+links:
+  - label: Install on Linux / macOS
+    url: /deploy-manage/deploy/self-managed/install-elasticsearch
+  - label: Install with Docker
+    url: /deploy-manage/deploy/self-managed/install-elasticsearch-with-docker
+  - label: Configure (elasticsearch.yml)
+    url: /deploy-manage/deploy/self-managed/configure-elasticsearch
 :::
 
-:::{link-card} Elastic Cloud Hosted
-:link: /
-Managed deployments on AWS, GCP, or Azure with one-click upgrades and zero downtime.
+:::{link-card}
+title: Elastic Cloud Hosted
+link: /deploy-manage/deploy/elastic-cloud
+description: Managed deployments on AWS, GCP, or Azure with one-click upgrades and zero downtime.
+links:
+  - label: Sign up
+    url: /deploy-manage/deploy/elastic-cloud/sign-up
+  - label: Manage deployments
+    url: /deploy-manage/deploy/elastic-cloud/manage-deployments
 :::
 
-:::{link-card} Elastic Cloud Serverless
-:link: /
-Pay-per-use Elasticsearch with no clusters to manage and elastic auto-scaling.
+:::{link-card}
+title: Elastic Cloud Serverless
+link: /deploy-manage/deploy/elastic-cloud-serverless
+description: Pay-per-use Elasticsearch with no clusters to manage and elastic auto-scaling.
+links:
+  - label: Get started
+    url: /deploy-manage/deploy/elastic-cloud-serverless/get-started
 :::
-
 ::::
 
 ::::{card-group}
-:title: Index and ingest data
-:intro: Move data into Elasticsearch from any source.
-
-:::{link-card} Elastic integrations
-:link: /
-Pre-built integrations for hundreds of services and platforms.
+:title: Search and query
+:id: search
+
+:::{link-card}
+title: ES|QL
+link: /reference/esql
+description: Pipe-friendly query language for searching, filtering, and aggregating data.
+links:
+  - label: Get started
+    url: /reference/esql/get-started
+  - label: Functions reference
+    url: /reference/esql/functions
 :::
 
-:::{link-card} Logstash
-:link: /
-Ingest, transform, and enrich data from any source.
+:::{link-card}
+title: Query DSL
+link: /reference/query-dsl
+description: JSON-based query language for full-text, structured, geo, and vector search.
+links:
+  - label: Match query
+    url: /reference/query-dsl/query-dsl-match-query
+  - label: Bool query
+    url: /reference/query-dsl/query-dsl-bool-query
+aside:
+  label: Query types
+  links:
+    - label: Term
+      url: /reference/query-dsl/term-level-queries
+    - label: Full text
+      url: /reference/query-dsl/full-text-queries
+    - label: Geo
+      url: /reference/query-dsl/geo-queries
+    - label: Vector
+      url: /reference/query-dsl/vector-queries
 :::
 
-:::{link-card} Beats
-:link: /
-Lightweight shippers for logs, metrics, and network data.
+:::{link-card}
+title: Vector search
+link: /solutions/search/vector
+description: Dense and sparse vector retrieval for AI applications and semantic search.
+links:
+  - label: kNN search
+    url: /reference/search-types/knn-search
+  - label: ELSER
+    url: /reference/elasticsearch-clients/elser
 :::
-
 ::::
diff --git a/docs/hubs/kibana/9.0.md b/docs/hubs/kibana/9.0.md
index 2bc63dd2c4..11ee62040c 100644
--- a/docs/hubs/kibana/9.0.md
+++ b/docs/hubs/kibana/9.0.md
@@ -3,140 +3,278 @@ layout: hub
 ---
 
 :::{hero}
-:icon: K
-:version: 9.0
-:quick-links: What's new=#whats-new,Install=#install,All versions=/
+:icon: kibana
+:version: v9 / Serverless (current)
+:quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
+:releases: Latest&#58; [Stack 9.4.1](/release-notes/kibana) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
 
 # Kibana
 
-The window into the Elastic Stack. Visualize, analyze, and explore your data with dashboards, queries, and machine learning.
+The UI for the Elasticsearch platform. Explore and visualize your data, build dashboards, set up alerts, automate tasks with AI, and use purpose-built solutions for Search, Observability, and Security.
 :::
 
-::::{card-group}
-:title: What's new
-:variant: news
-:id: whats-new
-
-:::{link-card} Refreshed dashboard layout engine
-:link: /
-:badge: 9.0
-Smoother resizing, faster panel rendering, and improved touch behavior.
+:::{on-this-page}
 :::
 
-:::{link-card} Lens chart suggestions
-:link: /
-:badge: 9.0
-Lens now suggests visualizations based on your data shape automatically.
+:::{intro}
+**New to Kibana?** [Learn data exploration and visualization](https://www.elastic.co/docs/explore-analyze/kibana-data-exploration-learning-tutorial) — a hands-on walk-through of Discover, ES|QL, visualizations, and dashboards.
 :::
 
-::::
+:::{whats-new}
+title: What's new in Kibana
+id: whats-new
+release-links:
+  - label: 9.4
+    url: /release-notes/kibana
+  - label: Serverless
+    url: /release-notes/serverless
+items:
+  - title: Dashboards and visualizations APIs
+    description: Programmatically create and manage dashboards and visualizations
+    link: /api/dashboards
+    meta: 9.4 preview
+  - title: AI agent skills
+    description: Teach AI coding agents to work with the Elastic stack
+    link: /ai/agent-skills
+    meta: Mar 2026
+  - title: Agent Builder
+    description: Build custom AI agents that reason over your data
+    link: /ai/agent-builder
+    meta: 9.3 GA
+  - title: Workflows
+    description: Automate tasks with Kibana actions, HTTP calls, and AI agents
+    link: /ai/workflows
+    meta: 9.3 preview
+:::
 
 ::::{card-group}
 :title: Install and administer
-:intro: Get Kibana running and configure it for your environment.
 :id: install
 
-:::{link-card} Self-managed
-:link: /
-Install Kibana on your own infrastructure with full configuration control.
+:::{link-card}
+title: Self-managed
+link: /deploy-manage/deploy/self-managed/install-kibana
+description: Install and run Kibana on your own infrastructure.
+links:
+  - label: Docker
+    url: /deploy-manage/deploy/self-managed/install-kibana-with-docker
+  - label: Debian / Ubuntu
+    url: /deploy-manage/deploy/self-managed/install-kibana-with-debian-package
+  - label: RPM
+    url: /deploy-manage/deploy/self-managed/install-kibana-with-rpm
+  - label: Windows
+    url: /deploy-manage/deploy/self-managed/install-kibana-on-windows
+  - label: Configure (kibana.yml)
+    url: /deploy-manage/deploy/self-managed/configure-kibana
 :::
 
-:::{link-card} Elastic Cloud Hosted
-:link: /
-Kibana included in every Elastic Cloud deployment, fully managed.
+:::{link-card}
+title: Managed deployments
+link: /deploy-manage/deploy/elastic-cloud/access-kibana
+description: Run Kibana on Elastic Cloud, Kubernetes, or ECE.
+links:
+  - label: Elastic Cloud Hosted
+    url: /deploy-manage/deploy/elastic-cloud/access-kibana
+  - label: Elastic Cloud on Kubernetes (ECK)
+    url: /deploy-manage/deploy/cloud-on-k8s/kibana-configuration
+  - label: Elastic Cloud Enterprise
+    url: /deploy-manage/deploy/cloud-enterprise/access-kibana
 :::
 
-:::{link-card} Configure Kibana
-:link: /
-Set up authentication, spaces, monitoring, alerts, and more.
+:::{link-card}
+title: Configure and secure
+link: /deploy-manage/users-roles/cluster-or-deployment-auth/kibana-authentication
+description: Authentication, roles, spaces, and encryption.
+links:
+  - label: Authentication (SSO, SAML, OIDC...)
+    url: /deploy-manage/users-roles/cluster-or-deployment-auth/kibana-authentication
+  - label: Kibana privileges
+    url: /deploy-manage/users-roles/cluster-or-deployment-auth/kibana-privileges
+  - label: Spaces
+    url: /deploy-manage/manage-spaces
+  - label: Secure saved objects
+    url: /deploy-manage/security/secure-saved-objects
 :::
 
+:::{link-card}
+title: Maintain and monitor
+link: /deploy-manage/production-guidance/kibana-in-production-environments
+description: Production guidance, upgrades, reporting, monitoring, and logging.
+links:
+  - label: Run in production
+    url: /deploy-manage/production-guidance/kibana-in-production-environments
+  - label: Upgrade Kibana
+    url: /deploy-manage/upgrade/deployment-or-cluster/kibana
+  - label: Monitoring
+    url: /deploy-manage/monitor/stack-monitoring/kibana-monitoring-data
+  - label: Logging
+    url: /deploy-manage/monitor/logging-configuration/kibana-logging
+:::
 ::::
 
 ::::{card-group}
 :title: Explore, visualize, and analyze
-:intro: The core Kibana surfaces for working with your data.
 :id: explore
 
-:::{link-card} Discover
-:link: /
-Search and explore raw documents in any Elasticsearch index.
+:::{link-card}
+title: Discover
+link: /explore-analyze/discover/discover-get-started
+description: Browse documents, filter, and query your indices in real time.
+links:
+  - label: Get started with Discover
+    url: /explore-analyze/discover/discover-get-started
+  - label: Use ES|QL in Kibana
+    url: /explore-analyze/query-filter/languages/esql-kibana
 :::
 
-:::{link-card} Dashboards
-:link: /
-Build and share interactive dashboards with charts, maps, and metrics.
+:::{link-card}
+title: Dashboards
+link: /explore-analyze/dashboards
+description: Build interactive dashboards that combine visualizations, controls, and context.
+links:
+  - label: Create a dashboard
+    url: /explore-analyze/dashboards/create-dashboard
+  - label: Build and customize
+    url: /explore-analyze/dashboards/building
+  - label: Organize panels and sections
+    url: /explore-analyze/dashboards/arrange-panels
+  - label: Share and export
+    url: /explore-analyze/dashboards/sharing
+aside:
+  label: Panel types
+  links:
+    - label: Visualizations
+      url: /explore-analyze/visualize/lens
+    - label: Maps
+      url: /explore-analyze/visualize/maps
+    - label: Text
+      url: /explore-analyze/visualize/text-panels
+    - label: Images
+      url: /explore-analyze/visualize/image-panels
+    - label: Links
+      url: /explore-analyze/visualize/link-panels
+    - label: Alerts
+      url: /explore-analyze/visualize/alert-panels
 :::
 
-:::{link-card} Lens
-:link: /
-Drag-and-drop visualization builder with smart suggestions.
+:::{link-card}
+title: Build visualizations
+link: /explore-analyze/visualize/lens
+description: Create charts and visual panels using the drag-and-drop editor, query mode (ES|QL), Vega, or Maps.
+links:
+  - label: Visualization editor (drag-and-drop)
+    url: /explore-analyze/visualize/lens
+  - label: Query mode (ES|QL)
+    url: /explore-analyze/visualize/esorql
+  - label: Vega
+    url: /explore-analyze/visualize/custom-visualizations-with-vega
+  - label: Maps
+    url: /explore-analyze/visualize/maps
+aside:
+  label: Chart types
+  links:
+    - label: Area
+      url: /explore-analyze/visualize/charts/area-charts
+    - label: Line
+      url: /explore-analyze/visualize/charts/line-charts
+    - label: Pie
+      url: /explore-analyze/visualize/charts/pie-charts
+    - label: Table
+      url: /explore-analyze/visualize/charts/tables
+    - label: Metric
+      url: /explore-analyze/visualize/charts/metric-charts
+    - label: Heat map
+      url: /explore-analyze/visualize/charts/heat-map-charts
+    - label: Treemap
+      url: /explore-analyze/visualize/charts/treemap-charts
+    - label: Mosaic
+      url: /explore-analyze/visualize/charts/mosaic-charts
 :::
-
 ::::
 
 ::::{card-group}
-:title: Track and respond
-:intro: Alerting, watchers, and case management.
-:id: track
-
-:::{link-card} Alerting
-:link: /
-Define rules and trigger actions when conditions are met.
-:::
-
-:::{link-card} Cases
-:link: /
-Collect, track, and resolve issues across teams.
-:::
-
-:::{link-card} Maps
-:link: /
-Geospatial analysis and live tracking on layered maps.
+:title: Solutions
+:id: solutions
+
+:::{link-card}
+title: Elasticsearch
+link: /solutions/elasticsearch-solution-project
+icon: elasticsearch
+variant: es
+description: Build powerful search and RAG applications using vector database, AI toolkit, and advanced retrieval capabilities.
+links:
+  - label: Solution overview
+    url: /solutions/elasticsearch-solution-project
+  - label: Get started
+    url: /solutions/elasticsearch-solution-project/get-started
+  - label: Agent Builder
+    url: /explore-analyze/ai-features/elastic-agent-builder
+aside:
+  label: Key features
+  links:
+    - label: Playground
+      url: /explore-analyze/query-filter/tools/playground
+    - label: Vector search
+      url: /solutions/search/vector
+    - label: Content connectors
+      url: /reference/search-connectors
+    - label: Semantic search
+      url: /solutions/search/semantic-search/semantic-search-elser-ingest-pipelines
 :::
 
-::::
-
-::::{card-group}
-:title: AI and automation
-:intro: Machine learning and AI-assisted workflows in Kibana.
-:id: ai
-
-:::{link-card} Machine learning
-:link: /
-Detect anomalies, classify data, and forecast trends.
+:::{link-card}
+title: Observability
+link: /solutions/observability
+icon: observability
+variant: obs
+description: Resolve problems with open, flexible, and unified observability powered by advanced machine learning and analytics.
+links:
+  - label: Solution overview
+    url: /solutions/observability
+  - label: Get started
+    url: /solutions/observability/get-started
+  - label: Agent Builder
+    url: /solutions/observability/ai/agent-builder-observability
+aside:
+  label: Key features
+  links:
+    - label: APM
+      url: /solutions/observability/apm
+    - label: Logs
+      url: /solutions/observability/logs
+    - label: Infrastructure
+      url: /solutions/observability/infra-and-hosts
+    - label: Synthetics
+      url: /solutions/observability/synthetics/get-started
+    - label: SLOs
+      url: /solutions/observability/incident-management/service-level-objectives-slos
 :::
 
-:::{link-card} AI Assistant
-:link: /
-A conversational assistant that helps you query and analyze data.
+:::{link-card}
+title: Security
+link: /solutions/security
+icon: security
+variant: sec
+description: Detect, investigate, and respond to threats with AI-driven security analytics to protect your organization.
+links:
+  - label: Solution overview
+    url: /solutions/security
+  - label: Get started
+    url: /solutions/security/get-started
+  - label: Agent Builder
+    url: /solutions/security/ai/agent-builder/agent-builder
+aside:
+  label: Key features
+  links:
+    - label: SIEM
+      url: /solutions/security/get-started/get-started-detect-with-siem
+    - label: Detection rules
+      url: /solutions/security/detect-and-alert/manage-detection-rules
+    - label: Elastic Defend
+      url: /solutions/security/configure-elastic-defend
+    - label: Cloud security
+      url: /solutions/security/cloud
+    - label: Cases
+      url: /solutions/security/investigate/security-cases
 :::
-
-:::{link-card} Automatic insights
-:link: /
-Surface notable changes in your data without writing rules.
-:::
-
-::::
-
-::::{card-group}
-:title: Management and developer tools
-:intro: Stack management, Dev Tools, and APIs.
-:id: manage
-
-:::{link-card} Stack Management
-:link: /
-Manage spaces, roles, index lifecycle, snapshots, and more.
-:::
-
-:::{link-card} Dev Tools
-:link: /
-Console, Painless Lab, Search Profiler, Grok Debugger.
-:::
-
-:::{link-card} Kibana APIs
-:link: /
-Automate Kibana with the public REST APIs.
-:::
-
 ::::
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 3578c6ff0a..bf2f300672 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -1,145 +1,487 @@
+/*
+ * Hub-page styling. Models the gist prototypes in docs/hubs/. Class names
+ * mirror the directive output:
+ *
+ *   .hub-page         page wrapper (set by Layout/_Layout.cshtml's RenderHub)
+ *   .hub-content      article wrapper inside the content column
+ *   .hub-hero         hero section (full-bleed dark background)
+ *   .hub-on-this-page inline TOC chip
+ *   .hub-intro        getting-started callout panel
+ *   .hub-whats-new    What's new panel
+ *   .hub-zone         section heading
+ *   .hub-card-grid    card grid container
+ *   .hub-card         card item
+ *
+ * The hero / on-this-page / intro / whats-new / card-grid containers all
+ * use a shared inner rail of max-w-5xl + 24px horizontal padding.
+ */
+
 @layer components {
-	/* Full-width content area; hero and card-group manage their own inner rails. */
-	.hub-page .hub-content {
-		@apply mb-12 w-full max-w-none p-0;
+	/* Page wrapper: dotted background like the gist, full-width content. */
+	.hub-page {
+		background-color: var(--color-grey-10);
+		background-image: radial-gradient(
+			circle,
+			var(--color-grey-20) 0.75px,
+			transparent 0.75px
+		);
+		background-size: 24px 24px;
 	}
-
-	/* Section-content rail used by hero/group internals. */
-	.hub-page :where(.hub-rail) {
-		@apply mx-auto w-full max-w-5xl px-6;
+	.hub-page .hub-content {
+		@apply mb-20 w-full max-w-none p-0;
 	}
 
-	/* Full-bleed hero with dark background and inner content rail. */
+	/* Hero ------------------------------------------------------------- */
 	.hub-hero {
-		@apply bg-ink-navy mb-10 w-full px-0 py-14 text-white;
-
-		.hub-hero-inner {
-			@apply mx-auto w-full max-w-5xl px-6;
-		}
-
-		.hub-hero-top {
-			@apply mb-3 flex items-center gap-4;
-		}
+		background-color: var(--color-ink-navy);
+		color: var(--color-white);
+		padding: 56px 24px 48px;
+	}
+	.hub-hero .hub-hero-inner {
+		@apply mx-auto w-full max-w-5xl;
+	}
+	.hub-hero .hub-hero-top {
+		@apply mb-3 flex items-center gap-4;
+	}
+	.hub-hero .hub-hero-icon {
+		@apply inline-flex h-13 w-13 shrink-0 items-center justify-center rounded-xl text-2xl font-bold;
+		width: 52px;
+		height: 52px;
+		background-color: rgb(255 255 255 / 0.08);
+		color: var(--color-white);
+	}
+	.hub-hero .hub-hero-icon-svg {
+		background-color: transparent;
+	}
+	.hub-hero .hub-hero-icon-svg svg {
+		width: 32px;
+		height: 32px;
+	}
+	.hub-hero .hub-hero-title h1 {
+		font-size: 2.571rem;
+		font-weight: 700;
+		line-height: 1.2;
+		letter-spacing: -0.5px;
+		color: var(--color-white);
+		margin: 0;
+	}
+	.hub-hero .hub-hero-title h1 a.headerlink {
+		color: var(--color-white);
+		text-decoration: none;
+	}
+	.hub-hero .hub-hero-title p {
+		font-size: 1.143rem;
+		color: rgb(255 255 255 / 0.7);
+		max-width: 720px;
+		line-height: 1.6;
+		margin-top: 12px;
+	}
 
-		.hub-hero-icon {
-			@apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-xl font-bold text-white;
-			background-color: rgb(255 255 255 / 0.08);
-		}
+	.hub-hero .hub-hero-search {
+		margin-top: 20px;
+		margin-bottom: 20px;
+		max-width: 480px;
+	}
 
-		.hub-hero-version {
-			@apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold tracking-wide;
-			background-color: rgb(255 255 255 / 0.1);
-			border: 1px solid rgb(255 255 255 / 0.15);
-		}
+	.hub-hero .hub-hero-meta {
+		@apply mt-2 flex flex-wrap items-center gap-3;
+	}
 
-		.hub-hero-content {
-			h1 {
-				@apply mb-3 text-4xl font-bold tracking-tight text-white;
-			}
-			h1 a.headerlink {
-				@apply text-white no-underline;
-			}
-			p {
-				@apply max-w-3xl text-base leading-relaxed;
-				color: rgb(255 255 255 / 0.7);
-			}
-		}
+	.hub-hero .hub-hero-version {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		background: rgb(255 255 255 / 0.08);
+		border: 1px solid rgb(255 255 255 / 0.15);
+		border-radius: 20px;
+		padding: 5px 14px;
+		font-size: 13px;
+		color: rgb(255 255 255 / 0.85);
+	}
+	.hub-hero .hub-hero-version-dot {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: #9adc30;
+	}
 
-		.hub-hero-search {
-			@apply mt-6 max-w-md;
-		}
+	.hub-hero .hub-hero-pills {
+		@apply m-0 flex list-none flex-wrap gap-2 p-0;
+	}
+	.hub-hero .hub-hero-pills li {
+		@apply m-0 p-0;
+	}
+	.hub-hero .hub-hero-pills a {
+		font-size: 13px;
+		padding: 5px 14px;
+		border-radius: 20px;
+		background: rgb(255 255 255 / 0.06);
+		border: 1px solid rgb(255 255 255 / 0.12);
+		color: rgb(255 255 255 / 0.85);
+		text-decoration: none;
+		transition: background 0.15s;
+	}
+	.hub-hero .hub-hero-pills a:hover {
+		background: rgb(255 255 255 / 0.12);
+		color: var(--color-white);
+		text-decoration: none;
+	}
 
-		.hub-hero-links {
-			@apply mt-5 flex list-none flex-wrap gap-x-5 gap-y-2 p-0;
-
-			li {
-				@apply m-0 p-0;
-			}
-
-			a {
-				@apply border-b border-transparent text-sm font-semibold no-underline;
-				color: rgb(255 255 255 / 0.85);
-			}
-			a:hover {
-				@apply text-white;
-				border-bottom-color: rgb(255 255 255 / 0.4);
-			}
-		}
+	.hub-hero .hub-hero-releases {
+		@apply mt-4;
+		font-size: 12px;
+		color: rgb(255 255 255 / 0.45);
+	}
+	.hub-hero .hub-hero-releases a {
+		color: rgb(255 255 255 / 0.6);
+		text-decoration: none;
+	}
+	.hub-hero .hub-hero-releases a:hover {
+		color: rgb(255 255 255 / 0.85);
+		text-decoration: underline;
 	}
 
-	/* Card group: section title rail, then card grid rail. */
-	.hub-card-group {
-		@apply mt-10;
+	/* On this page ----------------------------------------------------- */
+	.hub-on-this-page {
+		@apply mx-auto w-full max-w-5xl;
+		margin-top: 40px;
+		margin-bottom: 36px;
+		padding: 20px 28px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 16px;
+		font-size: 14px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 4px 0;
+		line-height: 1.9;
+	}
+	.hub-on-this-page .hub-on-this-page-label {
+		font-weight: 700;
+		color: var(--color-ink-dark);
+		margin-right: 14px;
+	}
+	.hub-on-this-page a {
+		font-weight: 500;
+		color: var(--color-blue-elastic-100);
+		text-decoration: none;
+	}
+	.hub-on-this-page a:hover {
+		text-decoration: underline;
+	}
+	.hub-on-this-page .hub-on-this-page-sep {
+		color: var(--color-grey-30);
+		margin: 0 10px;
+		font-size: 12px;
+	}
 
-		.hub-card-group-header {
-			@apply mx-auto mb-5 w-full max-w-5xl px-6;
+	/* Intro callout ---------------------------------------------------- */
+	.hub-intro {
+		@apply mx-auto w-full max-w-5xl;
+		margin-bottom: 36px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-left: 3px solid var(--color-teal-40, #66ccc8);
+		border-radius: 16px;
+		padding: 18px 24px;
+		font-size: 14px;
+		color: var(--color-ink);
+		line-height: 1.5;
+	}
+	.hub-intro p {
+		margin: 0;
+	}
+	.hub-intro a {
+		color: var(--color-blue-elastic-100);
+		text-decoration: underline;
+	}
 
-			h2 {
-				@apply text-ink-dark m-0 text-2xl font-bold;
-			}
-		}
+	/* What's new ------------------------------------------------------- */
+	.hub-whats-new {
+		@apply mx-auto w-full max-w-5xl;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 16px;
+		padding: 24px 28px;
+		margin-bottom: 36px;
+		scroll-margin-top: 120px;
+	}
+	.hub-whats-new .hub-wn-header {
+		@apply mb-4 flex items-center gap-2;
+	}
+	.hub-whats-new .hub-wn-badge {
+		font-size: 12px;
+		font-weight: 700;
+		color: var(--color-white);
+		background: #f04e98;
+		border-radius: 6px;
+		padding: 3px 10px;
+		line-height: 1.3;
+	}
+	.hub-whats-new .hub-wn-title {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+	}
+	.hub-whats-new .hub-wn-rn-links {
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		flex-shrink: 0;
+		color: var(--color-ink-light);
+	}
+	.hub-whats-new .hub-wn-rn-label {
+		color: var(--color-ink-light);
+	}
+	.hub-whats-new .hub-wn-rn-links a {
+		font-weight: 500;
+		color: var(--color-blue-elastic-100);
+		text-decoration: none;
+	}
+	.hub-whats-new .hub-wn-rn-links a:hover {
+		text-decoration: underline;
+	}
+	.hub-whats-new .hub-wn-rn-sep {
+		color: var(--color-grey-30);
+	}
 
-		.hub-card-group-intro {
-			@apply text-ink-light mt-1;
-		}
+	.hub-whats-new .hub-wn-items {
+		@apply m-0 flex list-none flex-col gap-2 p-0;
+	}
+	.hub-whats-new .hub-wn-item {
+		@apply m-0 p-0;
+	}
+	.hub-whats-new .hub-wn-item-link {
+		display: flex;
+		align-items: baseline;
+		gap: 10px;
+		padding: 10px 14px;
+		border-radius: 10px;
+		background: var(--color-grey-10);
+		text-decoration: none;
+		font-size: 14px;
+		color: var(--color-body, #515151);
+		line-height: 1.4;
+		border: 1px solid transparent;
+		transition: background 0.12s;
+	}
+	.hub-whats-new a.hub-wn-item-link:hover {
+		background: var(--color-blue-elastic-10);
+		border-color: var(--color-grey-20);
+		text-decoration: none;
+	}
+	.hub-whats-new .hub-wn-item-title {
+		color: var(--color-ink-dark);
+		white-space: nowrap;
+	}
+	.hub-whats-new .hub-wn-item-desc {
+		color: var(--color-ink-light);
+	}
+	.hub-whats-new .hub-wn-item-meta {
+		margin-left: auto;
+		white-space: nowrap;
+		flex-shrink: 0;
+		font-size: 12px;
+		color: var(--color-grey-80);
+		font-weight: 500;
+	}
 
-		.hub-card-grid {
-			@apply mx-auto grid w-full max-w-5xl list-none grid-cols-1 gap-4 p-0 px-6 md:grid-cols-2 lg:grid-cols-3;
-		}
+	/* Zone (section heading) ------------------------------------------ */
+	.hub-zone {
+		@apply mx-auto w-full max-w-5xl;
+		margin-top: 56px;
+		margin-bottom: 24px;
+		scroll-margin-top: 120px;
+	}
+	.hub-zone:first-of-type {
+		margin-top: 0;
+	}
+	.hub-zone .hub-zone-title {
+		font-size: 1.571rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+		line-height: 1.2;
+		margin: 0;
+	}
+	.hub-zone .hub-zone-intro {
+		color: var(--color-ink-light);
+		margin-top: 8px;
 	}
 
-	/* News variant: tighter 2-column list. */
-	.hub-card-group-news .hub-card-grid {
-		@apply grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-2;
+	/* Card grid -------------------------------------------------------- */
+	.hub-card-grid {
+		@apply m-0 mx-auto w-full max-w-5xl list-none p-0;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
+		gap: 24px;
 	}
 
+	/* Card ------------------------------------------------------------- */
 	.hub-card {
-		@apply m-0 p-0;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 16px;
+		padding: 28px 28px 24px;
+		transition:
+			box-shadow 0.15s,
+			border-color 0.15s;
+		margin: 0;
+		list-style: none;
+	}
+	.hub-card:hover {
+		border-color: var(--color-grey-30);
+		box-shadow: 0 2px 8px rgb(0 0 0 / 0.05);
 	}
 
-	.hub-card-link {
-		@apply border-grey-20 block h-full rounded-xl border bg-white p-5 no-underline transition-colors;
+	.hub-card .hub-card-head {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin-bottom: 6px;
 	}
-	.hub-card-link:hover {
-		@apply border-blue-elastic no-underline;
+	.hub-card .hub-card-icon svg {
+		width: 28px;
+		height: 28px;
+		display: block;
 	}
-
-	.hub-card-head {
-		@apply mb-2 flex items-start justify-between gap-3;
+	.hub-card .hub-card-title {
+		font-size: 1.214rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+		margin: 0;
+	}
+	.hub-card .hub-card-title a {
+		color: var(--color-ink-dark);
+		text-decoration: none;
+	}
+	.hub-card .hub-card-title a:hover {
+		color: var(--color-blue-elastic);
+		text-decoration: none;
 	}
 
-	.hub-card-title {
-		@apply text-ink-dark text-base font-semibold;
+	.hub-card .hub-card-desc {
+		font-size: 14px;
+		color: var(--color-ink-light);
+		margin-bottom: 14px;
+		line-height: 1.5;
 	}
 
-	.hub-card-badge {
-		@apply bg-grey-10 text-ink-light border-grey-20 inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-xs font-semibold tracking-wide;
+	.hub-card .hub-card-links {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 0;
+		padding: 0;
+	}
+	.hub-card .hub-card-links li {
+		margin: 0;
+		padding: 0;
+	}
+	.hub-card .hub-card-links li a {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--color-blue-elastic-100);
+		padding: 3px 0;
+		display: inline-flex;
+		align-items: baseline;
+		gap: 6px;
+		text-decoration: none;
+	}
+	.hub-card .hub-card-links li a:hover {
+		color: var(--color-blue-elastic-110);
+		text-decoration: underline;
+	}
+	.hub-card .hub-card-links li a::before {
+		content: '\203A';
+		color: var(--color-grey-40);
+		font-weight: 700;
+		font-size: 15px;
 	}
 
-	.hub-card-body {
-		@apply text-ink-light text-sm leading-relaxed;
+	/* Card aside (Panel types, Chart types, Key features...) */
+	.hub-card .hub-card-aside {
+		margin-top: 14px;
+		padding-top: 12px;
+		border-top: 1px solid var(--color-grey-20);
+	}
+	.hub-card .hub-card-aside-label {
+		font-size: 12px;
+		color: var(--color-grey-80);
+		margin-bottom: 6px;
+		font-weight: 600;
+		letter-spacing: 0.3px;
+	}
+	.hub-card .hub-card-aside-links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0;
+		font-size: 13px;
+		line-height: 1.9;
+	}
+	.hub-card .hub-card-aside-links a {
+		color: var(--color-blue-elastic-100);
+		font-weight: 500;
+		text-decoration: none;
+	}
+	.hub-card .hub-card-aside-links a:hover {
+		text-decoration: underline;
+	}
+	.hub-card .hub-card-aside-sep {
+		color: var(--color-grey-30);
+		margin: 0 6px;
+	}
 
-		& > *:first-child {
-			@apply mt-0;
-		}
-		& > *:last-child {
-			@apply mb-0;
-		}
+	/* Solution accent borders */
+	.hub-card-sol {
+		border-left: 3px solid var(--color-blue-elastic);
+	}
+	.hub-card-sol-es {
+		border-left-color: #fec514;
+	}
+	.hub-card-sol-obs {
+		border-left-color: #f04e98;
+	}
+	.hub-card-sol-sec {
+		border-left-color: #00bfb3;
 	}
 
 	/* Product badges shown above the H1 of a regular page. */
 	.product-badges {
 		@apply mb-3 flex list-none flex-wrap gap-2 p-0;
-
-		li {
-			@apply m-0 p-0;
-		}
 	}
-
+	.product-badges li {
+		@apply m-0 p-0;
+	}
 	.product-badge {
-		@apply bg-grey-10 text-ink-light border-grey-20 inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold tracking-wide no-underline;
+		@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold tracking-wide no-underline;
+		background: var(--color-grey-10);
+		color: var(--color-ink-light);
+		border: 1px solid var(--color-grey-20);
 	}
 	.product-badge:hover {
-		@apply bg-blue-elastic-10 text-blue-elastic-100 border-blue-elastic no-underline;
+		background: var(--color-blue-elastic-10);
+		color: var(--color-blue-elastic-100);
+		border-color: var(--color-blue-elastic);
+		text-decoration: none;
+	}
+
+	@media (max-width: 768px) {
+		.hub-hero h1 {
+			font-size: 2rem;
+		}
+		.hub-card-grid {
+			grid-template-columns: 1fr;
+		}
+		.hub-on-this-page {
+			flex-direction: column;
+		}
+		.hub-card {
+			padding: 20px;
+		}
 	}
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
index d38bfa1921..fe1e022fad 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
@@ -146,6 +146,15 @@ protected override DirectiveBlock CreateFencedBlock(BlockProcessor processor)
 		if (info.IndexOf("{link-card}") > 0)
 			return new LinkCardBlock(this, context);
 
+		if (info.IndexOf("{whats-new}") > 0)
+			return new WhatsNewBlock(this, context);
+
+		if (info.IndexOf("{intro}") > 0)
+			return new IntroBlock(this, context);
+
+		if (info.IndexOf("{on-this-page}") > 0)
+			return new OnThisPageBlock(this, context);
+
 		foreach (var admonition in Admonitions)
 		{
 			if (info.IndexOf(admonition) > 0)
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index df6f26b8a2..92db50c08d 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -131,6 +131,15 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 			case LinkCardBlock linkCardBlock:
 				WriteLinkCard(renderer, linkCardBlock);
 				return;
+			case WhatsNewBlock whatsNewBlock:
+				WriteWhatsNew(renderer, whatsNewBlock);
+				return;
+			case IntroBlock introBlock:
+				WriteIntro(renderer, introBlock);
+				return;
+			case OnThisPageBlock onThisPageBlock:
+				WriteOnThisPage(renderer, onThisPageBlock);
+				return;
 			default:
 				// if (!string.IsNullOrEmpty(directiveBlock.Info) && !directiveBlock.Info.StartsWith('{'))
 				// 	WriteCode(renderer, directiveBlock);
@@ -344,13 +353,19 @@ private static void WriteTabSet(HtmlRenderer renderer, TabSetBlock block)
 
 	private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 	{
+		var releasesHtml = string.IsNullOrWhiteSpace(block.Releases)
+			? null
+			: RenderInlineMarkdown(block.Releases!);
+
 		var slice = HeroView.Create(new HeroViewModel
 		{
 			DirectiveBlock = block,
-			Icon = block.Icon,
+			IconKey = block.Icon,
+			IconSvg = block.IconSvg,
 			Version = block.Version,
 			ShowSearch = block.ShowSearch,
-			QuickLinks = block.QuickLinks
+			QuickLinks = block.QuickLinks,
+			ReleasesHtml = releasesHtml
 		});
 		RenderRazorSlice(slice, renderer);
 	}
@@ -373,13 +388,49 @@ private static void WriteLinkCard(HtmlRenderer renderer, LinkCardBlock block)
 		var slice = LinkCardView.Create(new LinkCardViewModel
 		{
 			DirectiveBlock = block,
-			Title = block.Title,
-			Link = block.Link,
-			Badge = block.Badge
+			Data = block.Data,
+			IconSvg = ProductIcons.Get(block.Data.Icon)
+		});
+		RenderRazorSlice(slice, renderer);
+	}
+
+	private static void WriteWhatsNew(HtmlRenderer renderer, WhatsNewBlock block)
+	{
+		var slice = WhatsNewView.Create(new WhatsNewViewModel
+		{
+			DirectiveBlock = block,
+			Data = block.Data
+		});
+		RenderRazorSlice(slice, renderer);
+	}
+
+	private static void WriteIntro(HtmlRenderer renderer, IntroBlock block)
+	{
+		var slice = IntroView.Create(new IntroViewModel { DirectiveBlock = block });
+		RenderRazorSlice(slice, renderer);
+	}
+
+	private static void WriteOnThisPage(HtmlRenderer renderer, OnThisPageBlock block)
+	{
+		var slice = OnThisPageView.Create(new OnThisPageViewModel
+		{
+			DirectiveBlock = block,
+			Items = block.CollectItems()
 		});
 		RenderRazorSlice(slice, renderer);
 	}
 
+	private static string RenderInlineMarkdown(string source)
+	{
+		var html = Markdig.Markdown.ToHtml(source).Trim();
+		// Strip a single wrapping <p>...</p> so the result can drop into a span/p directly.
+		const string open = "<p>";
+		const string close = "</p>";
+		if (html.StartsWith(open, StringComparison.Ordinal) && html.EndsWith(close, StringComparison.Ordinal))
+			html = html[open.Length..^close.Length];
+		return html;
+	}
+
 	private static void WriteTabItem(HtmlRenderer renderer, TabItemBlock block)
 	{
 		var slice = TabItemView.Create(new TabItemViewModel
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
index 979065318e..28f9d6cc86 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
@@ -1,23 +1,15 @@
 @inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.CardGroupViewModel>
 
-@{
-	var sectionClass = string.IsNullOrWhiteSpace(Model.Variant)
-		? "hub-card-group"
-		: $"hub-card-group hub-card-group-{Model.Variant}";
+@if (!string.IsNullOrWhiteSpace(Model.Title))
+{
+	<div class="hub-zone" id="@Model.Anchor">
+		<h2 class="hub-zone-title">@Model.Title</h2>
+		@if (!string.IsNullOrWhiteSpace(Model.Intro))
+		{
+			<p class="hub-zone-intro">@Model.Intro</p>
+		}
+	</div>
 }
-
-<section class="@sectionClass" id="@Model.Anchor">
-	@if (!string.IsNullOrWhiteSpace(Model.Title))
-	{
-		<header class="hub-card-group-header">
-			<h2>@Model.Title</h2>
-			@if (!string.IsNullOrWhiteSpace(Model.Intro))
-			{
-				<p class="hub-card-group-intro">@Model.Intro</p>
-			}
-		</header>
-	}
-	<ul class="hub-card-grid">
-		@Model.RenderBlock()
-	</ul>
-</section>
+<ul class="hub-card-grid">
+	@Model.RenderBlock()
+</ul>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
index c28ea58412..2797255c13 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -5,20 +5,21 @@
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
 /// <summary>
-/// Renders a full-bleed page hero (dark background, icon, title, description, optional
-/// version badge, optional quick links, optional search box). Designed for landing-style
-/// pages such as product hubs, but the directive is generic and reusable.
+/// Renders a full-bleed page hero with product icon, title (from inner H1),
+/// description, search box, version chip, quick-link pills, and an optional
+/// release-status line. Designed for landing-style pages such as product hubs.
 /// </summary>
 /// <example>
 /// <code>
 /// :::{hero}
-/// :icon: elasticsearch
-/// :version: 9.0
-/// :quick-links: What's new=#whats-new,Get started=/get-started
+/// :icon: kibana
+/// :version: v9 / Serverless (current)
+/// :quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
+/// :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026) · [Serverless deployed](/srn) Apr 1, 2026
 ///
-/// # Elasticsearch
+/// # Kibana
 ///
-/// The distributed search and analytics engine.
+/// The UI for the Elasticsearch platform.
 /// :::
 /// </code>
 /// </example>
@@ -28,17 +29,21 @@ public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
 	public override string Directive => "hero";
 
 	public string? Icon { get; private set; }
+	public string? IconSvg { get; private set; }
 	public string? Version { get; private set; }
 	public bool ShowSearch { get; private set; }
 	public IReadOnlyList<HeroQuickLink> QuickLinks { get; private set; } = [];
+	public string? Releases { get; private set; }
 
 	public override void FinalizeAndValidate(ParserContext context)
 	{
 		Icon = Prop("icon");
+		IconSvg = ProductIcons.Get(Icon);
 		Version = Prop("version");
 		// search defaults to true; explicit ":search: false" hides it
 		ShowSearch = TryPropBool("search") ?? true;
 		QuickLinks = ParseQuickLinks(Prop("quick-links"));
+		Releases = Prop("releases");
 	}
 
 	private static IReadOnlyList<HeroQuickLink> ParseQuickLinks(string? raw)
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index cbd2d794e0..d124143244 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -3,32 +3,50 @@
 <section class="hub-hero">
 	<div class="hub-hero-inner">
 		<div class="hub-hero-top">
-			@if (!string.IsNullOrWhiteSpace(Model.Icon))
+			@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
 			{
-				<span class="hub-hero-icon" aria-hidden="true">@Model.Icon</span>
+				<span class="hub-hero-icon hub-hero-icon-svg">
+					@(new HtmlString(Model.IconSvg))
+				</span>
 			}
-			@if (!string.IsNullOrWhiteSpace(Model.Version))
+			else if (!string.IsNullOrWhiteSpace(Model.IconKey))
 			{
-				<span class="hub-hero-version">@Model.Version</span>
+				<span class="hub-hero-icon" aria-hidden="true">@Elastic.Markdown.Myst.Directives.Hub.ProductIcons.Initials(Model.IconKey)</span>
 			}
+			<div class="hub-hero-title">
+				@Model.RenderBlock()
+			</div>
 		</div>
-		<div class="hub-hero-content">
-			@Model.RenderBlock()
-		</div>
+
 		@if (Model.ShowSearch)
 		{
 			<div class="hub-hero-search">
 				<navigation-search></navigation-search>
 			</div>
 		}
-		@if (Model.QuickLinks.Count > 0)
+
+		<div class="hub-hero-meta">
+			@if (!string.IsNullOrWhiteSpace(Model.Version))
+			{
+				<span class="hub-hero-version">
+					<span class="hub-hero-version-dot" aria-hidden="true"></span>
+					<span class="hub-hero-version-text">@Model.Version</span>
+				</span>
+			}
+			@if (Model.QuickLinks.Count > 0)
+			{
+				<ul class="hub-hero-pills">
+					@foreach (var link in Model.QuickLinks)
+					{
+						<li><a href="@link.Url">@link.Label</a></li>
+					}
+				</ul>
+			}
+		</div>
+
+		@if (!string.IsNullOrWhiteSpace(Model.ReleasesHtml))
 		{
-			<ul class="hub-hero-links">
-				@foreach (var link in Model.QuickLinks)
-				{
-					<li><a href="@link.Url">@link.Label</a></li>
-				}
-			</ul>
+			<p class="hub-hero-releases">@(new HtmlString(Model.ReleasesHtml))</p>
 		}
 	</div>
 </section>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index 1809af3d30..19373fd0f2 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -6,8 +6,10 @@ namespace Elastic.Markdown.Myst.Directives.Hub;
 
 public class HeroViewModel : DirectiveViewModel
 {
-	public required string? Icon { get; init; }
+	public required string? IconKey { get; init; }
+	public required string? IconSvg { get; init; }
 	public required string? Version { get; init; }
 	public required bool ShowSearch { get; init; }
 	public required IReadOnlyList<HeroQuickLink> QuickLinks { get; init; }
+	public required string? ReleasesHtml { get; init; }
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HubYamlBody.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HubYamlBody.cs
new file mode 100644
index 0000000000..fe885e3ce0
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HubYamlBody.cs
@@ -0,0 +1,96 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Markdig.Syntax;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Helpers for directives that read their body as raw YAML directly from the
+/// source file. The directive's children remain markdown blocks (so renderers
+/// that don't recognize the directive still produce something), but the
+/// canonical structured data comes from the YAML.
+/// </summary>
+internal static class HubYamlBody
+{
+	/// <summary>
+	/// Returns the raw text between the opening and closing fences of a directive
+	/// block, or null when no fenced body could be located.
+	/// </summary>
+	public static string? Extract(IBlockExtension block, IFileSystemFileReader reader)
+	{
+		if (block is not Block markdig)
+			return null;
+
+		string source;
+		try
+		{
+			source = reader.ReadAllText(block.CurrentFile.FullName);
+		}
+		catch
+		{
+			return null;
+		}
+
+		var lines = source.Split('\n');
+		var openingLine = markdig.Line;
+		if (openingLine < 0 || openingLine >= lines.Length)
+			return null;
+
+		var fence = ExtractFenceMarker(lines[openingLine]);
+		if (fence is null)
+			return null;
+
+		var closingLine = -1;
+		for (var i = openingLine + 1; i < lines.Length; i++)
+		{
+			var trimmed = lines[i].TrimStart();
+			if (trimmed.StartsWith(fence, StringComparison.Ordinal) && IsClosingFence(trimmed, fence))
+			{
+				closingLine = i;
+				break;
+			}
+		}
+		if (closingLine < 0)
+			return null;
+
+		var body = string.Join('\n', lines, openingLine + 1, closingLine - openingLine - 1);
+		return string.IsNullOrWhiteSpace(body) ? null : body;
+	}
+
+	private static string? ExtractFenceMarker(string openingLine)
+	{
+		var trimmed = openingLine.TrimStart();
+		var count = 0;
+		while (count < trimmed.Length && trimmed[count] == ':')
+			count++;
+		return count >= 3 ? new string(':', count) : null;
+	}
+
+	private static bool IsClosingFence(string trimmed, string fence)
+	{
+		if (!trimmed.StartsWith(fence, StringComparison.Ordinal))
+			return false;
+		for (var i = fence.Length; i < trimmed.Length; i++)
+		{
+			if (!char.IsWhiteSpace(trimmed[i]))
+				return false;
+		}
+		return true;
+	}
+}
+
+/// <summary>
+/// Minimal abstraction over file reading so HubYamlBody can be tested without a
+/// full <c>BuildContext</c>.
+/// </summary>
+public interface IFileSystemFileReader
+{
+	string ReadAllText(string path);
+}
+
+internal sealed class BuildContextFileReader(System.IO.Abstractions.IFileSystem fileSystem) : IFileSystemFileReader
+{
+	public string ReadAllText(string path) => fileSystem.File.ReadAllText(path);
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs
new file mode 100644
index 0000000000..e6f350dfd6
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs
@@ -0,0 +1,26 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// A small "getting started" callout panel shown between the hero and the first
+/// section. The body is rendered as inline markdown so authors can use bold,
+/// links, and emphasis. Visually a white rounded panel with a teal accent bar.
+/// </summary>
+/// <example>
+/// <code>
+/// :::{intro}
+/// **New to Kibana?** [Learn data exploration and visualization](/learn), a hands-on
+/// walk-through of Discover, ES|QL, visualizations, and dashboards.
+/// :::
+/// </code>
+/// </example>
+public class IntroBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "intro";
+
+	public override void FinalizeAndValidate(ParserContext context) { }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml
new file mode 100644
index 0000000000..8f47ae9ee9
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml
@@ -0,0 +1,5 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.IntroViewModel>
+
+<aside class="hub-intro">
+	@Model.RenderBlock()
+</aside>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs
new file mode 100644
index 0000000000..f639218cea
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs
@@ -0,0 +1,7 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class IntroViewModel : DirectiveViewModel;
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
index 8c4431a8a4..a116fd6e81 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
@@ -3,21 +3,34 @@
 // See the LICENSE file in the project root for more information
 
 using Elastic.Markdown.Diagnostics;
-using Elastic.Markdown.Helpers;
+using YamlDotNet.Core;
+using YamlDotNet.Serialization;
 
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
 /// <summary>
-/// A single card with a required title and link, plus an optional badge and
-/// description body. Designed to live inside a <see cref="CardGroupBlock"/>
-/// but rendered standalone if used outside one.
+/// A rich card with title, link, description, primary-link list, and an optional
+/// aside (e.g. "Panel types: A · B · C"). The card schema is YAML-formatted in the
+/// directive body for predictable structure.
 /// </summary>
 /// <example>
 /// <code>
-/// :::{link-card} Self-managed
-/// :link: /deploy-manage/deploy/self-managed
-/// :badge: 9.0
-/// Run Elasticsearch on your own infrastructure.
+/// :::{link-card}
+/// title: Discover
+/// link: /discover/
+/// description: Browse documents, filter, and query your indices in real time.
+/// links:
+///   - label: Get started with Discover
+///     url: /discover/get-started
+///   - label: Use ES|QL in Kibana
+///     url: /esql
+/// aside:
+///   label: Panel types
+///   links:
+///     - label: Visualizations
+///       url: /viz
+///     - label: Maps
+///       url: /maps
 /// :::
 /// </code>
 /// </example>
@@ -26,20 +39,77 @@ public class LinkCardBlock(DirectiveBlockParser parser, ParserContext context)
 {
 	public override string Directive => "link-card";
 
-	public string Title { get; private set; } = default!;
-	public string? Link { get; private set; }
-	public string? Badge { get; private set; }
+	public LinkCardData Data { get; private set; } = LinkCardData.Empty;
+
+	public string Title => Data.Title ?? string.Empty;
 
 	public override void FinalizeAndValidate(ParserContext context)
 	{
-		if (string.IsNullOrWhiteSpace(Arguments))
-			this.EmitError("{link-card} requires a title argument, e.g. `:::{link-card} My title`.");
+		var yaml = HubYamlBody.Extract(this, new BuildContextFileReader(Build.ReadFileSystem));
+		if (yaml is null)
+		{
+			this.EmitError("{link-card} requires a YAML body. See the link-card directive docs.");
+			return;
+		}
 
-		Title = (Arguments ?? "{undefined}").ReplaceSubstitutions(context);
-		Link = Prop("link");
-		Badge = Prop("badge");
+		try
+		{
+			Data = YamlSerialization.Deserialize<LinkCardData>(yaml, Build.ProductsConfiguration) ?? LinkCardData.Empty;
+		}
+		catch (YamlException ex)
+		{
+			this.EmitError($"{{link-card}} YAML parse error: {ex.Message}");
+			return;
+		}
 
-		if (string.IsNullOrWhiteSpace(Link))
-			this.EmitError("{link-card} requires a `:link:` option.");
+		if (string.IsNullOrWhiteSpace(Data.Title))
+			this.EmitError("{link-card} requires a `title` field in its YAML body.");
 	}
 }
+
+[YamlSerializable]
+public record LinkCardData
+{
+	[YamlMember(Alias = "title")]
+	public string? Title { get; set; }
+
+	[YamlMember(Alias = "link")]
+	public string? Link { get; set; }
+
+	[YamlMember(Alias = "description")]
+	public string? Description { get; set; }
+
+	[YamlMember(Alias = "icon")]
+	public string? Icon { get; set; }
+
+	[YamlMember(Alias = "variant")]
+	public string? Variant { get; set; }
+
+	[YamlMember(Alias = "links")]
+	public LinkCardLink[] Links { get; set; } = [];
+
+	[YamlMember(Alias = "aside")]
+	public LinkCardAside? Aside { get; set; }
+
+	public static LinkCardData Empty { get; } = new();
+}
+
+[YamlSerializable]
+public record LinkCardLink
+{
+	[YamlMember(Alias = "label")]
+	public string? Label { get; set; }
+
+	[YamlMember(Alias = "url")]
+	public string? Url { get; set; }
+}
+
+[YamlSerializable]
+public record LinkCardAside
+{
+	[YamlMember(Alias = "label")]
+	public string? Label { get; set; }
+
+	[YamlMember(Alias = "links")]
+	public LinkCardLink[] Links { get; set; } = [];
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
index d9bb7d3d60..2017da0d05 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
@@ -1,16 +1,67 @@
 @inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.LinkCardViewModel>
 
-<li class="hub-card">
-	<a class="hub-card-link" href="@Model.Link">
-		<div class="hub-card-head">
-			<span class="hub-card-title">@Model.Title</span>
-			@if (!string.IsNullOrWhiteSpace(Model.Badge))
+@{
+	var d = Model.Data;
+	var classes = "hub-card";
+	if (!string.IsNullOrWhiteSpace(d.Variant))
+		classes += " hub-card-sol hub-card-sol-" + d.Variant;
+}
+
+<li class="@classes">
+	<div class="hub-card-head">
+		@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
+		{
+			<span class="hub-card-icon">@(new HtmlString(Model.IconSvg))</span>
+		}
+		<h3 class="hub-card-title">
+			@if (!string.IsNullOrWhiteSpace(d.Link))
 			{
-				<span class="hub-card-badge">@Model.Badge</span>
+				<a href="@d.Link">@d.Title</a>
 			}
+			else
+			{
+				@d.Title
+			}
+		</h3>
+	</div>
+
+	@if (!string.IsNullOrWhiteSpace(d.Description))
+	{
+		<p class="hub-card-desc">@d.Description</p>
+	}
+
+	@if (d.Links.Length > 0)
+	{
+		<ul class="hub-card-links">
+			@foreach (var link in d.Links)
+			{
+				if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+					continue;
+				<li><a href="@link.Url">@link.Label</a></li>
+			}
+		</ul>
+	}
+
+	@if (d.Aside is { } aside && aside.Links.Length > 0)
+	{
+		<div class="hub-card-aside">
+			@if (!string.IsNullOrWhiteSpace(aside.Label))
+			{
+				<div class="hub-card-aside-label">@aside.Label</div>
+			}
+			<div class="hub-card-aside-links">
+				@for (var i = 0; i < aside.Links.Length; i++)
+				{
+					var link = aside.Links[i];
+					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+						continue;
+					<a href="@link.Url">@link.Label</a>
+					@if (i < aside.Links.Length - 1)
+					{
+						<span class="hub-card-aside-sep" aria-hidden="true">·</span>
+					}
+				}
+			</div>
 		</div>
-		<div class="hub-card-body">
-			@Model.RenderBlock()
-		</div>
-	</a>
+	}
 </li>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
index 7d91af642c..ff75e4821f 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
@@ -6,7 +6,6 @@ namespace Elastic.Markdown.Myst.Directives.Hub;
 
 public class LinkCardViewModel : DirectiveViewModel
 {
-	public required string Title { get; init; }
-	public required string? Link { get; init; }
-	public required string? Badge { get; init; }
+	public required LinkCardData Data { get; init; }
+	public required string? IconSvg { get; init; }
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs
new file mode 100644
index 0000000000..adb9fc9e04
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs
@@ -0,0 +1,54 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Markdig.Syntax;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Inline table-of-contents chip listing every {card-group} and {whats-new}
+/// section on the page that has a non-empty id and title. Auto-generated; no
+/// options or body required.
+/// </summary>
+/// <example>
+/// <code>
+/// :::{on-this-page}
+/// :::
+/// </code>
+/// </example>
+public class OnThisPageBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "on-this-page";
+
+	public override void FinalizeAndValidate(ParserContext context) { }
+
+	/// <summary>
+	/// Resolved at render time, since later sibling card-groups may not be
+	/// validated yet at parse time.
+	/// </summary>
+	public IReadOnlyList<OnThisPageItem> CollectItems()
+	{
+		var current = (ContainerBlock)this;
+		while (current.Parent is not null)
+			current = current.Parent;
+
+		var items = new List<OnThisPageItem>();
+		foreach (var descendant in current.Descendants())
+		{
+			switch (descendant)
+			{
+				case CardGroupBlock g when !string.IsNullOrWhiteSpace(g.Anchor) && !string.IsNullOrWhiteSpace(g.Title):
+					items.Add(new OnThisPageItem(g.Title!, g.Anchor!));
+					break;
+				case WhatsNewBlock w when !string.IsNullOrWhiteSpace(w.Data.Id) && !string.IsNullOrWhiteSpace(w.Data.Title):
+					items.Add(new OnThisPageItem(w.Data.Title!, w.Data.Id!));
+					break;
+			}
+		}
+		return items;
+	}
+}
+
+public readonly record struct OnThisPageItem(string Title, string Anchor);
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageView.cshtml
new file mode 100644
index 0000000000..69b9231df0
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageView.cshtml
@@ -0,0 +1,17 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.OnThisPageViewModel>
+
+@if (Model.Items.Count > 0)
+{
+	<nav class="hub-on-this-page" aria-label="On this page">
+		<span class="hub-on-this-page-label">On this page</span>
+		@for (var i = 0; i < Model.Items.Count; i++)
+		{
+			var item = Model.Items[i];
+			<a href="@($"#{item.Anchor}")">@item.Title</a>
+			@if (i < Model.Items.Count - 1)
+			{
+				<span class="hub-on-this-page-sep" aria-hidden="true">·</span>
+			}
+		}
+	</nav>
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageViewModel.cs
new file mode 100644
index 0000000000..e4f190c7a9
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageViewModel.cs
@@ -0,0 +1,10 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class OnThisPageViewModel : DirectiveViewModel
+{
+	public required IReadOnlyList<OnThisPageItem> Items { get; init; }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/ProductIcons.cs b/src/Elastic.Markdown/Myst/Directives/Hub/ProductIcons.cs
new file mode 100644
index 0000000000..3cd39b84ec
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/ProductIcons.cs
@@ -0,0 +1,68 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using System.Collections.Frozen;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Looks up an inline SVG by product key. Used by the {hero} directive (hero-icon
+/// chip) and {link-card} (solution-card icon). Keys are kept lowercase and match
+/// the product ids in <c>products.yml</c> wherever possible.
+/// </summary>
+public static class ProductIcons
+{
+	private static readonly FrozenDictionary<string, string> Icons = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
+	{
+		["elasticsearch"] = """
+			<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7246 14.7075L55.7276 14.7015C50.7746 8.77351 43.3286 4.99951 34.9996 4.99951C24.4006 4.99951 15.2326 11.1115 10.8136 19.9995H46.0056C48.5306 19.9995 50.9886 19.1295 52.9206 17.5035C53.9246 16.6585 54.8636 15.7385 55.7246 14.7075Z" fill="#FEC514"/>
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M8 32C8 34.422 8.324 36.767 8.922 39H42C45.866 39 49 35.866 49 32C49 28.134 45.866 25 42 25H8.922C8.324 27.233 8 29.578 8 32Z" fill="rgba(255,255,255,0.85)"/>
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7246 49.2925L55.7276 49.2985C50.7746 55.2265 43.3286 59.0005 34.9996 59.0005C24.4006 59.0005 15.2326 52.8885 10.8136 44.0005H46.0056C48.5306 44.0005 50.9886 44.8705 52.9206 46.4965C53.9246 47.3415 54.8636 48.2615 55.7246 49.2925Z" fill="#00BFB3"/>
+			</svg>
+			""",
+		["kibana"] = """
+			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+				<g fill="none" fill-rule="evenodd" transform="translate(4)">
+					<polygon fill="#F04E98" points="0 0 0 28.789 24.935 .017"/>
+					<path fill="rgba(255,255,255,0.25)" d="M0,12 L0,28.789 L11.906,15.051 C8.368,13.115 4.317,12 0,12"/>
+					<path fill="#00BFB3" d="M14.4785,16.664 L2.2675,30.754 L1.1945,31.991 L24.3865,31.991 C23.1345,25.699 19.5035,20.272 14.4785,16.664"/>
+				</g>
+			</svg>
+			""",
+		["observability"] = """
+			<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M22 59H17.0906C10.966 59 6 54.0201 6 47.8785V32H22V59Z" fill="#F04E98"/>
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M22 59H38V19H22V59Z" fill="rgba(255,255,255,0.85)"/>
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M59 59H43V6L46.5081 6.04052C53.4282 6.11868 59 12.18 59 19.6277V42.9611V59Z" fill="#0077CC"/>
+			</svg>
+			""",
+		["security"] = """
+			<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M20 17V4H56V34C56 41.0112 43.7467 45.6044 39 47V17H20Z" fill="#FA744E"/>
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M9 39.3984V22H34V60C34 60 9 49.5847 9 39.3984Z" fill="#00BFB3"/>
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M19 22H34V47C28.406 44.9626 19 40.292 19 34.4224V22Z" fill="rgba(255,255,255,0.85)"/>
+			</svg>
+			"""
+	}.ToFrozenDictionary(StringComparer.OrdinalIgnoreCase);
+
+	/// <summary>
+	/// Returns the inline SVG markup for <paramref name="key"/>, or null when no icon
+	/// is registered for that product.
+	/// </summary>
+	public static string? Get(string? key)
+	{
+		if (string.IsNullOrWhiteSpace(key))
+			return null;
+		return Icons.TryGetValue(key, out var svg) ? svg : null;
+	}
+
+	/// <summary>
+	/// Initials fallback: the first character of the key, uppercased. Returns a
+	/// single-letter string, suitable for the standard hero-icon chip when no
+	/// SVG is registered.
+	/// </summary>
+	public static string Initials(string? key) =>
+		string.IsNullOrWhiteSpace(key) ? "?" : char.ToUpperInvariant(key[0]).ToString();
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
new file mode 100644
index 0000000000..f009c3f0b8
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
@@ -0,0 +1,99 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Elastic.Markdown.Diagnostics;
+using YamlDotNet.Core;
+using YamlDotNet.Serialization;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Renders the "What's new" panel: a header with a New badge, a section title,
+/// optional release-notes links, and a list of items with title / description /
+/// per-item meta pill (e.g. "9.4 preview", "Mar 2026").
+/// </summary>
+/// <example>
+/// <code>
+/// :::{whats-new}
+/// title: What's new in Kibana
+/// id: whats-new
+/// release-links:
+///   - label: 9.4
+///     url: /release-notes/kibana
+///   - label: Serverless
+///     url: /release-notes/serverless
+/// items:
+///   - title: Dashboards APIs
+///     description: Programmatically create dashboards
+///     link: /api/dashboards
+///     meta: 9.4 preview
+/// :::
+/// </code>
+/// </example>
+public class WhatsNewBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "whats-new";
+
+	public WhatsNewData Data { get; private set; } = WhatsNewData.Empty;
+
+	public override void FinalizeAndValidate(ParserContext context)
+	{
+		var yaml = HubYamlBody.Extract(this, new BuildContextFileReader(Build.ReadFileSystem));
+		if (yaml is null)
+		{
+			this.EmitError("{whats-new} requires a YAML body. See the whats-new directive docs.");
+			return;
+		}
+
+		try
+		{
+			Data = YamlSerialization.Deserialize<WhatsNewData>(yaml, Build.ProductsConfiguration) ?? WhatsNewData.Empty;
+		}
+		catch (YamlException ex)
+		{
+			this.EmitError($"{{whats-new}} YAML parse error: {ex.Message}");
+		}
+	}
+
+	public override IEnumerable<string> GeneratedAnchors =>
+		string.IsNullOrWhiteSpace(Data.Id) ? [] : [Data.Id!];
+}
+
+[YamlSerializable]
+public record WhatsNewData
+{
+	[YamlMember(Alias = "title")]
+	public string? Title { get; set; }
+
+	[YamlMember(Alias = "id")]
+	public string? Id { get; set; }
+
+	[YamlMember(Alias = "badge")]
+	public string? Badge { get; set; } = "New";
+
+	[YamlMember(Alias = "release-links")]
+	public LinkCardLink[] ReleaseLinks { get; set; } = [];
+
+	[YamlMember(Alias = "items")]
+	public WhatsNewItem[] Items { get; set; } = [];
+
+	public static WhatsNewData Empty { get; } = new();
+}
+
+[YamlSerializable]
+public record WhatsNewItem
+{
+	[YamlMember(Alias = "title")]
+	public string? Title { get; set; }
+
+	[YamlMember(Alias = "description")]
+	public string? Description { get; set; }
+
+	[YamlMember(Alias = "link")]
+	public string? Link { get; set; }
+
+	[YamlMember(Alias = "meta")]
+	public string? Meta { get; set; }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
new file mode 100644
index 0000000000..ea449797ec
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
@@ -0,0 +1,75 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.WhatsNewViewModel>
+
+@{
+	var d = Model.Data;
+}
+
+<section class="hub-whats-new" id="@d.Id">
+	<header class="hub-wn-header">
+		@if (!string.IsNullOrWhiteSpace(d.Badge))
+		{
+			<span class="hub-wn-badge">@d.Badge</span>
+		}
+		@if (!string.IsNullOrWhiteSpace(d.Title))
+		{
+			<span class="hub-wn-title">@d.Title</span>
+		}
+		@if (d.ReleaseLinks.Length > 0)
+		{
+			<span class="hub-wn-rn-links">
+				<span class="hub-wn-rn-label">Release notes:</span>
+				@for (var i = 0; i < d.ReleaseLinks.Length; i++)
+				{
+					var link = d.ReleaseLinks[i];
+					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+						continue;
+					<a href="@link.Url">@link.Label</a>
+					@if (i < d.ReleaseLinks.Length - 1)
+					{
+						<span class="hub-wn-rn-sep" aria-hidden="true">·</span>
+					}
+				}
+			</span>
+		}
+	</header>
+	@if (d.Items.Length > 0)
+	{
+		<ul class="hub-wn-items">
+			@foreach (var item in d.Items)
+			{
+				if (string.IsNullOrWhiteSpace(item.Title))
+					continue;
+				<li class="hub-wn-item">
+					@if (!string.IsNullOrWhiteSpace(item.Link))
+					{
+						<a href="@item.Link" class="hub-wn-item-link">
+							<strong class="hub-wn-item-title">@item.Title</strong>
+							@if (!string.IsNullOrWhiteSpace(item.Description))
+							{
+								<span class="hub-wn-item-desc">@item.Description</span>
+							}
+							@if (!string.IsNullOrWhiteSpace(item.Meta))
+							{
+								<span class="hub-wn-item-meta">@item.Meta</span>
+							}
+						</a>
+					}
+					else
+					{
+						<div class="hub-wn-item-link">
+							<strong class="hub-wn-item-title">@item.Title</strong>
+							@if (!string.IsNullOrWhiteSpace(item.Description))
+							{
+								<span class="hub-wn-item-desc">@item.Description</span>
+							}
+							@if (!string.IsNullOrWhiteSpace(item.Meta))
+							{
+								<span class="hub-wn-item-meta">@item.Meta</span>
+							}
+						</div>
+					}
+				</li>
+			}
+		</ul>
+	}
+</section>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs
new file mode 100644
index 0000000000..678e31f650
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs
@@ -0,0 +1,10 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class WhatsNewViewModel : DirectiveViewModel
+{
+	public required WhatsNewData Data { get; init; }
+}
diff --git a/src/Elastic.Markdown/Myst/YamlSerialization.cs b/src/Elastic.Markdown/Myst/YamlSerialization.cs
index 4f8502e75f..9b9309e1cc 100644
--- a/src/Elastic.Markdown/Myst/YamlSerialization.cs
+++ b/src/Elastic.Markdown/Myst/YamlSerialization.cs
@@ -42,4 +42,9 @@ public static T Deserialize<T>(string yaml, ProductsConfiguration products)
 [YamlSerializable(typeof(ContributorEntry))]
 [YamlSerializable(typeof(ChangelogDirectiveConfigYaml))]
 [YamlSerializable(typeof(ChangelogDirectiveBundleConfigYaml))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardData))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardLink))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardAside))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewData))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewItem))]
 public partial class DocsBuilderYamlStaticContext;

From 705bd159abda5185566d61de115fe8adf5e6863b Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:25:12 +0200
Subject: [PATCH 10/56] feat(hubs): restore full section coverage matching the
 gist prototypes

Adds the sections that were dropped during the directive rewrite so the
hub markdown matches the gist HTML one-to-one:

- Elasticsearch: Index and ingest data, Aggregations, Data modeling,
  Manage data, AI and vector search, Security, Clients and integrations,
  Reference (8 sections previously missing).
- Kibana: Track and respond, AI and automation, Management and developer
  tools, Reference (4 sections previously missing).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/hubs/elasticsearch/9.0.md | 631 +++++++++++++++++++++++++++++----
 docs/hubs/kibana/9.0.md        | 217 ++++++++++++
 2 files changed, 785 insertions(+), 63 deletions(-)

diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
index 005007f1a0..6ef52436c4 100644
--- a/docs/hubs/elasticsearch/9.0.md
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -4,9 +4,9 @@ layout: hub
 
 :::{hero}
 :icon: elasticsearch
-:version: v9 / Serverless (current)
-:quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
-:releases: Latest&#58; [Stack 9.4.1](/release-notes/elasticsearch) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
+:version: v9 (current)
+:quick-links: Install=https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch,Quick start=https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples,API reference=https://www.elastic.co/docs/api/doc/elasticsearch,Release notes=https://www.elastic.co/docs/release-notes/elasticsearch
+:releases: Latest&#58; [Stack 9.0.0](https://www.elastic.co/docs/release-notes/elasticsearch) (Apr 2025)
 
 # Elasticsearch
 
@@ -17,26 +17,32 @@ The distributed search and analytics engine. Store, search, and analyze data at
 :::
 
 :::{intro}
-**New to Elasticsearch?** [Start with Elastic Fundamentals](https://www.elastic.co/docs/get-started) — a hands-on walk-through of indexing, querying, and search relevance.
+**New to Elasticsearch?** [Follow the quick start](https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples) to run your first queries, or explore [how to bring your data in](https://www.elastic.co/docs/manage-data/ingest) and start searching in minutes.
 :::
 
 :::{whats-new}
 title: What's new in Elasticsearch
 id: whats-new
 release-links:
-  - label: 9.4
-    url: /release-notes/elasticsearch
-  - label: Serverless
-    url: /release-notes/serverless
+  - label: 9.0
+    url: https://www.elastic.co/docs/release-notes/elasticsearch
 items:
-  - title: ES|QL JOIN syntax
-    description: Run cross-index joins in ES|QL queries with full GA stability and performance
-    link: /reference/esql/joins
-    meta: 9.0 GA
-  - title: BBQ vector quantization
-    description: 30% smaller indices and faster search with the new Better Binary Quantization encoding
-    link: /reference/vector-quantization
+  - title: semantic_text field type
+    description: Simplify semantic search — no pipeline setup needed, just define the field and start querying
+    link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
     meta: 9.0 GA
+  - title: ES|QL improvements
+    description: New functions, cross-cluster support, and dense vector operations directly in ES|QL queries
+    link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
+    meta: '9.0'
+  - title: Inference API expansion
+    description: Connect to external AI models (OpenAI, Cohere, Anthropic, Hugging Face, Azure, Google) for embeddings and reranking
+    link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    meta: '9.0'
+  - title: Breaking changes in 9.0
+    description: Review removed settings, deprecated APIs, and behavioral changes before upgrading from 8.x
+    link: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
+    meta: Upgrade guide
 :::
 
 ::::{card-group}
@@ -45,83 +51,582 @@ items:
 
 :::{link-card}
 title: Self-managed
-link: /deploy-manage/deploy/self-managed
-description: Run Elasticsearch on your own infrastructure for full control over hardware and configuration.
+link: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch
+description: Install and run Elasticsearch on your own infrastructure.
 links:
-  - label: Install on Linux / macOS
-    url: /deploy-manage/deploy/self-managed/install-elasticsearch
-  - label: Install with Docker
-    url: /deploy-manage/deploy/self-managed/install-elasticsearch-with-docker
-  - label: Configure (elasticsearch.yml)
-    url: /deploy-manage/deploy/self-managed/configure-elasticsearch
+  - label: Docker
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-docker
+  - label: Debian / Ubuntu
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-debian-package
+  - label: RPM
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-rpm
+  - label: Windows
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-zip-on-windows
+  - label: Linux / macOS archive
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-from-archive-on-linux-macos
+  - label: Configure Elasticsearch
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/configure-elasticsearch
+  - label: Secure a self-managed cluster
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/tutorial-self-managed-secure
 :::
 
 :::{link-card}
-title: Elastic Cloud Hosted
-link: /deploy-manage/deploy/elastic-cloud
-description: Managed deployments on AWS, GCP, or Azure with one-click upgrades and zero downtime.
+title: Managed deployments
+link: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud
+description: Run Elasticsearch on Elastic Cloud, Kubernetes, or ECE.
 links:
-  - label: Sign up
-    url: /deploy-manage/deploy/elastic-cloud/sign-up
-  - label: Manage deployments
-    url: /deploy-manage/deploy/elastic-cloud/manage-deployments
+  - label: Elastic Cloud Hosted
+    url: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud
+  - label: Elastic Cloud on Kubernetes (ECK)
+    url: https://www.elastic.co/docs/deploy-manage/deploy/cloud-on-k8s
+  - label: Elastic Cloud Enterprise (ECE)
+    url: https://www.elastic.co/docs/deploy-manage/deploy/cloud-enterprise
 :::
 
 :::{link-card}
-title: Elastic Cloud Serverless
-link: /deploy-manage/deploy/elastic-cloud-serverless
-description: Pay-per-use Elasticsearch with no clusters to manage and elastic auto-scaling.
+title: Maintain and monitor
+link: https://www.elastic.co/docs/deploy-manage/maintenance/start-stop-services/start-stop-elasticsearch
+description: Production guidance, upgrades, cluster health, and diagnostics.
 links:
-  - label: Get started
-    url: /deploy-manage/deploy/elastic-cloud-serverless/get-started
+  - label: Start and stop Elasticsearch
+    url: https://www.elastic.co/docs/deploy-manage/maintenance/start-stop-services/start-stop-elasticsearch
+  - label: Stack monitoring
+    url: https://www.elastic.co/docs/deploy-manage/monitor/stack-monitoring/elasticsearch-monitoring-self-managed
+  - label: Capture diagnostics
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/diagnostic
+  - label: Troubleshoot
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch
+  - label: Snapshot and restore
+    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
 :::
 ::::
 
 ::::{card-group}
-:title: Search and query
-:id: search
+:title: Index and ingest data
+:id: ingest
 
 :::{link-card}
-title: ES|QL
-link: /reference/esql
-description: Pipe-friendly query language for searching, filtering, and aggregating data.
+title: Ingest pipelines
+link: https://www.elastic.co/docs/manage-data/ingest/transform-enrich/ingest-pipelines
+description: Pre-process documents before indexing with processors that parse, transform, and enrich your data.
+links:
+  - label: Overview and setup
+    url: https://www.elastic.co/docs/manage-data/ingest/transform-enrich/ingest-pipelines
+  - label: Simulate ingestion (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-simulate-ingest
+  - label: All ingest methods
+    url: https://www.elastic.co/docs/manage-data/ingest
+:::
+
+:::{link-card}
+title: Data streams
+link: https://www.elastic.co/docs/manage-data/data-store/data-streams
+description: Manage time-series data with a single resource that spans multiple backing indices.
+links:
+  - label: Data streams overview
+    url: https://www.elastic.co/docs/manage-data/data-store/data-streams
+  - label: Manage data streams
+    url: https://www.elastic.co/docs/manage-data/data-store/data-streams/manage-data-stream
+  - label: Logs data stream (logsdb)
+    url: https://www.elastic.co/docs/manage-data/data-store/data-streams/logs-data-stream
+:::
+
+:::{link-card}
+title: Document APIs
+link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-index
+description: Index, update, delete, and retrieve documents with the core document APIs.
 links:
-  - label: Get started
-    url: /reference/esql/get-started
-  - label: Functions reference
-    url: /reference/esql/functions
+  - label: Index a document
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-index
+  - label: Bulk API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-bulk
+  - label: Reindex API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-reindex
+  - label: Reindex examples
+    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/reindex-indices
+  - label: Migrate data between clusters
+    url: https://www.elastic.co/docs/manage-data/migrate/migrate-data-between-elasticsearch-clusters-with-minimal-downtime
 :::
+::::
+
+::::{card-group}
+:title: Search and query
+:id: search
 
 :::{link-card}
 title: Query DSL
-link: /reference/query-dsl
-description: JSON-based query language for full-text, structured, geo, and vector search.
+link: https://www.elastic.co/docs/reference/query-languages/query-dsl/full-text-queries
+description: Write expressive queries using the JSON-based Domain Specific Language — from simple term filters to compound boolean queries.
 links:
-  - label: Match query
-    url: /reference/query-dsl/query-dsl-match-query
-  - label: Bool query
-    url: /reference/query-dsl/query-dsl-bool-query
+  - label: Full-text search
+    url: https://www.elastic.co/docs/solutions/search/full-text
+  - label: Full-text queries
+    url: https://www.elastic.co/docs/reference/query-languages/query-dsl/full-text-queries
+  - label: Search API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-search
+  - label: Cross-cluster search
+    url: https://www.elastic.co/docs/explore-analyze/cross-cluster-search
 aside:
   label: Query types
   links:
-    - label: Term
-      url: /reference/query-dsl/term-level-queries
-    - label: Full text
-      url: /reference/query-dsl/full-text-queries
+    - label: Full-text
+      url: https://www.elastic.co/docs/reference/query-languages/query-dsl/full-text-queries
+    - label: Term-level
+      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
     - label: Geo
-      url: /reference/query-dsl/geo-queries
-    - label: Vector
-      url: /reference/query-dsl/vector-queries
+      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
+    - label: Shape
+      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
+    - label: Joining
+      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
+    - label: Span
+      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
+:::
+
+:::{link-card}
+title: ES|QL
+link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
+description: A pipe-based query language purpose-built for filtering, transforming, and analyzing data — usable from the API, Kibana Discover, or directly in search.
+links:
+  - label: Get started with ES|QL
+    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
+  - label: Syntax reference
+    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-syntax-reference
+  - label: Commands
+    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-commands
+  - label: ES|QL for search
+    url: https://www.elastic.co/docs/solutions/search/esql-for-search
+  - label: Cross-cluster ES|QL
+    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-cross-clusters
+:::
+
+:::{link-card}
+title: Other query languages
+link: https://www.elastic.co/docs/reference/query-languages
+description: Use EQL for event sequences, SQL for familiar syntax, or Painless for custom scoring and scripted queries.
+links:
+  - label: EQL (Event Query Language)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-eql-search
+  - label: SQL
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-sql-query
+  - label: Translate SQL to Query DSL
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-sql-translate
+  - label: Painless scripting
+    url: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
+:::
+::::
+
+::::{card-group}
+:title: Aggregations
+:id: aggs
+
+:::{link-card}
+title: Aggregations overview
+link: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations
+description: Summarize and compute statistics over your data — counts, averages, histograms, date ranges, and more.
+links:
+  - label: Introduction
+    url: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations
+  - label: 'Tutorial: eCommerce data analysis'
+    url: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations/tutorial-analyze-ecommerce-data-with-aggregations-using-query-dsl
+aside:
+  label: Aggregation families
+  links:
+    - label: Metric
+      url: https://www.elastic.co/docs/reference/aggregations
+    - label: Bucket
+      url: https://www.elastic.co/docs/reference/aggregations
+    - label: Pipeline
+      url: https://www.elastic.co/docs/reference/aggregations
+    - label: Matrix
+      url: https://www.elastic.co/docs/reference/aggregations
 :::
 
 :::{link-card}
-title: Vector search
-link: /solutions/search/vector
-description: Dense and sparse vector retrieval for AI applications and semantic search.
+title: Metric aggregations
+link: https://www.elastic.co/docs/reference/aggregations
+description: Compute single numeric values from field data — min, max, avg, sum, percentiles, stats, and more.
+links:
+  - label: Top hits
+    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-metrics-top-hits-aggregation
+  - label: Top metrics
+    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-metrics-top-metrics
+  - label: Cardinality, percentiles, stats
+    url: https://www.elastic.co/docs/reference/aggregations
+:::
+
+:::{link-card}
+title: Bucket and pipeline aggregations
+link: https://www.elastic.co/docs/reference/aggregations
+description: Group documents into buckets, then chain pipeline aggregations to compute on those buckets.
+links:
+  - label: Filters aggregation
+    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-bucket-filters-aggregation
+  - label: Multi-terms aggregation
+    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-bucket-multi-terms-aggregation
+  - label: Avg bucket (pipeline)
+    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-pipeline-avg-bucket-aggregation
+  - label: Bucket script (pipeline)
+    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-pipeline-bucket-script-aggregation
+:::
+::::
+
+::::{card-group}
+:title: Data modeling
+:id: modeling
+
+:::{link-card}
+title: Mapping
+link: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference
+description: Define how documents and their fields are stored, indexed, and analyzed.
+links:
+  - label: Field data types
+    url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+  - label: Dynamic field mapping
+    url: https://www.elastic.co/docs/manage-data/data-store/mapping/dynamic-field-mapping
+  - label: Runtime fields
+    url: https://www.elastic.co/docs/manage-data/data-store/mapping/define-runtime-fields-in-search-request
+  - label: Update mappings (examples)
+    url: https://www.elastic.co/docs/manage-data/data-store/mapping/update-mappings-examples
+  - label: Put mapping API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-indices-put-mapping
+aside:
+  label: Common field types
+  links:
+    - label: keyword
+      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+    - label: text
+      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+    - label: date
+      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+    - label: dense_vector
+      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+    - label: semantic_text
+      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+    - label: geo_point
+      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
+:::
+
+:::{link-card}
+title: Text analysis
+link: https://www.elastic.co/docs/manage-data/data-store/text-analysis/configure-text-analysis
+description: Control how text is tokenized and indexed to optimize relevance and search recall.
+links:
+  - label: Configure text analysis
+    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/configure-text-analysis
+  - label: Create a custom analyzer
+    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/create-custom-analyzer
+  - label: Specify an analyzer
+    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/specify-an-analyzer
+  - label: Analyze API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-indices-analyze
+  - label: Analyzers, tokenizers, and filters reference
+    url: https://www.elastic.co/docs/reference/text-analysis
+:::
+
+:::{link-card}
+title: Configuration reference
+link: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference
+description: All Elasticsearch node settings — network, thread pools, index defaults, security, and more.
+links:
+  - label: Node settings
+    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference/node-settings
+  - label: Security settings
+    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference/security-settings
+  - label: All settings reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference
+:::
+::::
+
+::::{card-group}
+:title: Manage data
+:id: manage
+
+:::{link-card}
+title: Index lifecycle management (ILM)
+link: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management
+description: Automate index policies to move data through hot, warm, cold, and frozen tiers — and eventually delete it.
+links:
+  - label: Create an ILM policy
+    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/configure-lifecycle-policy
+  - label: Tutorials
+    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/ilm-tutorials
+  - label: Check ILM status
+    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/policy-view-status
+  - label: Start and stop ILM
+    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/start-stop-index-lifecycle-management
+  - label: Explain lifecycle (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-ilm-explain-lifecycle
+:::
+
+:::{link-card}
+title: Data stream lifecycle
+link: https://www.elastic.co/docs/manage-data/lifecycle/data-stream
+description: Set built-in retention and rollover directly on data streams, without a separate ILM policy.
+links:
+  - label: Data stream lifecycle overview
+    url: https://www.elastic.co/docs/manage-data/lifecycle/data-stream
+  - label: Update an existing data stream
+    url: https://www.elastic.co/docs/manage-data/lifecycle/data-stream/tutorial-update-existing-data-stream
+  - label: Manage data tiers
+    url: https://www.elastic.co/docs/manage-data/lifecycle/data-tiers/manage-data-tiers-self-managed-eck
+:::
+
+:::{link-card}
+title: Snapshot and restore
+link: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
+description: Back up indices and data streams to a remote repository and restore them when needed.
+links:
+  - label: Overview
+    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
+  - label: Restore a snapshot
+    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore/restore-snapshot
+  - label: Create a snapshot repository (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-snapshot-create-repository
+  - label: Create a snapshot (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-snapshot-create
+  - label: Troubleshoot snapshots
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/snapshot-and-restore
+:::
+::::
+
+::::{card-group}
+:title: AI and vector search
+:id: ai
+
+:::{link-card}
+title: Semantic search
+link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
+description: Search by meaning rather than exact keywords using dense or sparse vector embeddings.
+links:
+  - label: Semantic search with semantic_text
+    url: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
+  - label: Semantic search with ELSER
+    url: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-elser-ingest-pipelines
+  - label: Get started with semantic search
+    url: https://www.elastic.co/docs/solutions/search/get-started/semantic-search
+  - label: Dense vs. sparse ingest pipelines
+    url: https://www.elastic.co/docs/solutions/search/vector/dense-versus-sparse-ingest-pipelines
+:::
+
+:::{link-card}
+title: Vector search (kNN)
+link: https://www.elastic.co/docs/solutions/search/vector/knn
+description: Find the nearest neighbors to a query vector for similarity-based retrieval and hybrid search.
 links:
   - label: kNN search
-    url: /reference/search-types/knn-search
-  - label: ELSER
-    url: /reference/elasticsearch-clients/elser
+    url: https://www.elastic.co/docs/solutions/search/vector/knn
+  - label: Sparse vector search
+    url: https://www.elastic.co/docs/solutions/search/vector/sparse-vector
+  - label: Bring your own vectors
+    url: https://www.elastic.co/docs/solutions/search/vector/bring-own-vectors
+  - label: kNN retriever
+    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/retrievers/knn-retriever
+  - label: kNN in ES|QL
+    url: https://www.elastic.co/docs/reference/query-languages/esql/functions-operators/dense-vector-functions/knn
+:::
+
+:::{link-card}
+title: Inference API
+link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+description: Connect Elasticsearch to external AI model providers for embeddings, reranking, and completions.
+links:
+  - label: Create an inference endpoint
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+  - label: ELSER inference endpoint
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put-elser
+aside:
+  label: Supported providers
+  links:
+    - label: OpenAI
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    - label: Cohere
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    - label: Anthropic
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    - label: Azure
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    - label: Google
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    - label: Hugging Face
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+    - label: Mistral
+      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+:::
+::::
+
+::::{card-group}
+:title: Security
+:id: security
+
+:::{link-card}
+title: Encryption and TLS
+link: https://www.elastic.co/docs/deploy-manage/security/secure-cluster-communications
+description: Encrypt communications between nodes and between clients and the cluster.
+links:
+  - label: Set up basic security (TLS)
+    url: https://www.elastic.co/docs/deploy-manage/security/set-up-basic-security
+  - label: Secure cluster communications
+    url: https://www.elastic.co/docs/deploy-manage/security/secure-cluster-communications
+  - label: Secure HTTP clients
+    url: https://www.elastic.co/docs/deploy-manage/security/httprest-clients-security
+  - label: Security settings reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference/security-settings
+:::
+
+:::{link-card}
+title: Authentication
+link: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/ldap
+description: Verify user identity with native realms, LDAP, Active Directory, SAML, OIDC, PKI, and more.
+links:
+  - label: LDAP authentication
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/ldap
+  - label: SAML authentication (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-security-saml-authenticate
+  - label: All authentication methods
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth
+:::
+
+:::{link-card}
+title: Authorization and RBAC
+link: https://www.elastic.co/docs/deploy-manage/users-roles
+description: Control what users and applications can access using roles, privileges, and field- and document-level security.
+links:
+  - label: Users and roles overview
+    url: https://www.elastic.co/docs/deploy-manage/users-roles
+  - label: Create or update a role (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-security-put-role
+  - label: Create or update a user (API)
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-security-put-user
+:::
+::::
+
+::::{card-group}
+:title: Clients and integrations
+:id: clients
+
+:::{link-card}
+title: Language clients
+link: https://www.elastic.co/docs/reference/elasticsearch/clients
+description: Official Elasticsearch clients for your preferred programming language.
+links:
+  - label: Python
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/python
+  - label: Java
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/java/getting-started
+  - label: Go
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/go/using-the-api/dense-vectors
+  - label: Rust
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/rust
+  - label: PHP
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/php
+  - label: Ruby
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/ruby/api
+  - label: Community clients
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/community
+:::
+
+:::{link-card}
+title: Python DSL and helpers
+link: https://www.elastic.co/docs/reference/elasticsearch/clients/python/elasticsearch-dsl
+description: High-level Python libraries that simplify building queries, mappings, and bulk operations.
+links:
+  - label: Elasticsearch DSL (Python)
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/python/elasticsearch-dsl
+  - label: Java bulk indexing
+    url: https://www.elastic.co/docs/reference/elasticsearch/clients/java/usage/indexing-bulk
+  - label: Troubleshoot clients
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clients
+:::
+
+:::{link-card}
+title: Ingest tools
+link: https://www.elastic.co/docs/manage-data/ingest
+description: Get data into Elasticsearch using Fleet, Logstash, Beats, or search connectors.
+links:
+  - label: Fleet and Elastic Agent
+    url: https://www.elastic.co/docs/reference/fleet
+  - label: Content connectors
+    url: https://www.elastic.co/docs/reference/search-connectors
+  - label: All ingest options
+    url: https://www.elastic.co/docs/manage-data/ingest
+:::
+::::
+
+::::{card-group}
+:title: Reference
+:id: ref
+
+:::{link-card}
+title: REST APIs
+link: https://www.elastic.co/docs/reference/elasticsearch/rest-apis
+description: Conventions, common options, compatibility guarantees, and the full interactive API specification.
+links:
+  - label: API conventions
+    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-conventions
+  - label: Common options
+    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/common-options
+  - label: API compatibility
+    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/compatibility
+  - label: Examples and quick start
+    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples
+  - label: Full API reference
+    url: https://www.elastic.co/docs/api/doc/elasticsearch
+:::
+
+:::{link-card}
+title: Painless scripting
+link: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
+description: Write custom scripts in Painless for queries, aggregations, ingest processors, and runtime fields.
+links:
+  - label: Introduction to Painless
+    url: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
+  - label: Language specification
+    url: https://www.elastic.co/docs/reference/scripting-languages/painless/painless-language-specification
+  - label: Use Painless in runtime fields
+    url: https://www.elastic.co/docs/reference/scripting-languages/painless/use-painless-scripts-in-runtime-fields
+  - label: Scripts reference
+    url: https://www.elastic.co/docs/reference/scripting-languages/painless/painless-scripts
+:::
+
+:::{link-card}
+title: Release notes
+link: https://www.elastic.co/docs/release-notes/elasticsearch
+description: What's new, deprecated, and fixed in each Elasticsearch release.
+links:
+  - label: Elasticsearch
+    url: https://www.elastic.co/docs/release-notes/elasticsearch
+  - label: Breaking changes
+    url: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
+  - label: Deprecations
+    url: https://www.elastic.co/docs/release-notes/elasticsearch/deprecations
+aside:
+  label: Client release notes
+  links:
+    - label: Python
+      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/python
+    - label: Java
+      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/java
+    - label: .NET
+      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/dotnet
+    - label: PHP
+      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/php
+    - label: Ruby
+      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/ruby
+:::
+
+:::{link-card}
+title: Troubleshooting
+link: https://www.elastic.co/docs/troubleshoot/elasticsearch
+description: Diagnose and fix common Elasticsearch cluster, performance, and operational issues.
+links:
+  - label: Cluster issues
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clusters
+  - label: Snapshot and restore
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/snapshot-and-restore
+  - label: Clients
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clients
+  - label: Capture diagnostics
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/diagnostic
 :::
 ::::
diff --git a/docs/hubs/kibana/9.0.md b/docs/hubs/kibana/9.0.md
index 11ee62040c..4c703b0eb8 100644
--- a/docs/hubs/kibana/9.0.md
+++ b/docs/hubs/kibana/9.0.md
@@ -192,6 +192,98 @@ aside:
 :::
 ::::
 
+::::{card-group}
+:title: Track and respond
+:id: track
+
+:::{link-card}
+title: Alerting and rules
+link: https://www.elastic.co/docs/explore-analyze/alerting/alerts/alerting-getting-started
+description: Detect important changes and notify people or trigger actions.
+links:
+  - label: Getting started
+    url: https://www.elastic.co/docs/explore-analyze/alerting/alerts/alerting-getting-started
+  - label: Create and manage rules
+    url: https://www.elastic.co/docs/explore-analyze/alerting/alerts/create-manage-rules
+  - label: Performance and scaling
+    url: https://www.elastic.co/docs/deploy-manage/production-guidance/kibana-alerting-production-considerations
+:::
+
+:::{link-card}
+title: Connectors
+link: https://www.elastic.co/docs/reference/kibana/connectors-kibana
+description: Integrate Kibana with external services for AI, notifications, and case management.
+links:
+  - label: GenAI (OpenAI, Bedrock, Gemini...)
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/gen-ai-connectors
+  - label: Alerting & cases (Jira, ServiceNow, PagerDuty...)
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/alerting-cases-connectors
+  - label: Elastic Stack
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana
+  - label: Data & context sources
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana
+:::
+
+:::{link-card}
+title: Reporting and sharing
+link: https://www.elastic.co/docs/deploy-manage/kibana-reporting-configuration
+description: Generate PDF, PNG, and CSV exports. Share dashboards with links or embeds.
+links:
+  - label: Configure reporting
+    url: https://www.elastic.co/docs/deploy-manage/kibana-reporting-configuration
+  - label: Share dashboards
+    url: https://www.elastic.co/docs/explore-analyze/dashboards/sharing
+  - label: Saved objects
+    url: https://www.elastic.co/docs/explore-analyze/find-and-organize/saved-objects
+:::
+::::
+
+::::{card-group}
+:title: AI and automation
+:id: ai
+
+:::{link-card}
+title: Agent Builder
+link: https://www.elastic.co/docs/explore-analyze/ai-features/elastic-agent-builder
+description: Build custom AI agents that reason over your Elasticsearch data using LLMs and tools.
+links:
+  - label: Overview
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/elastic-agent-builder
+  - label: Agents
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/agent-builder/agent-builder-agents
+  - label: Custom tools
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/agent-builder/tools/custom-tools
+  - label: Programmatic access (MCP, A2A, API)
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/agent-builder/programmatic-access
+  - label: 'Tutorial: build a custom agent'
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/agent-builder/agent-builder-api-tutorial
+:::
+
+:::{link-card}
+title: Workflows
+link: https://www.elastic.co/docs/explore-analyze/workflows
+description: Automate tasks with sequences that chain Kibana actions, HTTP calls, and AI agents.
+links:
+  - label: Get started
+    url: https://www.elastic.co/docs/explore-analyze/workflows/get-started
+  - label: Kibana action steps
+    url: https://www.elastic.co/docs/explore-analyze/workflows/steps/kibana
+  - label: Call agents from workflows
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/agent-builder/agents-and-workflows
+:::
+
+:::{link-card}
+title: Machine learning
+link: https://www.elastic.co/docs/explore-analyze/machine-learning/machine-learning-in-kibana
+description: Detect anomalies, forecast trends, and run data frame analytics.
+links:
+  - label: Machine learning in Kibana
+    url: https://www.elastic.co/docs/explore-analyze/machine-learning/machine-learning-in-kibana
+  - label: Anomaly detection job wizards
+    url: https://www.elastic.co/docs/reference/machine-learning/supplied-anomaly-detection-configurations
+:::
+::::
+
 ::::{card-group}
 :title: Solutions
 :id: solutions
@@ -278,3 +370,128 @@ aside:
       url: /solutions/security/investigate/security-cases
 :::
 ::::
+
+::::{card-group}
+:title: Management and developer tools
+:id: manage
+
+:::{link-card}
+title: Data and indices
+description: Manage Elasticsearch indices, data streams, ingest pipelines, and transforms from Kibana.
+links:
+  - label: Index management
+    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/index-management-in-kibana
+  - label: Data streams
+    url: https://www.elastic.co/docs/manage-data/data-store/data-streams/manage-data-stream
+  - label: Transforms
+    url: https://www.elastic.co/docs/explore-analyze/transforms/transform-setup
+  - label: Task management
+    url: https://www.elastic.co/docs/deploy-manage/distributed-architecture/kibana-tasks-management
+:::
+
+:::{link-card}
+title: Integrations and Fleet
+description: Deploy and manage Elastic Agents, integrations, and Osquery.
+links:
+  - label: Fleet
+    url: https://www.elastic.co/docs/reference/fleet
+  - label: Manage agents
+    url: https://www.elastic.co/docs/reference/fleet/manage-elastic-agents-in-fleet
+  - label: Agent policies
+    url: https://www.elastic.co/docs/reference/fleet/agent-policy
+:::
+
+:::{link-card}
+title: Developer tools
+description: Run API requests, profile queries, test grok patterns, and debug Painless scripts.
+links:
+  - label: Console
+    url: https://www.elastic.co/docs/reference/cloud/cloud-hosted/ec-api-console
+  - label: Search Profiler
+    url: https://www.elastic.co/docs/explore-analyze/query-filter/tools/search-profiler
+  - label: Grok Debugger
+    url: https://www.elastic.co/docs/explore-analyze/query-filter/tools/grok-debugger
+:::
+::::
+
+::::{card-group}
+:title: Reference
+:id: ref
+
+:::{link-card}
+title: Configuration and settings
+link: https://www.elastic.co/docs/reference/kibana/configuration-reference
+description: All kibana.yml settings and UI-configurable advanced settings.
+links:
+  - label: General
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference/general-settings
+  - label: Alerting
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference/alerting-settings
+  - label: Security
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference/security-settings
+  - label: Reporting
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference/reporting-settings
+  - label: Monitoring
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference/monitoring-settings
+  - label: Advanced settings (UI)
+    url: https://www.elastic.co/docs/reference/kibana/advanced-settings
+:::
+
+:::{link-card}
+title: APIs and plugins
+link: https://www.elastic.co/docs/api/doc/kibana
+description: REST API, plugins, and CLI commands.
+links:
+  - label: Kibana REST API
+    url: https://www.elastic.co/docs/api/doc/kibana
+  - label: Kibana serverless API
+    url: https://www.elastic.co/docs/api/doc/serverless-kibana
+  - label: Plugins
+    url: https://www.elastic.co/docs/reference/kibana/kibana-plugins
+  - label: kibana-setup command
+    url: https://www.elastic.co/docs/reference/kibana/commands/kibana-setup
+:::
+
+:::{link-card}
+title: Release notes
+link: https://www.elastic.co/docs/release-notes/kibana
+description: What's new, deprecated, and fixed in each Kibana release.
+links:
+  - label: Kibana
+    url: https://www.elastic.co/docs/release-notes/kibana
+  - label: Known issues
+    url: https://www.elastic.co/docs/release-notes/kibana/known-issues
+  - label: Breaking changes
+    url: https://www.elastic.co/docs/release-notes/kibana/breaking-changes
+  - label: Deprecations
+    url: https://www.elastic.co/docs/release-notes/kibana/deprecations
+aside:
+  label: Related release notes
+  links:
+    - label: Elasticsearch
+      url: https://www.elastic.co/docs/release-notes/elasticsearch
+    - label: Security
+      url: https://www.elastic.co/docs/release-notes/security
+    - label: Observability
+      url: https://www.elastic.co/docs/release-notes/observability
+    - label: Serverless
+      url: https://www.elastic.co/docs/release-notes/serverless
+:::
+
+:::{link-card}
+title: Troubleshooting
+link: https://www.elastic.co/docs/troubleshoot/kibana
+description: Diagnose and fix common Kibana issues.
+links:
+  - label: General
+    url: https://www.elastic.co/docs/troubleshoot/kibana
+  - label: Alerts
+    url: https://www.elastic.co/docs/troubleshoot/kibana/alerts
+  - label: Maps
+    url: https://www.elastic.co/docs/troubleshoot/kibana/maps
+  - label: Reporting
+    url: https://www.elastic.co/docs/troubleshoot/kibana/reporting
+  - label: Capture diagnostics
+    url: https://www.elastic.co/docs/troubleshoot/kibana/capturing-diagnostics
+:::
+::::

From 7cc21db461fb9cdc7c7a2d5e0fcdbfafeb1902df Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:27:51 +0200
Subject: [PATCH 11/56] feat(hubs): render fake search box in hero

Replaces the inert navigation-search web component placeholder with a
styled fake search box that matches the gist prototypes (white pill
with magnifying-glass icon, contextual placeholder, disabled input).
The input is disabled until search is wired up, but visually it's now
indistinguishable from the gist.

Placeholder text uses the hero :icon: key (e.g. 'Search Kibana docs...').

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Assets/markdown/hub.css                   | 27 +++++++++++++++++++
 .../Myst/Directives/Hub/HeroView.cshtml       | 10 ++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index bf2f300672..b559711f75 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -82,6 +82,33 @@
 		margin-bottom: 20px;
 		max-width: 480px;
 	}
+	.hub-hero .hub-hero-search-box {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		background: var(--color-white);
+		border-radius: 10px;
+		padding: 10px 16px;
+		box-shadow: 0 2px 12px rgb(0 0 0 / 0.15);
+		color: var(--color-grey-80);
+		cursor: text;
+	}
+	.hub-hero .hub-hero-search-icon {
+		flex-shrink: 0;
+	}
+	.hub-hero .hub-hero-search-box input {
+		flex: 1;
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: 15px;
+		font-family: inherit;
+		color: var(--color-ink-dark);
+		min-width: 0;
+	}
+	.hub-hero .hub-hero-search-box input::placeholder {
+		color: var(--color-grey-40);
+	}
 
 	.hub-hero .hub-hero-meta {
 		@apply mt-2 flex flex-wrap items-center gap-3;
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index d124143244..8206116af4 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -20,8 +20,16 @@
 
 		@if (Model.ShowSearch)
 		{
+			var placeholder = string.IsNullOrWhiteSpace(Model.IconKey)
+				? "Search docs..."
+				: $"Search {char.ToUpperInvariant(Model.IconKey![0])}{Model.IconKey.AsSpan(1).ToString()} docs...";
 			<div class="hub-hero-search">
-				<navigation-search></navigation-search>
+				<label class="hub-hero-search-box">
+					<svg class="hub-hero-search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<path d="M11.271 11.978l3.872 3.873a.502.502 0 00.708-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05 6.99 6.99 0 004.276-1.5v-.519zM2.752 11.24c-2.342-2.342-2.342-6.152 0-8.494 2.343-2.343 6.152-2.343 8.494 0 2.343 2.342 2.343 6.152 0 8.494-2.342 2.342-6.151 2.342-8.494 0z" fill="currentColor"/>
+					</svg>
+					<input type="text" placeholder="@placeholder" autocomplete="off" aria-label="@placeholder" disabled />
+				</label>
 			</div>
 		}
 

From 91795999e9ddaf218113d3b540b09bb7c117c9dc Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:31:27 +0200
Subject: [PATCH 12/56] fix(hubs): align hero icon with H1, push description to
 its own row

Switches .hub-hero-top from flex to a 2-col grid and uses
display:contents on .hub-hero-title so its children become direct grid
items. The icon vertically centers with the H1 (row 1), and the
description spans both columns in row 2 -- matching the gist layout
where the description starts at the left edge below the icon row, not
hanging-indented next to the H1.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Assets/markdown/hub.css                   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index b559711f75..82e6726a12 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -41,7 +41,24 @@
 		@apply mx-auto w-full max-w-5xl;
 	}
 	.hub-hero .hub-hero-top {
-		@apply mb-3 flex items-center gap-4;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		column-gap: 16px;
+		align-items: center;
+		margin-bottom: 12px;
+	}
+	.hub-hero .hub-hero-title {
+		display: contents;
+	}
+	.hub-hero .hub-hero-title .heading-wrapper {
+		grid-column: 2;
+		grid-row: 1;
+		margin: 0;
+	}
+	.hub-hero .hub-hero-title p {
+		grid-column: 1 / -1;
+		grid-row: 2;
+		margin-top: 16px;
 	}
 	.hub-hero .hub-hero-icon {
 		@apply inline-flex h-13 w-13 shrink-0 items-center justify-center rounded-xl text-2xl font-bold;
@@ -74,7 +91,6 @@
 		color: rgb(255 255 255 / 0.7);
 		max-width: 720px;
 		line-height: 1.6;
-		margin-top: 12px;
 	}
 
 	.hub-hero .hub-hero-search {

From 7940d99c608b2ae0e4acfb22a81afb4643c0ed02 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:36:02 +0200
Subject: [PATCH 13/56] feat(hubs): turn hero version pill into a real dropdown

Adds a :versions: option to {hero} taking comma-separated 'Label[=URL]'
entries. When non-empty, the version chip renders as a <details>
dropdown -- click to reveal a menu listing the current version (with a
checkmark) plus each entry. Entries with a URL are clickable links;
entries without a URL render as greyed-out 'soon' rows.

ES 9.4 / Kibana 9.4 hubs are wired with v8 and v7 as disabled entries
so reviewers can see the dropdown shape without yet-built hub pages.

Also bumps Elasticsearch examples to 9.4 and adds a Serverless
release-notes link in the What's new header (matching the Kibana hub).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/hubs/elasticsearch/9.0.md                |  17 ++-
 docs/hubs/kibana/9.0.md                       |   1 +
 .../Assets/markdown/hub.css                   | 131 ++++++++++++++++++
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |   1 +
 .../Myst/Directives/Hub/HeroBlock.cs          |  41 ++++--
 .../Myst/Directives/Hub/HeroView.cshtml       |  41 +++++-
 .../Myst/Directives/Hub/HeroViewModel.cs      |   1 +
 7 files changed, 212 insertions(+), 21 deletions(-)

diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
index 6ef52436c4..4c03a55cdf 100644
--- a/docs/hubs/elasticsearch/9.0.md
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -4,9 +4,10 @@ layout: hub
 
 :::{hero}
 :icon: elasticsearch
-:version: v9 (current)
+:version: v9 / Serverless (current)
+:versions: v8,v7
 :quick-links: Install=https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch,Quick start=https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples,API reference=https://www.elastic.co/docs/api/doc/elasticsearch,Release notes=https://www.elastic.co/docs/release-notes/elasticsearch
-:releases: Latest&#58; [Stack 9.0.0](https://www.elastic.co/docs/release-notes/elasticsearch) (Apr 2025)
+:releases: Latest&#58; [Stack 9.4.1](https://www.elastic.co/docs/release-notes/elasticsearch) (Mar 28, 2026) · [Serverless deployed](https://www.elastic.co/docs/release-notes/serverless) Apr 1, 2026
 
 # Elasticsearch
 
@@ -24,22 +25,24 @@ The distributed search and analytics engine. Store, search, and analyze data at
 title: What's new in Elasticsearch
 id: whats-new
 release-links:
-  - label: 9.0
+  - label: '9.4'
     url: https://www.elastic.co/docs/release-notes/elasticsearch
+  - label: Serverless
+    url: https://www.elastic.co/docs/release-notes/serverless
 items:
   - title: semantic_text field type
     description: Simplify semantic search — no pipeline setup needed, just define the field and start querying
     link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
-    meta: 9.0 GA
+    meta: 9.4 GA
   - title: ES|QL improvements
     description: New functions, cross-cluster support, and dense vector operations directly in ES|QL queries
     link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
-    meta: '9.0'
+    meta: '9.4'
   - title: Inference API expansion
     description: Connect to external AI models (OpenAI, Cohere, Anthropic, Hugging Face, Azure, Google) for embeddings and reranking
     link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    meta: '9.0'
-  - title: Breaking changes in 9.0
+    meta: '9.4'
+  - title: Breaking changes in 9.x
     description: Review removed settings, deprecated APIs, and behavioral changes before upgrading from 8.x
     link: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
     meta: Upgrade guide
diff --git a/docs/hubs/kibana/9.0.md b/docs/hubs/kibana/9.0.md
index 4c703b0eb8..9c9f84ff18 100644
--- a/docs/hubs/kibana/9.0.md
+++ b/docs/hubs/kibana/9.0.md
@@ -5,6 +5,7 @@ layout: hub
 :::{hero}
 :icon: kibana
 :version: v9 / Serverless (current)
+:versions: v8,v7
 :quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
 :releases: Latest&#58; [Stack 9.4.1](/release-notes/kibana) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
 
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 82e6726a12..607b3117df 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -149,6 +149,137 @@
 		background: #9adc30;
 	}
 
+	/* Version dropdown ------------------------------------------------- */
+	.hub-hero details.hub-hero-version-dropdown {
+		position: relative;
+		display: inline-block;
+		padding: 0;
+		border: 0;
+		background: transparent;
+	}
+	.hub-hero details.hub-hero-version-dropdown summary {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		background: rgb(255 255 255 / 0.08);
+		border: 1px solid rgb(255 255 255 / 0.15);
+		border-radius: 20px;
+		padding: 5px 14px;
+		font-size: 13px;
+		color: rgb(255 255 255 / 0.85);
+		cursor: pointer;
+		list-style: none;
+		user-select: none;
+		transition: background 0.15s;
+	}
+	.hub-hero
+		details.hub-hero-version-dropdown
+		summary::-webkit-details-marker {
+		display: none;
+	}
+	.hub-hero details.hub-hero-version-dropdown summary:hover {
+		background: rgb(255 255 255 / 0.14);
+	}
+	.hub-hero .hub-hero-version-caret {
+		font-size: 10px;
+		opacity: 0.6;
+		transition: transform 0.15s;
+	}
+	.hub-hero details[open] .hub-hero-version-caret {
+		transform: rotate(180deg);
+	}
+
+	.hub-hero .hub-hero-version-menu {
+		position: absolute;
+		top: calc(100% + 6px);
+		left: 0;
+		min-width: 220px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 10px;
+		padding: 4px;
+		margin: 0;
+		list-style: none;
+		box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
+		font-size: 13px;
+		color: var(--color-ink-dark);
+		z-index: 20;
+	}
+	.hub-hero .hub-hero-version-menu li {
+		margin: 0;
+		padding: 0;
+		border-radius: 6px;
+	}
+	.hub-hero .hub-hero-version-menu li a,
+	.hub-hero
+		.hub-hero-version-menu
+		li
+		> span:not(.hub-hero-version-tick):not(.hub-hero-version-soon) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 8px 12px;
+		text-decoration: none;
+		color: inherit;
+		white-space: nowrap;
+	}
+	.hub-hero
+		.hub-hero-version-menu
+		li
+		> span:not(.hub-hero-version-tick):not(.hub-hero-version-soon) {
+		display: flex;
+	}
+	.hub-hero .hub-hero-version-menu li {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 8px 12px;
+		white-space: nowrap;
+	}
+	.hub-hero .hub-hero-version-menu li a,
+	.hub-hero .hub-hero-version-menu li > span {
+		padding: 0;
+	}
+	.hub-hero
+		.hub-hero-version-menu
+		li:hover:not(.hub-hero-version-current):not(
+			.hub-hero-version-disabled
+		) {
+		background: var(--color-grey-10);
+	}
+	.hub-hero .hub-hero-version-menu li a {
+		color: inherit;
+		text-decoration: none;
+		flex: 1;
+	}
+	.hub-hero .hub-hero-version-menu li a:hover {
+		color: var(--color-blue-elastic-100);
+		text-decoration: none;
+	}
+	.hub-hero .hub-hero-version-current {
+		font-weight: 600;
+		color: var(--color-ink-dark);
+	}
+	.hub-hero .hub-hero-version-tick {
+		color: var(--color-blue-elastic-100);
+		font-weight: 700;
+	}
+	.hub-hero .hub-hero-version-disabled {
+		color: var(--color-grey-40);
+		cursor: not-allowed;
+	}
+	.hub-hero .hub-hero-version-soon {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--color-grey-40);
+		background: var(--color-grey-10);
+		padding: 2px 6px;
+		border-radius: 4px;
+	}
+
 	.hub-hero .hub-hero-pills {
 		@apply m-0 flex list-none flex-wrap gap-2 p-0;
 	}
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 92db50c08d..3e234c9072 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -365,6 +365,7 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 			Version = block.Version,
 			ShowSearch = block.ShowSearch,
 			QuickLinks = block.QuickLinks,
+			OtherVersions = block.OtherVersions,
 			ReleasesHtml = releasesHtml
 		});
 		RenderRazorSlice(slice, renderer);
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
index 2797255c13..529f8d8f4a 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -33,6 +33,7 @@ public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
 	public string? Version { get; private set; }
 	public bool ShowSearch { get; private set; }
 	public IReadOnlyList<HeroQuickLink> QuickLinks { get; private set; } = [];
+	public IReadOnlyList<HeroVersion> OtherVersions { get; private set; } = [];
 	public string? Releases { get; private set; }
 
 	public override void FinalizeAndValidate(ParserContext context)
@@ -42,26 +43,44 @@ public override void FinalizeAndValidate(ParserContext context)
 		Version = Prop("version");
 		// search defaults to true; explicit ":search: false" hides it
 		ShowSearch = TryPropBool("search") ?? true;
-		QuickLinks = ParseQuickLinks(Prop("quick-links"));
+		QuickLinks = ParsePairs(Prop("quick-links"), allowEmptyUrl: false)
+			.Select(p => new HeroQuickLink(p.Label, p.Url!)).ToList();
+		OtherVersions = ParsePairs(Prop("versions"), allowEmptyUrl: true)
+			.Select(p => new HeroVersion(p.Label, p.Url)).ToList();
 		Releases = Prop("releases");
 	}
 
-	private static IReadOnlyList<HeroQuickLink> ParseQuickLinks(string? raw)
+	private static IReadOnlyList<(string Label, string? Url)> ParsePairs(string? raw, bool allowEmptyUrl)
 	{
 		if (string.IsNullOrWhiteSpace(raw))
 			return [];
 
-		var entries = new List<HeroQuickLink>();
+		var entries = new List<(string, string?)>();
 		foreach (var part in raw.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
 		{
 			var separator = part.IndexOf('=');
-			if (separator <= 0 || separator == part.Length - 1)
-				continue;
-
-			var label = part[..separator].Trim();
-			var url = part[(separator + 1)..].Trim();
-			if (label.Length > 0 && url.Length > 0)
-				entries.Add(new HeroQuickLink(label, url));
+			string label;
+			string? url;
+			if (separator < 0)
+			{
+				if (!allowEmptyUrl)
+					continue;
+				label = part.Trim();
+				url = null;
+			}
+			else
+			{
+				label = part[..separator].Trim();
+				url = part[(separator + 1)..].Trim();
+				if (string.IsNullOrEmpty(url))
+				{
+					if (!allowEmptyUrl)
+						continue;
+					url = null;
+				}
+			}
+			if (label.Length > 0)
+				entries.Add((label, url));
 		}
 
 		return entries;
@@ -69,3 +88,5 @@ private static IReadOnlyList<HeroQuickLink> ParseQuickLinks(string? raw)
 }
 
 public readonly record struct HeroQuickLink(string Label, string Url);
+
+public readonly record struct HeroVersion(string Label, string? Url);
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index 8206116af4..7190cfaa05 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -36,10 +36,43 @@
 		<div class="hub-hero-meta">
 			@if (!string.IsNullOrWhiteSpace(Model.Version))
 			{
-				<span class="hub-hero-version">
-					<span class="hub-hero-version-dot" aria-hidden="true"></span>
-					<span class="hub-hero-version-text">@Model.Version</span>
-				</span>
+				if (Model.OtherVersions.Count > 0)
+				{
+					<details class="hub-hero-version hub-hero-version-dropdown">
+						<summary>
+							<span class="hub-hero-version-dot" aria-hidden="true"></span>
+							<span class="hub-hero-version-text">@Model.Version</span>
+							<span class="hub-hero-version-caret" aria-hidden="true">▾</span>
+						</summary>
+						<ul class="hub-hero-version-menu" role="menu">
+							<li class="hub-hero-version-current" role="menuitem" aria-current="page">
+								<span>@Model.Version</span>
+								<span class="hub-hero-version-tick" aria-hidden="true">✓</span>
+							</li>
+							@foreach (var v in Model.OtherVersions)
+							{
+								if (string.IsNullOrEmpty(v.Url))
+								{
+									<li class="hub-hero-version-disabled" role="menuitem" aria-disabled="true">
+										<span>@v.Label</span>
+										<span class="hub-hero-version-soon">soon</span>
+									</li>
+								}
+								else
+								{
+									<li role="menuitem"><a href="@v.Url">@v.Label</a></li>
+								}
+							}
+						</ul>
+					</details>
+				}
+				else
+				{
+					<span class="hub-hero-version">
+						<span class="hub-hero-version-dot" aria-hidden="true"></span>
+						<span class="hub-hero-version-text">@Model.Version</span>
+					</span>
+				}
 			}
 			@if (Model.QuickLinks.Count > 0)
 			{
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index 19373fd0f2..6f69430990 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -11,5 +11,6 @@ public class HeroViewModel : DirectiveViewModel
 	public required string? Version { get; init; }
 	public required bool ShowSearch { get; init; }
 	public required IReadOnlyList<HeroQuickLink> QuickLinks { get; init; }
+	public required IReadOnlyList<HeroVersion> OtherVersions { get; init; }
 	public required string? ReleasesHtml { get; init; }
 }

From 1908fee724f83eb4de2e27ac8ef77e61346641bb Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:47:26 +0200
Subject: [PATCH 14/56] feat(hubs): centralize What's new content in
 config/whats-new.yml

The {whats-new} directive now accepts a :product: option that looks the
content up in a single source-of-truth file. Authors edit one YAML in
config/, and any page can render that product's panel with a one-line
directive:

    :::{whats-new}
    :product: kibana
    :::

Inline YAML body still works as a fallback / override for one-offs.

The new file is loaded through ConfigurationFileProvider (with embedded-
resource fallback so the binary always has it) and made available to
the directive via BuildContext. Configuration is cached per-build so
multiple {whats-new} blocks share one parse pass.

Both hub markdowns are slimmed down to the one-line shape; their
previous inline data is now in config/whats-new.yml.

Also:
- Switches the What's new item layout to grid with a fixed-width meta
  column (130px), so version/date pills line up across rows and
  descriptions don't run into them.
- Makes the hero version chip read more clearly as a dropdown: caret is
  bigger and lives in a translucent circle, the chip itself has a
  brighter idle / hover / open state.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/whats-new.yml                          | 72 +++++++++++++++++
 docs/hubs/elasticsearch/9.0.md                | 25 +-----
 docs/hubs/kibana/9.0.md                       | 25 +-----
 .../ConfigurationFileProvider.cs              |  4 +
 ...Elastic.Documentation.Configuration.csproj |  1 +
 .../Assets/markdown/hub.css                   | 56 ++++++++++---
 .../Myst/Directives/Hub/WhatsNewBlock.cs      | 81 ++++++++++++++-----
 .../Myst/YamlSerialization.cs                 |  1 +
 8 files changed, 185 insertions(+), 80 deletions(-)
 create mode 100644 config/whats-new.yml

diff --git a/config/whats-new.yml b/config/whats-new.yml
new file mode 100644
index 0000000000..2cfb4f0105
--- /dev/null
+++ b/config/whats-new.yml
@@ -0,0 +1,72 @@
+###
+# Centralized "What's new" feed used by the {whats-new} directive.
+#
+# Any page can render a product's recent highlights with:
+#
+#   :::{whats-new}
+#   :product: kibana
+#   :::
+#
+# The {whats-new} directive looks the product up in this file and renders the
+# full panel (header + items). Authors only edit this file; the directive
+# stays trivial in markdown.
+#
+# An optional `id` and `badge` per product control the section anchor and the
+# small badge shown to the left of the title; default badge is "New".
+###
+
+products:
+
+  kibana:
+    title: What's new in Kibana
+    id: whats-new
+    badge: New
+    release-links:
+      - label: '9.4'
+        url: https://www.elastic.co/docs/release-notes/kibana
+      - label: Serverless
+        url: https://www.elastic.co/docs/release-notes/serverless
+    items:
+      - title: Dashboards and visualizations APIs
+        description: Programmatically create and manage dashboards and visualizations
+        link: https://www.elastic.co/docs/api/doc/kibana
+        meta: 9.4 preview
+      - title: AI agent skills
+        description: Teach AI coding agents to work with the Elastic stack
+        link: https://www.elastic.co/docs/explore-analyze/ai-features/agent-skills
+        meta: Mar 2026
+      - title: Agent Builder
+        description: Build custom AI agents that reason over your data
+        link: https://www.elastic.co/docs/explore-analyze/ai-features/elastic-agent-builder
+        meta: 9.3 GA
+      - title: Workflows
+        description: Automate tasks with Kibana actions, HTTP calls, and AI agents
+        link: https://www.elastic.co/docs/explore-analyze/workflows
+        meta: 9.3 preview
+
+  elasticsearch:
+    title: What's new in Elasticsearch
+    id: whats-new
+    badge: New
+    release-links:
+      - label: '9.4'
+        url: https://www.elastic.co/docs/release-notes/elasticsearch
+      - label: Serverless
+        url: https://www.elastic.co/docs/release-notes/serverless
+    items:
+      - title: semantic_text field type
+        description: Simplify semantic search — no pipeline setup needed, just define the field and start querying
+        link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
+        meta: 9.4 GA
+      - title: ES|QL improvements
+        description: New functions, cross-cluster support, and dense vector operations directly in ES|QL queries
+        link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
+        meta: '9.4'
+      - title: Inference API expansion
+        description: Connect to external AI models (OpenAI, Cohere, Anthropic, Hugging Face, Azure, Google) for embeddings and reranking
+        link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+        meta: '9.4'
+      - title: Breaking changes in 9.x
+        description: Review removed settings, deprecated APIs, and behavioral changes before upgrading from 8.x
+        link: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
+        meta: Upgrade guide
diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/hubs/elasticsearch/9.0.md
index 4c03a55cdf..ecf192ba34 100644
--- a/docs/hubs/elasticsearch/9.0.md
+++ b/docs/hubs/elasticsearch/9.0.md
@@ -22,30 +22,7 @@ The distributed search and analytics engine. Store, search, and analyze data at
 :::
 
 :::{whats-new}
-title: What's new in Elasticsearch
-id: whats-new
-release-links:
-  - label: '9.4'
-    url: https://www.elastic.co/docs/release-notes/elasticsearch
-  - label: Serverless
-    url: https://www.elastic.co/docs/release-notes/serverless
-items:
-  - title: semantic_text field type
-    description: Simplify semantic search — no pipeline setup needed, just define the field and start querying
-    link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
-    meta: 9.4 GA
-  - title: ES|QL improvements
-    description: New functions, cross-cluster support, and dense vector operations directly in ES|QL queries
-    link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
-    meta: '9.4'
-  - title: Inference API expansion
-    description: Connect to external AI models (OpenAI, Cohere, Anthropic, Hugging Face, Azure, Google) for embeddings and reranking
-    link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    meta: '9.4'
-  - title: Breaking changes in 9.x
-    description: Review removed settings, deprecated APIs, and behavioral changes before upgrading from 8.x
-    link: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
-    meta: Upgrade guide
+:product: elasticsearch
 :::
 
 ::::{card-group}
diff --git a/docs/hubs/kibana/9.0.md b/docs/hubs/kibana/9.0.md
index 9c9f84ff18..8d16f4d737 100644
--- a/docs/hubs/kibana/9.0.md
+++ b/docs/hubs/kibana/9.0.md
@@ -22,30 +22,7 @@ The UI for the Elasticsearch platform. Explore and visualize your data, build da
 :::
 
 :::{whats-new}
-title: What's new in Kibana
-id: whats-new
-release-links:
-  - label: 9.4
-    url: /release-notes/kibana
-  - label: Serverless
-    url: /release-notes/serverless
-items:
-  - title: Dashboards and visualizations APIs
-    description: Programmatically create and manage dashboards and visualizations
-    link: /api/dashboards
-    meta: 9.4 preview
-  - title: AI agent skills
-    description: Teach AI coding agents to work with the Elastic stack
-    link: /ai/agent-skills
-    meta: Mar 2026
-  - title: Agent Builder
-    description: Build custom AI agents that reason over your data
-    link: /ai/agent-builder
-    meta: 9.3 GA
-  - title: Workflows
-    description: Automate tasks with Kibana actions, HTTP calls, and AI agents
-    link: /ai/workflows
-    meta: 9.3 preview
+:product: kibana
 :::
 
 ::::{card-group}
diff --git a/src/Elastic.Documentation.Configuration/ConfigurationFileProvider.cs b/src/Elastic.Documentation.Configuration/ConfigurationFileProvider.cs
index ba59191eb7..3fca252636 100644
--- a/src/Elastic.Documentation.Configuration/ConfigurationFileProvider.cs
+++ b/src/Elastic.Documentation.Configuration/ConfigurationFileProvider.cs
@@ -112,6 +112,7 @@ public ConfigurationFileProvider(
 		LegacyUrlMappingsFile = CreateTemporaryConfigurationFile("legacy-url-mappings.yml");
 		// reading from synonyms.yml is temporary. If you spot this again as a future reader, feel free to remove it.
 		SearchFile = CreateTemporaryConfigurationFile("search.yml", "synonyms.yml");
+		WhatsNewFile = TryCreateTemporaryConfigurationFile("whats-new.yml");
 	}
 
 	public bool SkipPrivateRepositories { get; }
@@ -127,6 +128,9 @@ public ConfigurationFileProvider(
 
 	public IFileInfo ProductsFile { get; }
 
+	/// <summary>Optional — present only when <c>config/whats-new.yml</c> exists.</summary>
+	public IFileInfo? WhatsNewFile { get; }
+
 	public IFileInfo AssemblerFile { get; }
 
 	public IFileInfo LegacyUrlMappingsFile { get; }
diff --git a/src/Elastic.Documentation.Configuration/Elastic.Documentation.Configuration.csproj b/src/Elastic.Documentation.Configuration/Elastic.Documentation.Configuration.csproj
index 0f96c00f34..5712b6a1d9 100644
--- a/src/Elastic.Documentation.Configuration/Elastic.Documentation.Configuration.csproj
+++ b/src/Elastic.Documentation.Configuration/Elastic.Documentation.Configuration.csproj
@@ -31,5 +31,6 @@
     <EmbeddedResource Include="$(SolutionRoot)\config\navigation.yml" />
     <EmbeddedResource Include="$(SolutionRoot)\config\legacy-url-mappings.yml" />
     <EmbeddedResource Include="$(SolutionRoot)\config\search.yml" />
+    <EmbeddedResource Include="$(SolutionRoot)\config\whats-new.yml" />
   </ItemGroup>
 </Project>
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 607b3117df..8005538897 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -160,17 +160,19 @@
 	.hub-hero details.hub-hero-version-dropdown summary {
 		display: inline-flex;
 		align-items: center;
-		gap: 8px;
-		background: rgb(255 255 255 / 0.08);
-		border: 1px solid rgb(255 255 255 / 0.15);
+		gap: 10px;
+		background: rgb(255 255 255 / 0.12);
+		border: 1px solid rgb(255 255 255 / 0.25);
 		border-radius: 20px;
-		padding: 5px 14px;
+		padding: 5px 6px 5px 14px;
 		font-size: 13px;
-		color: rgb(255 255 255 / 0.85);
+		color: var(--color-white);
 		cursor: pointer;
 		list-style: none;
 		user-select: none;
-		transition: background 0.15s;
+		transition:
+			background 0.15s,
+			border-color 0.15s;
 	}
 	.hub-hero
 		details.hub-hero-version-dropdown
@@ -178,12 +180,33 @@
 		display: none;
 	}
 	.hub-hero details.hub-hero-version-dropdown summary:hover {
-		background: rgb(255 255 255 / 0.14);
+		background: rgb(255 255 255 / 0.2);
+		border-color: rgb(255 255 255 / 0.4);
+	}
+	.hub-hero details[open].hub-hero-version-dropdown summary {
+		background: rgb(255 255 255 / 0.2);
+		border-color: rgb(255 255 255 / 0.4);
 	}
 	.hub-hero .hub-hero-version-caret {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
+		border-radius: 50%;
+		background: rgb(255 255 255 / 0.18);
 		font-size: 10px;
-		opacity: 0.6;
-		transition: transform 0.15s;
+		line-height: 1;
+		color: var(--color-white);
+		transition:
+			transform 0.18s ease,
+			background 0.15s;
+	}
+	.hub-hero
+		details.hub-hero-version-dropdown
+		summary:hover
+		.hub-hero-version-caret {
+		background: rgb(255 255 255 / 0.3);
 	}
 	.hub-hero details[open] .hub-hero-version-caret {
 		transform: rotate(180deg);
@@ -430,9 +453,10 @@
 		@apply m-0 p-0;
 	}
 	.hub-whats-new .hub-wn-item-link {
-		display: flex;
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) 130px;
 		align-items: baseline;
-		gap: 10px;
+		column-gap: 12px;
 		padding: 10px 14px;
 		border-radius: 10px;
 		background: var(--color-grey-10);
@@ -456,13 +480,19 @@
 		color: var(--color-ink-light);
 	}
 	.hub-whats-new .hub-wn-item-meta {
-		margin-left: auto;
+		justify-self: end;
+		text-align: right;
 		white-space: nowrap;
-		flex-shrink: 0;
 		font-size: 12px;
 		color: var(--color-grey-80);
 		font-weight: 500;
 	}
+	.hub-whats-new .hub-wn-item-desc {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
 	/* Zone (section heading) ------------------------------------------ */
 	.hub-zone {
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
index f009c3f0b8..59202757cc 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
@@ -2,6 +2,7 @@
 // Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
 // See the LICENSE file in the project root for more information
 
+using System.Collections.Concurrent;
 using Elastic.Markdown.Diagnostics;
 using YamlDotNet.Core;
 using YamlDotNet.Serialization;
@@ -9,41 +10,52 @@
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
 /// <summary>
-/// Renders the "What's new" panel: a header with a New badge, a section title,
-/// optional release-notes links, and a list of items with title / description /
-/// per-item meta pill (e.g. "9.4 preview", "Mar 2026").
-/// </summary>
-/// <example>
+/// Renders the "What's new" panel for a product. Two usage shapes:
+///
+/// <para><b>Centralized lookup (preferred):</b></para>
 /// <code>
 /// :::{whats-new}
-/// title: What's new in Kibana
-/// id: whats-new
-/// release-links:
-///   - label: 9.4
-///     url: /release-notes/kibana
-///   - label: Serverless
-///     url: /release-notes/serverless
-/// items:
-///   - title: Dashboards APIs
-///     description: Programmatically create dashboards
-///     link: /api/dashboards
-///     meta: 9.4 preview
+/// :product: kibana
 /// :::
 /// </code>
-/// </example>
+/// <para>The directive looks the product key up in <c>config/whats-new.yml</c>
+/// and renders the data declared there. Authors edit one file; any page can
+/// surface the panel.</para>
+///
+/// <para><b>Inline override:</b> if no <c>:product:</c> option is provided,
+/// the directive expects a YAML body declaring <c>title</c>, <c>items</c>,
+/// etc. directly. Useful for one-offs that don't belong in the central
+/// feed.</para>
+/// </summary>
 public class WhatsNewBlock(DirectiveBlockParser parser, ParserContext context)
 	: DirectiveBlock(parser, context)
 {
+	private static readonly ConcurrentDictionary<string, WhatsNewConfig?> CentralConfigCache = new();
+
 	public override string Directive => "whats-new";
 
 	public WhatsNewData Data { get; private set; } = WhatsNewData.Empty;
 
 	public override void FinalizeAndValidate(ParserContext context)
 	{
+		var product = Prop("product");
+
+		if (!string.IsNullOrWhiteSpace(product))
+		{
+			var resolved = LoadFromCentralConfig(product!);
+			if (resolved is null)
+			{
+				this.EmitError($"{{whats-new}} :product: '{product}' was not found in config/whats-new.yml.");
+				return;
+			}
+			Data = resolved;
+			return;
+		}
+
 		var yaml = HubYamlBody.Extract(this, new BuildContextFileReader(Build.ReadFileSystem));
 		if (yaml is null)
 		{
-			this.EmitError("{whats-new} requires a YAML body. See the whats-new directive docs.");
+			this.EmitError("{whats-new} requires either a `:product:` option or a YAML body.");
 			return;
 		}
 
@@ -57,10 +69,41 @@ public override void FinalizeAndValidate(ParserContext context)
 		}
 	}
 
+	private WhatsNewData? LoadFromCentralConfig(string productKey)
+	{
+		var configFile = Build.ConfigurationFileProvider.WhatsNewFile;
+		if (configFile is null || !configFile.Exists)
+			return null;
+
+		var config = CentralConfigCache.GetOrAdd(configFile.FullName, path =>
+		{
+			try
+			{
+				var yaml = Build.ReadFileSystem.File.ReadAllText(path);
+				return YamlSerialization.Deserialize<WhatsNewConfig>(yaml, Build.ProductsConfiguration);
+			}
+			catch
+			{
+				return null;
+			}
+		});
+
+		if (config?.Products is null)
+			return null;
+		return config.Products.TryGetValue(productKey, out var data) ? data : null;
+	}
+
 	public override IEnumerable<string> GeneratedAnchors =>
 		string.IsNullOrWhiteSpace(Data.Id) ? [] : [Data.Id!];
 }
 
+[YamlSerializable]
+public record WhatsNewConfig
+{
+	[YamlMember(Alias = "products")]
+	public Dictionary<string, WhatsNewData> Products { get; set; } = [];
+}
+
 [YamlSerializable]
 public record WhatsNewData
 {
diff --git a/src/Elastic.Markdown/Myst/YamlSerialization.cs b/src/Elastic.Markdown/Myst/YamlSerialization.cs
index 9b9309e1cc..af1a36d2a1 100644
--- a/src/Elastic.Markdown/Myst/YamlSerialization.cs
+++ b/src/Elastic.Markdown/Myst/YamlSerialization.cs
@@ -47,4 +47,5 @@ public static T Deserialize<T>(string yaml, ProductsConfiguration products)
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardAside))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewData))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewItem))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewConfig))]
 public partial class DocsBuilderYamlStaticContext;

From f6ce8b8339366f5db7fc1bca1b6d2b1292c50fc2 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:54:28 +0200
Subject: [PATCH 15/56] feat(hubs): wire hub pages under testing/hubs in
 docs-builder nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moves docs/hubs/{es,kibana}/9.0.md to docs/testing/hubs/{es,kibana}/9.0.md
  so they appear in the docs-builder docs sidebar under the Testing
  group, while still rendering with layout: hub.
- Adds matching folder children in _docset.yml.
- Updates products.yml hub slugs to the new paths so the product badges
  link to /testing/hubs/{product}/9.0/.

Also:
- Drops the description truncation in What's new items so long
  descriptions wrap onto a second line cleanly under the title (meta
  pill stays right-aligned with align-items: baseline).
- Bigger hero version dropdown caret: 28x28 puck with a 16px SVG
  chevron (replacing the small ▾ character) so it's clearly a
  click target.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/products.yml                           |  4 ++--
 docs/_docset.yml                              | 10 ++++++++--
 docs/{ => testing}/hubs/elasticsearch/9.0.md  |  0
 docs/{ => testing}/hubs/kibana/9.0.md         |  0
 .../Assets/markdown/hub.css                   | 20 +++++++++----------
 .../Myst/Directives/Hub/HeroView.cshtml       |  6 +++++-
 6 files changed, 25 insertions(+), 15 deletions(-)
 rename docs/{ => testing}/hubs/elasticsearch/9.0.md (100%)
 rename docs/{ => testing}/hubs/kibana/9.0.md (100%)

diff --git a/config/products.yml b/config/products.yml
index b5471b8912..160d8a2006 100644
--- a/config/products.yml
+++ b/config/products.yml
@@ -147,7 +147,7 @@ products:
   elasticsearch:
     display: 'Elasticsearch'
     versioning: 'stack'
-    hub: 'hubs/elasticsearch/9.0'
+    hub: 'testing/hubs/elasticsearch/9.0'
   elasticsearch-client:
     display: 'Elasticsearch Client'
     versioning: 'stack'
@@ -208,7 +208,7 @@ products:
   kibana:
     display: 'Kibana'
     versioning: 'stack'
-    hub: 'hubs/kibana/9.0'
+    hub: 'testing/hubs/kibana/9.0'
   logstash:
     display: 'Logstash'
     versioning: 'stack'
diff --git a/docs/_docset.yml b/docs/_docset.yml
index c43759d2fb..189227f00c 100644
--- a/docs/_docset.yml
+++ b/docs/_docset.yml
@@ -60,8 +60,6 @@ toc:
   - hidden: 404.md
   - hidden: _search.md
   - hidden: developer-notes.md
-  - hidden: hubs/elasticsearch/9.0.md
-  - hidden: hubs/kibana/9.0.md
   - hidden: contribute/cumulative-docs/index.md
   - hidden: contribute/cumulative-docs/guidelines.md
   - hidden: contribute/cumulative-docs/badge-placement.md
@@ -234,6 +232,14 @@ toc:
   - folder: testing
     children:
       - file: index.md
+      - folder: hubs
+        children:
+          - folder: elasticsearch
+            children:
+              - file: 9.0.md
+          - folder: kibana
+            children:
+              - file: 9.0.md
       - file: kibana-settings-yaml-samples.md
       - file: security-settings.md
       - file: req.md
diff --git a/docs/hubs/elasticsearch/9.0.md b/docs/testing/hubs/elasticsearch/9.0.md
similarity index 100%
rename from docs/hubs/elasticsearch/9.0.md
rename to docs/testing/hubs/elasticsearch/9.0.md
diff --git a/docs/hubs/kibana/9.0.md b/docs/testing/hubs/kibana/9.0.md
similarity index 100%
rename from docs/hubs/kibana/9.0.md
rename to docs/testing/hubs/kibana/9.0.md
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 8005538897..b2c65e46c5 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -163,8 +163,8 @@
 		gap: 10px;
 		background: rgb(255 255 255 / 0.12);
 		border: 1px solid rgb(255 255 255 / 0.25);
-		border-radius: 20px;
-		padding: 5px 6px 5px 14px;
+		border-radius: 999px;
+		padding: 4px 4px 4px 14px;
 		font-size: 13px;
 		color: var(--color-white);
 		cursor: pointer;
@@ -191,17 +191,20 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 22px;
-		height: 22px;
+		width: 28px;
+		height: 28px;
 		border-radius: 50%;
-		background: rgb(255 255 255 / 0.18);
-		font-size: 10px;
-		line-height: 1;
+		background: rgb(255 255 255 / 0.22);
 		color: var(--color-white);
 		transition:
 			transform 0.18s ease,
 			background 0.15s;
 	}
+	.hub-hero .hub-hero-version-caret svg {
+		display: block;
+		width: 16px;
+		height: 16px;
+	}
 	.hub-hero
 		details.hub-hero-version-dropdown
 		summary:hover
@@ -489,9 +492,6 @@
 	}
 	.hub-whats-new .hub-wn-item-desc {
 		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 	}
 
 	/* Zone (section heading) ------------------------------------------ */
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index 7190cfaa05..3080d703fa 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -42,7 +42,11 @@
 						<summary>
 							<span class="hub-hero-version-dot" aria-hidden="true"></span>
 							<span class="hub-hero-version-text">@Model.Version</span>
-							<span class="hub-hero-version-caret" aria-hidden="true">▾</span>
+							<span class="hub-hero-version-caret" aria-hidden="true">
+								<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M3.5 6L8 10.5L12.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+								</svg>
+							</span>
 						</summary>
 						<ul class="hub-hero-version-menu" role="menu">
 							<li class="hub-hero-version-current" role="menuitem" aria-current="page">

From 24cee853cdb2d901840bda0e8fbd67e335702f05 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 21:59:31 +0200
Subject: [PATCH 16/56] feat(hubs): rename URL segment hubs/ -> products/

Establishes the production-target URL convention. The 'hub' page type
keeps its name internally (frontmatter layout: hub, products.yml
'hub:' field), but the published path segment becomes /products/.

- Files moved: docs/testing/hubs/{...} -> docs/testing/products/{...}
- _docset.yml: folder hubs -> products
- products.yml hub slugs updated
- nav-v2.yml Product hubs section: url /hubs/ -> /products/, page
  references updated to docs-builder://testing/products/{...}

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/navigation-v2.yml                             | 6 +++---
 config/products.yml                                  | 4 ++--
 docs/_docset.yml                                     | 2 +-
 docs/testing/{hubs => products}/elasticsearch/9.0.md | 0
 docs/testing/{hubs => products}/kibana/9.0.md        | 0
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename docs/testing/{hubs => products}/elasticsearch/9.0.md (100%)
 rename docs/testing/{hubs => products}/kibana/9.0.md (100%)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index a3f262d205..8570c6c1fd 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -2872,12 +2872,12 @@ nav:
     - toc: docs-content://release-notes/intro
 
   - section: Product hubs
-    url: /hubs/
+    url: /products/
     children:
     - label: Stack products
       children:
-      - page: docs-builder://hubs/elasticsearch/9.0.md
-      - page: docs-builder://hubs/kibana/9.0.md
+      - page: docs-builder://testing/products/elasticsearch/9.0.md
+      - page: docs-builder://testing/products/kibana/9.0.md
       - title: Observability
       - title: Security
     - label: Deployment runbooks
diff --git a/config/products.yml b/config/products.yml
index 160d8a2006..7c0068ca81 100644
--- a/config/products.yml
+++ b/config/products.yml
@@ -147,7 +147,7 @@ products:
   elasticsearch:
     display: 'Elasticsearch'
     versioning: 'stack'
-    hub: 'testing/hubs/elasticsearch/9.0'
+    hub: 'testing/products/elasticsearch/9.0'
   elasticsearch-client:
     display: 'Elasticsearch Client'
     versioning: 'stack'
@@ -208,7 +208,7 @@ products:
   kibana:
     display: 'Kibana'
     versioning: 'stack'
-    hub: 'testing/hubs/kibana/9.0'
+    hub: 'testing/products/kibana/9.0'
   logstash:
     display: 'Logstash'
     versioning: 'stack'
diff --git a/docs/_docset.yml b/docs/_docset.yml
index 189227f00c..ae7ceba2b2 100644
--- a/docs/_docset.yml
+++ b/docs/_docset.yml
@@ -232,7 +232,7 @@ toc:
   - folder: testing
     children:
       - file: index.md
-      - folder: hubs
+      - folder: products
         children:
           - folder: elasticsearch
             children:
diff --git a/docs/testing/hubs/elasticsearch/9.0.md b/docs/testing/products/elasticsearch/9.0.md
similarity index 100%
rename from docs/testing/hubs/elasticsearch/9.0.md
rename to docs/testing/products/elasticsearch/9.0.md
diff --git a/docs/testing/hubs/kibana/9.0.md b/docs/testing/products/kibana/9.0.md
similarity index 100%
rename from docs/testing/hubs/kibana/9.0.md
rename to docs/testing/products/kibana/9.0.md

From 40538efa27a4a920aaee90cc0467b5cd5c2e239b Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 22:05:24 +0200
Subject: [PATCH 17/56] docs(hubs): add reference pages for the hub-page
 directives

Adds one syntax/ doc per new directive plus a hub-pages.md overview:

- syntax/hub-pages.md  -- enables the layout, lists the directive set,
  shows a full skeleton, documents the product-badge mapping.
- syntax/hero.md       -- :icon:, :version:, :versions:, :quick-links:,
  :releases:, :search:; version dropdown shape.
- syntax/whats-new.md  -- centralized lookup via :product: + the inline
  YAML override schema.
- syntax/intro.md      -- markdown body, when to use vs. admonitions.
- syntax/on-this-page.md -- auto-collection rules and item ordering.
- syntax/card-group.md -- :title:, :intro:, :id:, fence-depth tip for
  nested cards, grid layout note.
- syntax/link-card.md  -- full YAML schema, variants, aside, errors.

All seven pages registered alphabetically under docs/syntax/ in
_docset.yml.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/_docset.yml            |  7 ++++
 docs/syntax/card-group.md   | 40 ++++++++++++++++++
 docs/syntax/hero.md         | 59 ++++++++++++++++++++++++++
 docs/syntax/hub-pages.md    | 83 +++++++++++++++++++++++++++++++++++++
 docs/syntax/intro.md        | 19 +++++++++
 docs/syntax/link-card.md    | 74 +++++++++++++++++++++++++++++++++
 docs/syntax/on-this-page.md | 25 +++++++++++
 docs/syntax/whats-new.md    | 60 +++++++++++++++++++++++++++
 8 files changed, 367 insertions(+)
 create mode 100644 docs/syntax/card-group.md
 create mode 100644 docs/syntax/hero.md
 create mode 100644 docs/syntax/hub-pages.md
 create mode 100644 docs/syntax/intro.md
 create mode 100644 docs/syntax/link-card.md
 create mode 100644 docs/syntax/on-this-page.md
 create mode 100644 docs/syntax/whats-new.md

diff --git a/docs/_docset.yml b/docs/_docset.yml
index ae7ceba2b2..bd2d6c9980 100644
--- a/docs/_docset.yml
+++ b/docs/_docset.yml
@@ -128,6 +128,7 @@ toc:
       - file: applies-switch.md
       - file: automated_settings.md
       - file: buttons.md
+      - file: card-group.md
       - file: changelog.md
       - file: code.md
       - file: comments.md
@@ -140,15 +141,20 @@ toc:
       - file: file_inclusion.md
       - file: footnotes.md
       - file: frontmatter.md
+      - file: hero.md
+      - file: hub-pages.md
       - file: icons.md
+      - file: intro.md
       - file: images.md
       - file: kbd.md
+      - file: link-card.md
       - file: math.md
       - file: diagrams.md
       - file: lists.md
       - file: line_breaks.md
       - file: links.md
       - file: list-sub-pages.md
+      - file: on-this-page.md
       - file: passthrough.md
       - file: sidebars.md
       - file: stepper.md
@@ -159,6 +165,7 @@ toc:
       - file: tabs.md
       - file: tagged_regions.md
       - file: titles.md
+      - file: whats-new.md
   - folder: cli
     children:
       - file: index.md
diff --git a/docs/syntax/card-group.md b/docs/syntax/card-group.md
new file mode 100644
index 0000000000..bf44068c45
--- /dev/null
+++ b/docs/syntax/card-group.md
@@ -0,0 +1,40 @@
+# Card group
+
+A section heading + a card grid container. Wraps one or more [`{link-card}`](link-card.md) directives.
+
+## Basic
+
+```markdown
+::::{card-group}
+:title: Install and administer
+:id: install
+
+:::{link-card}
+title: Self-managed
+link: /deploy/self-managed
+description: Run on your own infrastructure.
+links:
+  - { label: Docker, url: /deploy/docker }
+:::
+
+:::{link-card}
+title: Elastic Cloud Hosted
+link: /deploy/cloud
+description: Managed deployments on AWS, GCP, or Azure.
+:::
+::::
+```
+
+The outer fence uses **four** colons (`::::`) so the inner three-colon `:::` fences for the cards aren't interpreted as a closing fence. Use as many extra colons on the outer fence as you need to nest cleanly.
+
+## Options
+
+| Option | Notes |
+|---|---|
+| `:title:` | H2 heading. Optional — without it, only the grid renders. |
+| `:intro:` | Optional intro paragraph below the heading. |
+| `:id:` | Section anchor. Picked up by [`{on-this-page}`](on-this-page.md). |
+
+## Layout
+
+The grid auto-fills 1, 2, or 3 columns based on viewport width using `grid-template-columns: repeat(auto-fill, minmax(310px, 1fr))`. Card heights match within a row.
diff --git a/docs/syntax/hero.md b/docs/syntax/hero.md
new file mode 100644
index 0000000000..aebb94df8e
--- /dev/null
+++ b/docs/syntax/hero.md
@@ -0,0 +1,59 @@
+# Hero
+
+A full-bleed hero band with a product icon, page title, description, fake search box, version dropdown, quick-action pills, and an optional release-status line. Designed for the [hub layout](hub-pages.md) but reusable on any page.
+
+## Basic hero
+
+```markdown
+:::{hero}
+:icon: kibana
+:version: v9 / Serverless (current)
+
+# Kibana
+
+The UI for the Elasticsearch platform.
+:::
+```
+
+The first H1 inside the body is the page title. Subsequent paragraphs render as the description below the title.
+
+## Options
+
+| Option | Type | Notes |
+|---|---|---|
+| `:icon:` | string | Product key. Resolves to an inline SVG via the product-icon lookup. Known keys: `elasticsearch`, `kibana`, `observability`, `security`. Unknown keys fall back to a single-letter chip. |
+| `:version:` | string | Label inside the version chip (e.g. `v9 / Serverless (current)`). |
+| `:versions:` | comma list | When set, the chip becomes a `<details>` dropdown listing other versions. Items use `Label` (greyed, "soon") or `Label=URL` (clickable). |
+| `:quick-links:` | comma list, `Label=URL` | Pill bar below the version chip. |
+| `:releases:` | inline markdown | Small status line under the pills, supports inline links and bold/italic. |
+| `:search:` | bool, default `true` | Show the placeholder search box. |
+
+## Version dropdown
+
+```markdown
+:::{hero}
+:icon: kibana
+:version: v9 / Serverless (current)
+:versions: v8=https://www.elastic.co/docs/products/kibana/8.x,v7
+
+# Kibana
+:::
+```
+
+`v8=...` is a clickable link. `v7` (no `=URL`) renders greyed out with a "soon" badge.
+
+## Quick links and releases
+
+```markdown
+:::{hero}
+:icon: elasticsearch
+:version: v9 / Serverless (current)
+:quick-links: Install=/install,API reference=/api,Release notes=/release-notes
+:releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026) · [Serverless deployed](/srn) Apr 1, 2026
+
+# Elasticsearch
+The distributed search and analytics engine.
+:::
+```
+
+The `releases` option is inline markdown — it supports the same syntax as a single line of body markdown. Use `&#58;` for a literal colon when you don't want YAML to parse the value as a key/value pair.
diff --git a/docs/syntax/hub-pages.md b/docs/syntax/hub-pages.md
new file mode 100644
index 0000000000..66465b6321
--- /dev/null
+++ b/docs/syntax/hub-pages.md
@@ -0,0 +1,83 @@
+# Hub pages
+
+Hub pages are product-scoped landing pages — a 360° overview of one product across versions, deployment types, and surfaces. They're enabled by setting `layout: hub` in the page's frontmatter and composed from a small set of dedicated directives.
+
+## Enable the layout
+
+```yaml
+---
+layout: hub
+---
+```
+
+The `hub` layout drops the right-rail "On this page" TOC and the prev/next nav. The body owns the full width of the content column so directives can render full-bleed sections.
+
+## Directives
+
+| Directive | Purpose |
+|-----------|---------|
+| [`{hero}`](hero.md) | Full-bleed page hero with product icon, title, search, version dropdown, and quick-action pills. |
+| [`{on-this-page}`](on-this-page.md) | Auto-generated inline TOC linking each section anchor on the page. |
+| [`{intro}`](intro.md) | Small "getting started" callout panel with a teal accent bar. |
+| [`{whats-new}`](whats-new.md) | "What's new" panel populated from `config/whats-new.yml`. |
+| [`{card-group}`](card-group.md) | Section heading + card grid container. |
+| [`{link-card}`](link-card.md) | Rich card with title, description, primary link list, and optional aside. |
+
+## Page skeleton
+
+```markdown
+---
+layout: hub
+---
+
+:::{hero}
+:icon: kibana
+:version: v9 / Serverless (current)
+:versions: v8,v7
+:quick-links: Install=/install,Tutorial=/tutorial
+:releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026)
+
+# Kibana
+
+The UI for the Elasticsearch platform.
+:::
+
+:::{on-this-page}
+:::
+
+:::{intro}
+**New to Kibana?** [Take the tutorial](/tutorial) — 30 minutes, hands-on.
+:::
+
+:::{whats-new}
+:product: kibana
+:::
+
+::::{card-group}
+:title: Install and administer
+:id: install
+
+:::{link-card}
+title: Self-managed
+link: /deploy-manage/deploy/self-managed
+description: Run Kibana on your own infrastructure.
+links:
+  - { label: Docker, url: /deploy/docker }
+  - { label: Configure, url: /deploy/configure }
+:::
+::::
+```
+
+## Product badges
+
+Every regular (non-hub) page that declares one or more `products:` in its frontmatter automatically gets a clickable badge above its H1, linking to that product's hub page. The badge → hub URL mapping is set per product in [`config/products.yml`](../configure/site/products.md):
+
+```yaml
+products:
+  kibana:
+    display: 'Kibana'
+    versioning: 'stack'
+    hub: 'products/kibana/9.0'   # path slug -- relative to site root
+```
+
+When `hub:` is null, no badge renders for that product.
diff --git a/docs/syntax/intro.md b/docs/syntax/intro.md
new file mode 100644
index 0000000000..9d4ca14cf3
--- /dev/null
+++ b/docs/syntax/intro.md
@@ -0,0 +1,19 @@
+# Intro callout
+
+A small white panel with a teal accent bar — used for "getting started" callouts directly under the hero.
+
+## Basic
+
+```markdown
+:::{intro}
+**New to Kibana?** [Take the tutorial](/tutorial) — a 30-minute, hands-on walk-through of Discover, dashboards, and ES|QL.
+:::
+```
+
+Body is rendered as inline markdown. Use bold, links, and emphasis freely; keep it to one or two short paragraphs.
+
+## When to use
+
+`{intro}` is the standard "front door" panel between the [`{hero}`](hero.md) and the [`{on-this-page}`](on-this-page.md) chip. It's optional — skip it when the hero already says what readers need to know next.
+
+It is **not** an admonition. For caution / note / tip-style callouts inside body content, use the existing [admonitions](admonitions.md).
diff --git a/docs/syntax/link-card.md b/docs/syntax/link-card.md
new file mode 100644
index 0000000000..5b815522bf
--- /dev/null
+++ b/docs/syntax/link-card.md
@@ -0,0 +1,74 @@
+# Link card
+
+A rich card with a title, description, primary link list, and an optional aside.  Designed to live inside a [`{card-group}`](card-group.md), but renders standalone too.
+
+## Basic
+
+```markdown
+:::{link-card}
+title: Discover
+link: /discover
+description: Browse documents, filter, and query your indices in real time.
+links:
+  - label: Get started with Discover
+    url: /discover/get-started
+  - label: Use ES|QL in Kibana
+    url: /esql
+:::
+```
+
+The card body is **YAML, not markdown** — the directive expects a fixed schema and renders it. Authors don't write HTML, fences, or any directive options; they fill in fields.
+
+## Schema
+
+```yaml
+title: Discover                    # required -- card heading
+link: /discover/                   # optional -- makes the title clickable
+description: One-paragraph blurb.  # optional
+icon: elasticsearch                # optional -- product-keyed inline SVG
+variant: es                        # optional accent: es | obs | sec
+links:                             # optional -- primary link list
+  - label: Get started
+    url: /discover/get-started
+  - label: Use ES|QL
+    url: /esql
+aside:                             # optional bottom rail
+  label: Panel types
+  links:
+    - { label: Visualizations, url: /viz }
+    - { label: Maps, url: /maps }
+    - { label: Text, url: /text }
+```
+
+## Variants
+
+`variant: es | obs | sec` adds a left-border accent in the corresponding solution color (yellow / pink / teal). Use for solution cards.
+
+```markdown
+:::{link-card}
+title: Elasticsearch
+link: /solutions/elasticsearch
+icon: elasticsearch
+variant: es
+description: Build powerful search and RAG applications.
+links:
+  - { label: Solution overview, url: /solutions/elasticsearch }
+  - { label: Get started, url: /solutions/elasticsearch/get-started }
+aside:
+  label: Key features
+  links:
+    - { label: Vector search, url: /solutions/search/vector }
+    - { label: Semantic search, url: /solutions/search/semantic }
+:::
+```
+
+## Aside
+
+The optional `aside` adds a separator line and a small label + dot-separated inline link list. Use it for supplementary references that don't fit the primary link list (e.g. "Panel types", "Chart types", "Key features").
+
+## Errors
+
+The directive emits build errors when:
+
+- The body isn't valid YAML.
+- `title` is missing or empty.
diff --git a/docs/syntax/on-this-page.md b/docs/syntax/on-this-page.md
new file mode 100644
index 0000000000..1674608297
--- /dev/null
+++ b/docs/syntax/on-this-page.md
@@ -0,0 +1,25 @@
+# On this page
+
+Inline TOC chip. Auto-collects every [`{card-group}`](card-group.md) and [`{whats-new}`](whats-new.md) on the same page that has both an `id` and a `title`, and renders them as middle-dot-separated anchor links inside a single rounded panel.
+
+## Basic
+
+```markdown
+:::{on-this-page}
+:::
+```
+
+That's the whole directive — no options, no body. Drop it once on a hub page (typically right after the [`{hero}`](hero.md)) and it stays in sync as you add or remove sections.
+
+## How items are collected
+
+For each section directive on the page, an item is added to the chip when:
+
+- The directive declares an `id` (becomes the anchor — `#install`).
+- The directive declares a `title` (becomes the link label).
+
+`{card-group}`s with no `:title:` are skipped. `{whats-new}` panels populated from `config/whats-new.yml` get their `id` and `title` from that file; if the entry sets neither, the `{whats-new}` block is skipped.
+
+## Order
+
+Items appear in document order — top to bottom of the page.
diff --git a/docs/syntax/whats-new.md b/docs/syntax/whats-new.md
new file mode 100644
index 0000000000..e13a1c1b0b
--- /dev/null
+++ b/docs/syntax/whats-new.md
@@ -0,0 +1,60 @@
+# What's new
+
+A panel with a "New" badge, section title, optional release-notes link list on the right, and rows of recent highlights. Each row has a title, description, and right-aligned meta pill (e.g. `9.4 preview`, `Mar 2026`).
+
+## Centralized lookup (recommended)
+
+Edit content in one place — [`config/whats-new.yml`](../configure/site/products.md) — and any page can render a product's panel with a one-line directive:
+
+```markdown
+:::{whats-new}
+:product: kibana
+:::
+```
+
+`config/whats-new.yml` schema:
+
+```yaml
+products:
+  kibana:
+    title: What's new in Kibana
+    id: whats-new                     # used as the section anchor
+    badge: New                        # optional, default 'New'
+    release-links:
+      - { label: '9.4', url: /release-notes/kibana }
+      - { label: Serverless, url: /release-notes/serverless }
+    items:
+      - title: Dashboards APIs
+        description: Programmatically create and manage dashboards
+        link: /api/dashboards
+        meta: 9.4 preview
+      - title: AI agent skills
+        description: Teach AI coding agents to work with the Elastic stack
+        link: /ai/agent-skills
+        meta: Mar 2026
+```
+
+## Inline override
+
+If `:product:` is omitted, the directive expects the same schema as a YAML body. Useful when the page needs a one-off feed that doesn't belong in the central file:
+
+```markdown
+:::{whats-new}
+title: What's new in this release
+items:
+  - title: Custom feature A
+    description: Details
+    link: /feature-a
+    meta: 9.4
+:::
+```
+
+## Options
+
+| Option | Notes |
+|---|---|
+| `:product:` | Product key from `config/whats-new.yml`. When set, the body is ignored. |
+
+## Anchor
+
+`{whats-new}` registers its `id` as a section anchor — `{on-this-page}` automatically picks it up alongside `{card-group}` sections.

From 171b72ae3eee6174b5e7ad29c0aadc8762e21043 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 30 Apr 2026 22:14:30 +0200
Subject: [PATCH 18/56] feat(hubs): make hero title and description explicit
 options

The hero directive's body convention (first H1 = title, paragraphs =
description) was not intuitive. This commit replaces it with explicit
:title: (required) and :description: (inline markdown) options.

- HeroBlock parses :title: and :description: from options; the body is
  now ignored.
- HeroView renders <h1>@Title</h1> and <p>@DescriptionHtml</p> directly,
  no nested heading-wrapper. CSS targets .hub-hero-title h1 instead of
  .heading-wrapper.
- DescriptionHtml is rendered as inline markdown so links/bold/italic
  inside the description still work.
- MarkdownFile.cs falls back to the first {hero} block's :title: when no
  document H1 is present, preserving page-title detection.

Both hub markdowns are updated. The hero.md and hub-pages.md syntax
docs show the new shape.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/syntax/hero.md                           | 25 ++++++++++---------
 docs/syntax/hub-pages.md                      |  6 ++---
 docs/testing/products/elasticsearch/9.0.md    |  6 ++---
 docs/testing/products/kibana/9.0.md           |  6 ++---
 .../Assets/markdown/hub.css                   |  3 +--
 src/Elastic.Markdown/IO/MarkdownFile.cs       | 12 +++++++++
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |  6 +++++
 .../Myst/Directives/Hub/HeroBlock.cs          | 25 ++++++++++++-------
 .../Myst/Directives/Hub/HeroView.cshtml       |  6 ++++-
 .../Myst/Directives/Hub/HeroViewModel.cs      |  2 ++
 10 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/docs/syntax/hero.md b/docs/syntax/hero.md
index aebb94df8e..4c245b4c66 100644
--- a/docs/syntax/hero.md
+++ b/docs/syntax/hero.md
@@ -2,25 +2,27 @@
 
 A full-bleed hero band with a product icon, page title, description, fake search box, version dropdown, quick-action pills, and an optional release-status line. Designed for the [hub layout](hub-pages.md) but reusable on any page.
 
-## Basic hero
+All hero content is supplied via options. The directive body is not used.
+
+## Basic
 
 ```markdown
 :::{hero}
 :icon: kibana
+:title: Kibana
+:description: The UI for the Elasticsearch platform.
 :version: v9 / Serverless (current)
-
-# Kibana
-
-The UI for the Elasticsearch platform.
 :::
 ```
 
-The first H1 inside the body is the page title. Subsequent paragraphs render as the description below the title.
+The `:title:` option doubles as the page title (no body H1 needed). `:description:` supports inline markdown — links, bold, emphasis.
 
 ## Options
 
 | Option | Type | Notes |
 |---|---|---|
+| `:title:` | string | **Required.** Page heading shown next to the icon. Also picked up as the document's page title. |
+| `:description:` | inline markdown | One-line summary shown below the title. Supports bold, italics, and links. |
 | `:icon:` | string | Product key. Resolves to an inline SVG via the product-icon lookup. Known keys: `elasticsearch`, `kibana`, `observability`, `security`. Unknown keys fall back to a single-letter chip. |
 | `:version:` | string | Label inside the version chip (e.g. `v9 / Serverless (current)`). |
 | `:versions:` | comma list | When set, the chip becomes a `<details>` dropdown listing other versions. Items use `Label` (greyed, "soon") or `Label=URL` (clickable). |
@@ -33,10 +35,10 @@ The first H1 inside the body is the page title. Subsequent paragraphs render as
 ```markdown
 :::{hero}
 :icon: kibana
+:title: Kibana
+:description: The UI for the Elasticsearch platform.
 :version: v9 / Serverless (current)
 :versions: v8=https://www.elastic.co/docs/products/kibana/8.x,v7
-
-# Kibana
 :::
 ```
 
@@ -47,13 +49,12 @@ The first H1 inside the body is the page title. Subsequent paragraphs render as
 ```markdown
 :::{hero}
 :icon: elasticsearch
+:title: Elasticsearch
+:description: The distributed search and analytics engine.
 :version: v9 / Serverless (current)
 :quick-links: Install=/install,API reference=/api,Release notes=/release-notes
 :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026) · [Serverless deployed](/srn) Apr 1, 2026
-
-# Elasticsearch
-The distributed search and analytics engine.
 :::
 ```
 
-The `releases` option is inline markdown — it supports the same syntax as a single line of body markdown. Use `&#58;` for a literal colon when you don't want YAML to parse the value as a key/value pair.
+The `:releases:` option is inline markdown — same syntax as a single line of body markdown. Use `&#58;` for a literal colon when you don't want YAML to parse the value as a key/value pair.
diff --git a/docs/syntax/hub-pages.md b/docs/syntax/hub-pages.md
index 66465b6321..f4a405b5f9 100644
--- a/docs/syntax/hub-pages.md
+++ b/docs/syntax/hub-pages.md
@@ -32,14 +32,12 @@ layout: hub
 
 :::{hero}
 :icon: kibana
+:title: Kibana
+:description: The UI for the Elasticsearch platform.
 :version: v9 / Serverless (current)
 :versions: v8,v7
 :quick-links: Install=/install,Tutorial=/tutorial
 :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026)
-
-# Kibana
-
-The UI for the Elasticsearch platform.
 :::
 
 :::{on-this-page}
diff --git a/docs/testing/products/elasticsearch/9.0.md b/docs/testing/products/elasticsearch/9.0.md
index ecf192ba34..8c0caa1aca 100644
--- a/docs/testing/products/elasticsearch/9.0.md
+++ b/docs/testing/products/elasticsearch/9.0.md
@@ -4,14 +4,12 @@ layout: hub
 
 :::{hero}
 :icon: elasticsearch
+:title: Elasticsearch
+:description: The distributed search and analytics engine. Store, search, and analyze data at any scale, with vector search, AI toolkits, and a high-performance retrieval engine.
 :version: v9 / Serverless (current)
 :versions: v8,v7
 :quick-links: Install=https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch,Quick start=https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples,API reference=https://www.elastic.co/docs/api/doc/elasticsearch,Release notes=https://www.elastic.co/docs/release-notes/elasticsearch
 :releases: Latest&#58; [Stack 9.4.1](https://www.elastic.co/docs/release-notes/elasticsearch) (Mar 28, 2026) · [Serverless deployed](https://www.elastic.co/docs/release-notes/serverless) Apr 1, 2026
-
-# Elasticsearch
-
-The distributed search and analytics engine. Store, search, and analyze data at any scale, with vector search, AI toolkits, and a high-performance retrieval engine.
 :::
 
 :::{on-this-page}
diff --git a/docs/testing/products/kibana/9.0.md b/docs/testing/products/kibana/9.0.md
index 8d16f4d737..360edb2f7e 100644
--- a/docs/testing/products/kibana/9.0.md
+++ b/docs/testing/products/kibana/9.0.md
@@ -4,14 +4,12 @@ layout: hub
 
 :::{hero}
 :icon: kibana
+:title: Kibana
+:description: The UI for the Elasticsearch platform. Explore and visualize your data, build dashboards, set up alerts, automate tasks with AI, and use purpose-built solutions for Search, Observability, and Security.
 :version: v9 / Serverless (current)
 :versions: v8,v7
 :quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
 :releases: Latest&#58; [Stack 9.4.1](/release-notes/kibana) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
-
-# Kibana
-
-The UI for the Elasticsearch platform. Explore and visualize your data, build dashboards, set up alerts, automate tasks with AI, and use purpose-built solutions for Search, Observability, and Security.
 :::
 
 :::{on-this-page}
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index b2c65e46c5..453f5a09bc 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -50,10 +50,9 @@
 	.hub-hero .hub-hero-title {
 		display: contents;
 	}
-	.hub-hero .hub-hero-title .heading-wrapper {
+	.hub-hero .hub-hero-title h1 {
 		grid-column: 2;
 		grid-row: 1;
-		margin: 0;
 	}
 	.hub-hero .hub-hero-title p {
 		grid-column: 1 / -1;
diff --git a/src/Elastic.Markdown/IO/MarkdownFile.cs b/src/Elastic.Markdown/IO/MarkdownFile.cs
index 8fdb7835ce..e38d448879 100644
--- a/src/Elastic.Markdown/IO/MarkdownFile.cs
+++ b/src/Elastic.Markdown/IO/MarkdownFile.cs
@@ -166,6 +166,18 @@ protected void ReadDocumentInstructions(MarkdownDocument document, Func<string,
 				.GetData("header") as string ?? Title;
 		}
 
+		// Fall back to a {hero} directive's :title: option -- hero pages express
+		// the title declaratively rather than via a body H1.
+		if (Title == RelativePath)
+		{
+			var heroTitle = document
+				.Descendants<Elastic.Markdown.Myst.Directives.Hub.HeroBlock>()
+				.FirstOrDefault()?
+				.Title;
+			if (!string.IsNullOrWhiteSpace(heroTitle))
+				Title = heroTitle!;
+		}
+
 		var yamlFrontMatter = ProcessYamlFrontMatter(document);
 		YamlFrontMatter = yamlFrontMatter;
 		if (yamlFrontMatter.NavigationTitle is not null)
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 3e234c9072..68341d7069 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -357,11 +357,17 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 			? null
 			: RenderInlineMarkdown(block.Releases!);
 
+		var descriptionHtml = string.IsNullOrWhiteSpace(block.Description)
+			? null
+			: RenderInlineMarkdown(block.Description!);
+
 		var slice = HeroView.Create(new HeroViewModel
 		{
 			DirectiveBlock = block,
 			IconKey = block.Icon,
 			IconSvg = block.IconSvg,
+			Title = block.Title,
+			DescriptionHtml = descriptionHtml,
 			Version = block.Version,
 			ShowSearch = block.ShowSearch,
 			QuickLinks = block.QuickLinks,
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
index 529f8d8f4a..8787ad312f 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -2,24 +2,24 @@
 // Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
 // See the LICENSE file in the project root for more information
 
+using Elastic.Markdown.Diagnostics;
+
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
 /// <summary>
-/// Renders a full-bleed page hero with product icon, title (from inner H1),
-/// description, search box, version chip, quick-link pills, and an optional
-/// release-status line. Designed for landing-style pages such as product hubs.
+/// Renders a full-bleed page hero with product icon, title, description,
+/// search box, version chip, quick-link pills, and an optional release-status
+/// line. All content is supplied via options -- the body is unused.
 /// </summary>
 /// <example>
 /// <code>
 /// :::{hero}
 /// :icon: kibana
+/// :title: Kibana
+/// :description: The UI for the Elasticsearch platform.
 /// :version: v9 / Serverless (current)
-/// :quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
-/// :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026) · [Serverless deployed](/srn) Apr 1, 2026
-///
-/// # Kibana
-///
-/// The UI for the Elasticsearch platform.
+/// :quick-links: Install=/install,Tutorial=/tutorial
+/// :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026)
 /// :::
 /// </code>
 /// </example>
@@ -30,6 +30,8 @@ public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
 
 	public string? Icon { get; private set; }
 	public string? IconSvg { get; private set; }
+	public string? Title { get; private set; }
+	public string? Description { get; private set; }
 	public string? Version { get; private set; }
 	public bool ShowSearch { get; private set; }
 	public IReadOnlyList<HeroQuickLink> QuickLinks { get; private set; } = [];
@@ -40,6 +42,8 @@ public override void FinalizeAndValidate(ParserContext context)
 	{
 		Icon = Prop("icon");
 		IconSvg = ProductIcons.Get(Icon);
+		Title = Prop("title");
+		Description = Prop("description");
 		Version = Prop("version");
 		// search defaults to true; explicit ":search: false" hides it
 		ShowSearch = TryPropBool("search") ?? true;
@@ -48,6 +52,9 @@ public override void FinalizeAndValidate(ParserContext context)
 		OtherVersions = ParsePairs(Prop("versions"), allowEmptyUrl: true)
 			.Select(p => new HeroVersion(p.Label, p.Url)).ToList();
 		Releases = Prop("releases");
+
+		if (string.IsNullOrWhiteSpace(Title))
+			this.EmitError("{hero} requires a `:title:` option.");
 	}
 
 	private static IReadOnlyList<(string Label, string? Url)> ParsePairs(string? raw, bool allowEmptyUrl)
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index 3080d703fa..d25284d072 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -14,7 +14,11 @@
 				<span class="hub-hero-icon" aria-hidden="true">@Elastic.Markdown.Myst.Directives.Hub.ProductIcons.Initials(Model.IconKey)</span>
 			}
 			<div class="hub-hero-title">
-				@Model.RenderBlock()
+				<h1>@Model.Title</h1>
+				@if (!string.IsNullOrWhiteSpace(Model.DescriptionHtml))
+				{
+					<p>@(new HtmlString(Model.DescriptionHtml))</p>
+				}
 			</div>
 		</div>
 
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index 6f69430990..7c971bdd02 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -8,6 +8,8 @@ public class HeroViewModel : DirectiveViewModel
 {
 	public required string? IconKey { get; init; }
 	public required string? IconSvg { get; init; }
+	public required string? Title { get; init; }
+	public required string? DescriptionHtml { get; init; }
 	public required string? Version { get; init; }
 	public required bool ShowSearch { get; init; }
 	public required IReadOnlyList<HeroQuickLink> QuickLinks { get; init; }

From 9979af74ae52c724f009616d744ac5be390f8564 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 1 May 2026 10:46:37 +0200
Subject: [PATCH 19/56] fix(hubs): make Product hubs section an external link
 to the gist
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The assembler can't yet route through the V2 nav for our hub pages
(known limitation -- AssembleSources still wires file output via the V1
toc chain), so the previous in-repo page: references caused
'Could not find ... in navigation' errors during assembler builds.

Replace the section's internal /products/ URL + nested page references
with a single external URL pointing at the Kibana gist preview. The
secondary nav already renders any section whose URL starts with http
as an external link with the ↗ icon (see _SecondaryNav.cshtml).

Effect:
- Assembler build: 0 errors. Top-bar now shows 'Product hubs ↗'.
- Isolated build: unchanged. The real hub pages still render at
  /testing/products/{elasticsearch,kibana}/9.0/ in docs-builder's own
  meta-docs, which is how reviewers preview them today.

Once the V2 nav-wiring lands upstream, this will revert to internal
section + page references.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/navigation-v2.yml | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 8570c6c1fd..cd6b18f288 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -2871,20 +2871,13 @@ nav:
     children:
     - toc: docs-content://release-notes/intro
 
+  # Until hub pages are produced through the V1 navigation/toc chain so the
+  # assembler can resolve them, this section is an external link to the
+  # Kibana gist preview -- the visual reference for the prototype, with its
+  # own island-style nav and stubs already wired up.
+  # https://gist.github.com/florent-leborgne/c9075416b50ec111a09897b7be4462cc
   - section: Product hubs
-    url: /products/
-    children:
-    - label: Stack products
-      children:
-      - page: docs-builder://testing/products/elasticsearch/9.0.md
-      - page: docs-builder://testing/products/kibana/9.0.md
-      - title: Observability
-      - title: Security
-    - label: Deployment runbooks
-      children:
-      - title: Elastic Cloud Hosted
-      - title: Elastic Cloud Serverless
-      - title: Self-managed
+    url: https://htmlpreview.github.io/?https://gist.github.com/florent-leborgne/c9075416b50ec111a09897b7be4462cc/raw/kibana-hub.html
 
   - section: Extension points
     url: /extend/

From 35aa23b60f3011a27b63f3c457ceeb098e9fd6a0 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 1 May 2026 11:35:28 +0200
Subject: [PATCH 20/56] feat(hubs): redesign product badges as
 inline-with-title pills

Old badges were small underlined pills above the H1 with default <li>
bullets leaking through and ambiguous semantics ('Applies to' clashed
with the existing applies_to lifecycle/version system).

New design:
- Sit inline with the page H1 (.page-title-row flex container, align
  baseline + translateY(-0.45em) to land at the H1 x-height).
- Per pill: brand-color accent dot, product name, right-arrow chevron
  that slides on hover.
- Hover state: border picks up the brand color, faint background tint,
  arrow color and position shift -- reads clearly as 'click to navigate
  there'.
- No more SVG product icons in the chip (Elasticsearch tricolor read
  like a tiny flag at 14px). The accent dot carries the identity at
  any size.

Per-product accents reuse the solution-card brand colors:
elasticsearch=#FEC514, kibana=#F04E98, observability=#0077CC,
security=#00BFB3.

The hub-pages syntax doc now declares products: [elasticsearch, kibana]
in its frontmatter so the new rendering is visible in the docs-builder
docs build.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/syntax/hub-pages.md                      |   6 +
 .../Assets/markdown/hub.css                   | 120 ++++++++++++++++--
 src/Elastic.Markdown/Page/Index.cshtml        |   8 +-
 .../Page/ProductBadges.cshtml                 |  14 +-
 4 files changed, 129 insertions(+), 19 deletions(-)

diff --git a/docs/syntax/hub-pages.md b/docs/syntax/hub-pages.md
index f4a405b5f9..71d3a9aaee 100644
--- a/docs/syntax/hub-pages.md
+++ b/docs/syntax/hub-pages.md
@@ -1,3 +1,9 @@
+---
+products:
+  - id: elasticsearch
+  - id: kibana
+---
+
 # Hub pages
 
 Hub pages are product-scoped landing pages — a 360° overview of one product across versions, deployment types, and surfaces. They're enabled by setting `layout: hub` in the page's frontmatter and composed from a small set of dedicated directives.
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 453f5a09bc..eadafc1468 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -653,24 +653,122 @@
 		border-left-color: #00bfb3;
 	}
 
-	/* Product badges shown above the H1 of a regular page. */
-	.product-badges {
-		@apply mb-3 flex list-none flex-wrap gap-2 p-0;
+	/* Page title row -- wraps the H1 and the product badges so they sit
+	   on the same baseline when there's room and stack on narrow screens. */
+	.page-title-row {
+		display: flex;
+		align-items: baseline;
+		flex-wrap: wrap;
+		gap: 8px 14px;
+		margin-bottom: 0.5em;
 	}
-	.product-badges li {
-		@apply m-0 p-0;
+	.page-title-row > .heading-wrapper,
+	.page-title-row > h1 {
+		margin-bottom: 0;
+	}
+
+	/* Product badges -- the inline-with-title pills that point at the
+	   matching product hub. Each pill has the product's accent dot, the
+	   product name, and a right-arrow chevron to read as clickable.
+	   The translateY offset lifts the pill so it sits at the H1's
+	   x-height rather than below its baseline. */
+	.product-badges {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		align-items: center;
+		margin: 0;
+		padding: 0;
+		transform: translateY(-0.45em);
 	}
+
 	.product-badge {
-		@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold tracking-wide no-underline;
-		background: var(--color-grey-10);
-		color: var(--color-ink-light);
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+		padding: 3px 10px;
+		border-radius: 999px;
+		background: var(--color-white);
 		border: 1px solid var(--color-grey-20);
+		color: var(--color-ink-dark);
+		font-size: 12px;
+		font-weight: 500;
+		text-decoration: none;
+		line-height: 1.2;
+		transition:
+			border-color 0.15s ease,
+			background-color 0.15s ease,
+			color 0.15s ease,
+			box-shadow 0.15s ease,
+			transform 0.15s ease;
 	}
 	.product-badge:hover {
-		background: var(--color-blue-elastic-10);
-		color: var(--color-blue-elastic-100);
-		border-color: var(--color-blue-elastic);
 		text-decoration: none;
+		color: var(--color-ink-dark);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
+		transform: translateY(-1px);
+	}
+	.product-badge:focus-visible {
+		outline: 2px solid var(--color-blue-elastic);
+		outline-offset: 2px;
+	}
+
+	/* Brand-color dot leading the pill. Every product gets its accent
+	   here -- recognizable at any size, no logo distortion. */
+	.product-badge-dot {
+		display: inline-block;
+		width: 7px;
+		height: 7px;
+		border-radius: 999px;
+		background: var(--color-grey-40);
+		flex-shrink: 0;
+	}
+	.product-badge-label {
+		display: inline-block;
+		white-space: nowrap;
+	}
+	.product-badge-arrow {
+		flex-shrink: 0;
+		color: var(--color-grey-40);
+		transition:
+			transform 0.15s ease,
+			color 0.15s ease;
+		margin-left: 1px;
+	}
+	.product-badge:hover .product-badge-arrow {
+		color: var(--color-ink-light);
+		transform: translateX(2px);
+	}
+
+	/* Per-product accents -- dot color, hover border, hover background tint.
+	   Brand colors mirror the solution-card border-left accents. */
+	.product-badge-elasticsearch .product-badge-dot {
+		background: #fec514;
+	}
+	.product-badge-elasticsearch:hover {
+		border-color: #fec514;
+		background: rgb(254 197 20 / 0.06);
+	}
+	.product-badge-kibana .product-badge-dot {
+		background: #f04e98;
+	}
+	.product-badge-kibana:hover {
+		border-color: #f04e98;
+		background: rgb(240 78 152 / 0.05);
+	}
+	.product-badge-observability .product-badge-dot {
+		background: #0077cc;
+	}
+	.product-badge-observability:hover {
+		border-color: #0077cc;
+		background: rgb(0 119 204 / 0.05);
+	}
+	.product-badge-security .product-badge-dot {
+		background: #00bfb3;
+	}
+	.product-badge-security:hover {
+		border-color: #00bfb3;
+		background: rgb(0 191 179 / 0.06);
 	}
 
 	@media (max-width: 768px) {
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index d1ad409c34..ecb424eb54 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -92,9 +92,11 @@
 <section id="elastic-docs-v3">
 	@if (Model.CurrentDocument.YamlFrontMatter?.Layout != MarkdownPageLayout.Hub)
 	{
-		@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
-		@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
-		@await RenderPartialAsync(ProductBadges.Create(Model))
+		<div class="page-title-row">
+			@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
+			@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
+			@await RenderPartialAsync(ProductBadges.Create(Model))
+		</div>
 		@if (Model.AppliesTo is not null)
 		{
 			<p class="applies applies-block">
diff --git a/src/Elastic.Markdown/Page/ProductBadges.cshtml b/src/Elastic.Markdown/Page/ProductBadges.cshtml
index bc3066f2f1..0068712950 100644
--- a/src/Elastic.Markdown/Page/ProductBadges.cshtml
+++ b/src/Elastic.Markdown/Page/ProductBadges.cshtml
@@ -13,12 +13,16 @@
 }
 @if (withHubs.Count > 0)
 {
-	<ul class="product-badges" aria-label="Related product hubs">
+	<div class="product-badges" role="navigation" aria-label="Product hubs related to this page">
 		@foreach (var product in withHubs)
 		{
-			<li>
-				<a class="product-badge" href="@($"{prefix}/{product.Hub!.Trim('/')}/")">@product.DisplayName</a>
-			</li>
+			<a class="product-badge product-badge-@product.Id" href="@($"{prefix}/{product.Hub!.Trim('/')}/")">
+				<span class="product-badge-dot" aria-hidden="true"></span>
+				<span class="product-badge-label">@product.DisplayName</span>
+				<svg class="product-badge-arrow" width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M5 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</a>
 		}
-	</ul>
+	</div>
 }

From 44810515918174866563db300eca0636be2d2791 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 1 May 2026 12:44:57 +0200
Subject: [PATCH 21/56] feat(hubs): point product badge URLs at the gist
 previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Until hub pages render through the assembler, product badges now link
to the rendered gist previews (htmlpreview.github.io). The gists are
the visual reference for the prototype anyway, so badges land on a
representative page even when the assembler can't yet wire in our own
hub markdown.

ProductBadges.cshtml detects absolute URLs (http(s)://) and:
- Opens them in a new tab (target=_blank rel=noopener)
- Renders an external-link arrow (↗) instead of the chevron
- Otherwise keeps the existing internal-pill rendering

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/products.yml                           |  4 +--
 .../Assets/markdown/hub.css                   | 27 ++++---------------
 src/Elastic.Markdown/Page/Index.cshtml        |  8 +++---
 .../Page/ProductBadges.cshtml                 | 24 ++++++++++++++---
 4 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/config/products.yml b/config/products.yml
index 7c0068ca81..da1fcb230a 100644
--- a/config/products.yml
+++ b/config/products.yml
@@ -147,7 +147,7 @@ products:
   elasticsearch:
     display: 'Elasticsearch'
     versioning: 'stack'
-    hub: 'testing/products/elasticsearch/9.0'
+    hub: 'https://htmlpreview.github.io/?https://gist.github.com/florent-leborgne/b2ddb83d7b849980d1668aef600d0139/raw/elasticsearch-hub.html'
   elasticsearch-client:
     display: 'Elasticsearch Client'
     versioning: 'stack'
@@ -208,7 +208,7 @@ products:
   kibana:
     display: 'Kibana'
     versioning: 'stack'
-    hub: 'testing/products/kibana/9.0'
+    hub: 'https://htmlpreview.github.io/?https://gist.github.com/florent-leborgne/c9075416b50ec111a09897b7be4462cc/raw/kibana-hub.html'
   logstash:
     display: 'Logstash'
     versioning: 'stack'
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index eadafc1468..fad8a53880 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -653,33 +653,16 @@
 		border-left-color: #00bfb3;
 	}
 
-	/* Page title row -- wraps the H1 and the product badges so they sit
-	   on the same baseline when there's room and stack on narrow screens. */
-	.page-title-row {
-		display: flex;
-		align-items: baseline;
-		flex-wrap: wrap;
-		gap: 8px 14px;
-		margin-bottom: 0.5em;
-	}
-	.page-title-row > .heading-wrapper,
-	.page-title-row > h1 {
-		margin-bottom: 0;
-	}
-
-	/* Product badges -- the inline-with-title pills that point at the
-	   matching product hub. Each pill has the product's accent dot, the
-	   product name, and a right-arrow chevron to read as clickable.
-	   The translateY offset lifts the pill so it sits at the H1's
-	   x-height rather than below its baseline. */
+	/* Product badges -- shown as a small meta strip between the
+	   breadcrumb and the H1. The negative top margin pulls the strip
+	   up tight against the breadcrumb's bottom padding (py-6 there). */
 	.product-badges {
-		display: inline-flex;
+		display: flex;
 		flex-wrap: wrap;
 		gap: 6px;
 		align-items: center;
-		margin: 0;
+		margin: -16px 0 14px 0;
 		padding: 0;
-		transform: translateY(-0.45em);
 	}
 
 	.product-badge {
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index ecb424eb54..0f9a650c4f 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -92,11 +92,9 @@
 <section id="elastic-docs-v3">
 	@if (Model.CurrentDocument.YamlFrontMatter?.Layout != MarkdownPageLayout.Hub)
 	{
-		<div class="page-title-row">
-			@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
-			@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
-			@await RenderPartialAsync(ProductBadges.Create(Model))
-		</div>
+		@await RenderPartialAsync(ProductBadges.Create(Model))
+		@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
+		@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
 		@if (Model.AppliesTo is not null)
 		{
 			<p class="applies applies-block">
diff --git a/src/Elastic.Markdown/Page/ProductBadges.cshtml b/src/Elastic.Markdown/Page/ProductBadges.cshtml
index 0068712950..1e0c972f16 100644
--- a/src/Elastic.Markdown/Page/ProductBadges.cshtml
+++ b/src/Elastic.Markdown/Page/ProductBadges.cshtml
@@ -16,12 +16,28 @@
 	<div class="product-badges" role="navigation" aria-label="Product hubs related to this page">
 		@foreach (var product in withHubs)
 		{
-			<a class="product-badge product-badge-@product.Id" href="@($"{prefix}/{product.Hub!.Trim('/')}/")">
+			var hub = product.Hub!;
+			var isExternal = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
+				|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
+			var href = isExternal ? hub : $"{prefix}/{hub.Trim('/')}/";
+			<a class="product-badge product-badge-@product.Id"
+				href="@href"
+				@(isExternal ? new HtmlString("target=\"_blank\" rel=\"noopener\"") : HtmlString.Empty)>
 				<span class="product-badge-dot" aria-hidden="true"></span>
 				<span class="product-badge-label">@product.DisplayName</span>
-				<svg class="product-badge-arrow" width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-					<path d="M5 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-				</svg>
+				@if (isExternal)
+				{
+					<svg class="product-badge-arrow" width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+						<path d="M8.75 1a.75.75 0 0 0 0 1.5h3.69L6.72 8.22a.75.75 0 0 0 1.06 1.06l5.72-5.72v3.69a.75.75 0 0 0 1.5 0v-5.5a.75.75 0 0 0-.75-.75h-5.5Z"/>
+						<path d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10a.75.75 0 0 0-1.5 0v2.5h-8v-8H6A.75.75 0 0 0 6 3H3.5Z"/>
+					</svg>
+				}
+				else
+				{
+					<svg class="product-badge-arrow" width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<path d="M5 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+					</svg>
+				}
 			</a>
 		}
 	</div>

From 39fb863387b2c43f875dbf8b492a1f61379c6b2f Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 1 May 2026 15:06:58 +0200
Subject: [PATCH 22/56] =?UTF-8?q?Rename=20hub=20markdown=209.0.md=20?=
 =?UTF-8?q?=E2=86=92=20v9.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligns with the v9/v8 URL convention (v9+ is cumulative for v9 minors and
Serverless; older majors are only worth a single 8.19 / 7.17 entry).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/_docset.yml                                      | 4 ++--
 docs/testing/products/elasticsearch/{9.0.md => v9.md} | 0
 docs/testing/products/kibana/{9.0.md => v9.md}        | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename docs/testing/products/elasticsearch/{9.0.md => v9.md} (100%)
 rename docs/testing/products/kibana/{9.0.md => v9.md} (100%)

diff --git a/docs/_docset.yml b/docs/_docset.yml
index bd2d6c9980..d3a1f2db56 100644
--- a/docs/_docset.yml
+++ b/docs/_docset.yml
@@ -243,10 +243,10 @@ toc:
         children:
           - folder: elasticsearch
             children:
-              - file: 9.0.md
+              - file: v9.md
           - folder: kibana
             children:
-              - file: 9.0.md
+              - file: v9.md
       - file: kibana-settings-yaml-samples.md
       - file: security-settings.md
       - file: req.md
diff --git a/docs/testing/products/elasticsearch/9.0.md b/docs/testing/products/elasticsearch/v9.md
similarity index 100%
rename from docs/testing/products/elasticsearch/9.0.md
rename to docs/testing/products/elasticsearch/v9.md
diff --git a/docs/testing/products/kibana/9.0.md b/docs/testing/products/kibana/v9.md
similarity index 100%
rename from docs/testing/products/kibana/9.0.md
rename to docs/testing/products/kibana/v9.md

From 57ea08ed9827dc08b539b0e48c52fd361dbd9f6d Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 1 May 2026 15:21:17 +0200
Subject: [PATCH 23/56] Replace page-top product badges + applies-block with a
 metadata box

A single white card with a thin grey outline sits below the H1 and renders
up to four labeled rows, hidden when empty:

- Stack products: hub pills for products with `hub:` set in products.yml.
- Stack versions: applies_to.stack badges, plus applies_to.serverless when
  no deployment is specified.
- Deployments: applies_to.deployment badges, plus applies_to.serverless
  when a deployment is specified (so serverless lands in only one row).
- Other products: applies_to.product and per-component applicabilities
  (EDOT, APM agents, ECCTL, etc.).

Three new ApplicabilityBadgePlacement values drive the row-specific
collection logic; the existing renderer handles the rest. The hub layout
opts out via the Layout frontmatter check, same as before.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Assets/markdown/hub.css                   | 101 -------------
 .../Assets/markdown/metadata-box.css          | 134 ++++++++++++++++++
 .../Assets/styles.css                         |   1 +
 .../Myst/Components/ApplicableToViewModel.cs  |  60 +++++++-
 src/Elastic.Markdown/Page/Index.cshtml        |  13 +-
 src/Elastic.Markdown/Page/MetadataBox.cshtml  |  97 +++++++++++++
 .../Page/ProductBadges.cshtml                 |  44 ------
 7 files changed, 292 insertions(+), 158 deletions(-)
 create mode 100644 src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
 create mode 100644 src/Elastic.Markdown/Page/MetadataBox.cshtml
 delete mode 100644 src/Elastic.Markdown/Page/ProductBadges.cshtml

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index fad8a53880..8ea07978b8 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -653,107 +653,6 @@
 		border-left-color: #00bfb3;
 	}
 
-	/* Product badges -- shown as a small meta strip between the
-	   breadcrumb and the H1. The negative top margin pulls the strip
-	   up tight against the breadcrumb's bottom padding (py-6 there). */
-	.product-badges {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px;
-		align-items: center;
-		margin: -16px 0 14px 0;
-		padding: 0;
-	}
-
-	.product-badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 7px;
-		padding: 3px 10px;
-		border-radius: 999px;
-		background: var(--color-white);
-		border: 1px solid var(--color-grey-20);
-		color: var(--color-ink-dark);
-		font-size: 12px;
-		font-weight: 500;
-		text-decoration: none;
-		line-height: 1.2;
-		transition:
-			border-color 0.15s ease,
-			background-color 0.15s ease,
-			color 0.15s ease,
-			box-shadow 0.15s ease,
-			transform 0.15s ease;
-	}
-	.product-badge:hover {
-		text-decoration: none;
-		color: var(--color-ink-dark);
-		box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
-		transform: translateY(-1px);
-	}
-	.product-badge:focus-visible {
-		outline: 2px solid var(--color-blue-elastic);
-		outline-offset: 2px;
-	}
-
-	/* Brand-color dot leading the pill. Every product gets its accent
-	   here -- recognizable at any size, no logo distortion. */
-	.product-badge-dot {
-		display: inline-block;
-		width: 7px;
-		height: 7px;
-		border-radius: 999px;
-		background: var(--color-grey-40);
-		flex-shrink: 0;
-	}
-	.product-badge-label {
-		display: inline-block;
-		white-space: nowrap;
-	}
-	.product-badge-arrow {
-		flex-shrink: 0;
-		color: var(--color-grey-40);
-		transition:
-			transform 0.15s ease,
-			color 0.15s ease;
-		margin-left: 1px;
-	}
-	.product-badge:hover .product-badge-arrow {
-		color: var(--color-ink-light);
-		transform: translateX(2px);
-	}
-
-	/* Per-product accents -- dot color, hover border, hover background tint.
-	   Brand colors mirror the solution-card border-left accents. */
-	.product-badge-elasticsearch .product-badge-dot {
-		background: #fec514;
-	}
-	.product-badge-elasticsearch:hover {
-		border-color: #fec514;
-		background: rgb(254 197 20 / 0.06);
-	}
-	.product-badge-kibana .product-badge-dot {
-		background: #f04e98;
-	}
-	.product-badge-kibana:hover {
-		border-color: #f04e98;
-		background: rgb(240 78 152 / 0.05);
-	}
-	.product-badge-observability .product-badge-dot {
-		background: #0077cc;
-	}
-	.product-badge-observability:hover {
-		border-color: #0077cc;
-		background: rgb(0 119 204 / 0.05);
-	}
-	.product-badge-security .product-badge-dot {
-		background: #00bfb3;
-	}
-	.product-badge-security:hover {
-		border-color: #00bfb3;
-		background: rgb(0 191 179 / 0.06);
-	}
-
 	@media (max-width: 768px) {
 		.hub-hero h1 {
 			font-size: 2rem;
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css b/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
new file mode 100644
index 0000000000..c460c4926c
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
@@ -0,0 +1,134 @@
+/*
+ * Page-top metadata box. Sits below the H1 and above the body content.
+ * Up to four labeled rows: Stack products / Stack versions / Deployments /
+ * Other products. Hidden when no row has content. Hub layout opts out
+ * (the partial returns early when YamlFrontMatter.Layout is set).
+ */
+
+@layer components {
+	.metadata-box {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		margin: 0 0 24px 0;
+		padding: 10px 14px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 6px;
+		font-size: 13px;
+		line-height: 1.4;
+	}
+
+	.metadata-row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px 10px;
+		min-height: 24px;
+	}
+
+	.metadata-label {
+		flex: 0 0 auto;
+		min-width: 110px;
+		font-weight: 600;
+		color: var(--color-ink-dark);
+	}
+
+	.metadata-values {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px;
+		min-width: 0;
+	}
+
+	@media (max-width: 640px) {
+		.metadata-row {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 4px;
+		}
+		.metadata-label {
+			min-width: 0;
+		}
+	}
+
+	/*
+	 * Product hub pills (used in the "Stack products" row of the metadata
+	 * box, and reusable elsewhere). Each pill is a brand-color dot + the
+	 * product display name.
+	 */
+	.product-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+		padding: 2px 10px;
+		border-radius: 999px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		color: var(--color-ink-dark);
+		font-size: 12px;
+		font-weight: 500;
+		text-decoration: none;
+		line-height: 1.3;
+		transition:
+			border-color 0.15s ease,
+			background-color 0.15s ease,
+			color 0.15s ease,
+			box-shadow 0.15s ease,
+			transform 0.15s ease;
+	}
+	.product-badge:hover {
+		text-decoration: none;
+		color: var(--color-ink-dark);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
+		transform: translateY(-1px);
+	}
+	.product-badge:focus-visible {
+		outline: 2px solid var(--color-blue-elastic);
+		outline-offset: 2px;
+	}
+
+	.product-badge-dot {
+		display: inline-block;
+		width: 7px;
+		height: 7px;
+		border-radius: 999px;
+		background: var(--color-grey-40);
+		flex-shrink: 0;
+	}
+	.product-badge-label {
+		display: inline-block;
+		white-space: nowrap;
+	}
+
+	/* Per-product accents -- mirrors hub solution-card border colors. */
+	.product-badge-elasticsearch .product-badge-dot {
+		background: #fec514;
+	}
+	.product-badge-elasticsearch:hover {
+		border-color: #fec514;
+		background: rgb(254 197 20 / 0.06);
+	}
+	.product-badge-kibana .product-badge-dot {
+		background: #f04e98;
+	}
+	.product-badge-kibana:hover {
+		border-color: #f04e98;
+		background: rgb(240 78 152 / 0.05);
+	}
+	.product-badge-observability .product-badge-dot {
+		background: #0077cc;
+	}
+	.product-badge-observability:hover {
+		border-color: #0077cc;
+		background: rgb(0 119 204 / 0.05);
+	}
+	.product-badge-security .product-badge-dot {
+		background: #00bfb3;
+	}
+	.product-badge-security:hover {
+		border-color: #00bfb3;
+		background: rgb(0 191 179 / 0.06);
+	}
+}
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index 6ce8ef6141..e3f115e1d8 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -28,6 +28,7 @@
 @import './markdown/button.css';
 @import './markdown/agent-skill.css';
 @import './markdown/hub.css';
+@import './markdown/metadata-box.css';
 @import './markdown/contributors.css';
 @import './api-docs.css';
 @import 'tippy.js/dist/tippy.css';
diff --git a/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs b/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
index 82afa2ce5f..7dffae80ea 100644
--- a/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
@@ -16,7 +16,13 @@ public enum ApplicabilityBadgePlacement
 	/// <summary>Elastic Stack (and generic product) availability next to the setting name.</summary>
 	StackRow,
 	/// <summary>Deployment, serverless, and product-specific agents on a &quot;Supported on&quot; line.</summary>
-	SupportedOnRow
+	SupportedOnRow,
+	/// <summary>Stack versions row of the page-top metadata box: <c>applies_to.stack</c> + <c>applies_to.serverless</c> when no deployment is specified.</summary>
+	StackVersionsRow,
+	/// <summary>Deployments row of the page-top metadata box: <c>applies_to.deployment</c> + <c>applies_to.serverless</c> when a deployment is specified.</summary>
+	DeploymentsRow,
+	/// <summary>Other products row of the page-top metadata box: <c>applies_to.product</c> and per-product applicabilities (agents, EDOT, etc.).</summary>
+	OtherProductsRow
 }
 
 public class ApplicableToViewModel
@@ -79,6 +85,9 @@ public IReadOnlyCollection<ApplicabilityItem> GetApplicabilityItems()
 		{
 			ApplicabilityBadgePlacement.StackRow => CollectStackRowRaw(),
 			ApplicabilityBadgePlacement.SupportedOnRow => CollectSupportedOnRaw(),
+			ApplicabilityBadgePlacement.StackVersionsRow => CollectStackVersionsRowRaw(),
+			ApplicabilityBadgePlacement.DeploymentsRow => CollectDeploymentsRowRaw(),
+			ApplicabilityBadgePlacement.OtherProductsRow => CollectOtherProductsRowRaw(),
 			_ => CollectCombinedRaw()
 		};
 
@@ -154,6 +163,55 @@ AppliesTo.Serverless is null &&
 			.ToList();
 	}
 
+	private List<RawApplicabilityItem> CollectStackVersionsRowRaw()
+	{
+		var rawItems = new List<RawApplicabilityItem>();
+
+		if (AppliesTo.Stack is not null)
+			rawItems.AddRange(CollectFromCollection(AppliesTo.Stack, ApplicabilityMappings.Stack));
+
+		if (AppliesTo.Deployment is null && AppliesTo.Serverless is not null)
+		{
+			rawItems.AddRange(AppliesTo.Serverless.AllProjects is not null
+				? CollectFromCollection(AppliesTo.Serverless.AllProjects, ApplicabilityMappings.Serverless)
+				: CollectFromMappings(AppliesTo.Serverless, ServerlessMappings));
+		}
+
+		return rawItems;
+	}
+
+	private List<RawApplicabilityItem> CollectDeploymentsRowRaw()
+	{
+		var rawItems = new List<RawApplicabilityItem>();
+
+		if (AppliesTo.Deployment is not null)
+		{
+			rawItems.AddRange(CollectFromMappings(AppliesTo.Deployment, DeploymentMappings));
+
+			if (AppliesTo.Serverless is not null)
+			{
+				rawItems.AddRange(AppliesTo.Serverless.AllProjects is not null
+					? CollectFromCollection(AppliesTo.Serverless.AllProjects, ApplicabilityMappings.Serverless)
+					: CollectFromMappings(AppliesTo.Serverless, ServerlessMappings));
+			}
+		}
+
+		return rawItems;
+	}
+
+	private List<RawApplicabilityItem> CollectOtherProductsRowRaw()
+	{
+		var rawItems = new List<RawApplicabilityItem>();
+
+		if (AppliesTo.ProductApplicability is not null)
+			rawItems.AddRange(CollectFromMappings(AppliesTo.ProductApplicability, ProductMappings));
+
+		if (AppliesTo.Product is not null)
+			rawItems.AddRange(CollectFromCollection(AppliesTo.Product, ApplicabilityMappings.Product));
+
+		return rawItems;
+	}
+
 	private static bool IsGenericGa(AppliesCollection collection)
 	{
 		if (collection.Count != 1)
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index 0f9a650c4f..70ca017a50 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -92,20 +92,9 @@
 <section id="elastic-docs-v3">
 	@if (Model.CurrentDocument.YamlFrontMatter?.Layout != MarkdownPageLayout.Hub)
 	{
-		@await RenderPartialAsync(ProductBadges.Create(Model))
 		@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
 		@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
-		@if (Model.AppliesTo is not null)
-		{
-			<p class="applies applies-block">
-			@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
-			{
-				AppliesTo = Model.AppliesTo,
-				Inline = false,
-				VersionsConfig = Model.VersionsConfig
-			}))
-			</p>
-		}
+		@await RenderPartialAsync(MetadataBox.Create(Model))
 	}
 	@(new HtmlString(Model.MarkdownHtml))
 </section>
diff --git a/src/Elastic.Markdown/Page/MetadataBox.cshtml b/src/Elastic.Markdown/Page/MetadataBox.cshtml
new file mode 100644
index 0000000000..02b5b3107e
--- /dev/null
+++ b/src/Elastic.Markdown/Page/MetadataBox.cshtml
@@ -0,0 +1,97 @@
+@inherits RazorSlice<Elastic.Markdown.Page.IndexViewModel>
+@using Elastic.Markdown.Myst.Components
+@{
+	var layout = Model.CurrentDocument.YamlFrontMatter?.Layout;
+	if (layout is not null)
+		return;
+
+	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
+	var productHubs = Model.Products
+		.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
+		.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
+		.ToList();
+
+	var hasStackVersions = false;
+	var hasDeployments = false;
+	var hasOtherProducts = false;
+	if (Model.AppliesTo is not null)
+	{
+		hasStackVersions = Model.AppliesTo.Stack is not null
+			|| (Model.AppliesTo.Deployment is null && Model.AppliesTo.Serverless is not null);
+		hasDeployments = Model.AppliesTo.Deployment is not null;
+		hasOtherProducts = Model.AppliesTo.ProductApplicability is not null
+			|| Model.AppliesTo.Product is not null;
+	}
+
+	var hasProducts = productHubs.Count > 0;
+	if (!hasProducts && !hasStackVersions && !hasDeployments && !hasOtherProducts)
+		return;
+}
+<aside class="metadata-box" aria-label="Page metadata">
+	@if (hasProducts)
+	{
+		<div class="metadata-row metadata-row-products">
+			<span class="metadata-label">Stack products</span>
+			<div class="metadata-values">
+				@foreach (var product in productHubs)
+				{
+					var hub = product.Hub!;
+					var isExternal = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
+						|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
+					var href = isExternal ? hub : $"{prefix}/{hub.Trim('/')}/";
+					<a class="product-badge product-badge-@product.Id"
+						href="@href"
+						@(isExternal ? new HtmlString("target=\"_blank\" rel=\"noopener\"") : HtmlString.Empty)>
+						<span class="product-badge-dot" aria-hidden="true"></span>
+						<span class="product-badge-label">@product.DisplayName</span>
+					</a>
+				}
+			</div>
+		</div>
+	}
+	@if (hasStackVersions)
+	{
+		<div class="metadata-row metadata-row-versions">
+			<span class="metadata-label">Stack versions</span>
+			<div class="metadata-values">
+				@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+				{
+					AppliesTo = Model.AppliesTo!,
+					Inline = true,
+					VersionsConfig = Model.VersionsConfig,
+					BadgePlacement = ApplicabilityBadgePlacement.StackVersionsRow
+				}))
+			</div>
+		</div>
+	}
+	@if (hasDeployments)
+	{
+		<div class="metadata-row metadata-row-deployments">
+			<span class="metadata-label">Deployments</span>
+			<div class="metadata-values">
+				@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+				{
+					AppliesTo = Model.AppliesTo!,
+					Inline = true,
+					VersionsConfig = Model.VersionsConfig,
+					BadgePlacement = ApplicabilityBadgePlacement.DeploymentsRow
+				}))
+			</div>
+		</div>
+	}
+	@if (hasOtherProducts)
+	{
+		<div class="metadata-row metadata-row-other-products">
+			<span class="metadata-label">Other products</span>
+			<div class="metadata-values">
+				@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+				{
+					AppliesTo = Model.AppliesTo!,
+					Inline = true,
+					VersionsConfig = Model.VersionsConfig,
+					BadgePlacement = ApplicabilityBadgePlacement.OtherProductsRow
+				}))
+			</div>
+		</div>
+	}
+</aside>
diff --git a/src/Elastic.Markdown/Page/ProductBadges.cshtml b/src/Elastic.Markdown/Page/ProductBadges.cshtml
deleted file mode 100644
index 1e0c972f16..0000000000
--- a/src/Elastic.Markdown/Page/ProductBadges.cshtml
+++ /dev/null
@@ -1,44 +0,0 @@
-@inherits RazorSlice<Elastic.Markdown.Page.IndexViewModel>
-@{
-	// Hide on layouts that own the page chrome themselves (hub, landing, archive, search).
-	var layout = Model.CurrentDocument.YamlFrontMatter?.Layout;
-	var skip = layout is not null;
-	var withHubs = skip
-		? []
-		: Model.Products
-			.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
-			.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
-			.ToList();
-	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
-}
-@if (withHubs.Count > 0)
-{
-	<div class="product-badges" role="navigation" aria-label="Product hubs related to this page">
-		@foreach (var product in withHubs)
-		{
-			var hub = product.Hub!;
-			var isExternal = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
-				|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
-			var href = isExternal ? hub : $"{prefix}/{hub.Trim('/')}/";
-			<a class="product-badge product-badge-@product.Id"
-				href="@href"
-				@(isExternal ? new HtmlString("target=\"_blank\" rel=\"noopener\"") : HtmlString.Empty)>
-				<span class="product-badge-dot" aria-hidden="true"></span>
-				<span class="product-badge-label">@product.DisplayName</span>
-				@if (isExternal)
-				{
-					<svg class="product-badge-arrow" width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-						<path d="M8.75 1a.75.75 0 0 0 0 1.5h3.69L6.72 8.22a.75.75 0 0 0 1.06 1.06l5.72-5.72v3.69a.75.75 0 0 0 1.5 0v-5.5a.75.75 0 0 0-.75-.75h-5.5Z"/>
-						<path d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10a.75.75 0 0 0-1.5 0v2.5h-8v-8H6A.75.75 0 0 0 6 3H3.5Z"/>
-					</svg>
-				}
-				else
-				{
-					<svg class="product-badge-arrow" width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-						<path d="M5 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-					</svg>
-				}
-			</a>
-		}
-	</div>
-}

From d0c449715648d2c98186a0adbcbed88962f2fe3c Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 1 May 2026 16:44:41 +0200
Subject: [PATCH 24/56] Restructure page-top metadata: product pills above H1,
 Requirements box below
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous metadata box mixed product pills (navigation) with applies_to
badges (metadata) in one container, which conflated two distinct concerns.
Splitting them gives each a clear role:

- ProductPills.cshtml renders the brand-dotted hub pills above the H1,
  styled as nav affordances (dark-grey label, → arrow, no link underline).
- MetadataBox.cshtml renders applies_to data below the H1 in a collapsible
  "Requirements" box (Versions / Deployments / Subscription rows). The
  Subscription row is a placeholder ("Enterprise") until that metadata
  exists. Multiple values within a row are separated by an italic "or".
- A thin divider sits between the H1 and the box to mark the page-top
  chrome boundary.

Final styling and placement are a working baseline; refinement is for the
design pass. The structural split is the part that matters and unblocks
adding more page-level metadata systems (e.g. licensing) without piling
loose badges at the page top.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Assets/markdown/metadata-box.css          | 228 +++++++++++++-----
 src/Elastic.Markdown/Page/Index.cshtml        |   2 +
 src/Elastic.Markdown/Page/MetadataBox.cshtml  | 120 ++++-----
 src/Elastic.Markdown/Page/ProductPills.cshtml |  29 +++
 4 files changed, 249 insertions(+), 130 deletions(-)
 create mode 100644 src/Elastic.Markdown/Page/ProductPills.cshtml

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css b/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
index c460c4926c..08e6357a16 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
@@ -1,64 +1,41 @@
 /*
- * Page-top metadata box. Sits below the H1 and above the body content.
- * Up to four labeled rows: Stack products / Stack versions / Deployments /
- * Other products. Hidden when no row has content. Hub layout opts out
- * (the partial returns early when YamlFrontMatter.Layout is set).
+ * Page-top product pills + Requirements box. The pills sit just below the
+ * H1 (one per `products:` frontmatter entry whose product has `hub:` set);
+ * the box sits below the pills and surfaces applies_to-driven metadata in
+ * a labeled two-column layout. Hub layout opts out (the partials return
+ * early when YamlFrontMatter.Layout is set).
  */
 
 @layer components {
-	.metadata-box {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		margin: 0 0 24px 0;
-		padding: 10px 14px;
-		background: var(--color-white);
-		border: 1px solid var(--color-grey-20);
-		border-radius: 6px;
-		font-size: 13px;
-		line-height: 1.4;
+	/*
+	 * Product hub pills below the H1. Brand-color dot + display name.
+	 */
+	/* Thin separator that sits between the H1 and the Requirements box,
+	   carrying the visual weight the old applies-to summary line used to
+	   provide. Keeps the page-top chrome anchored. */
+	.page-meta-divider {
+		height: 0;
+		margin: 18px 0;
+		border: none;
+		border-top: 1px solid var(--color-grey-20);
 	}
 
-	.metadata-row {
+	.product-pills {
 		display: flex;
 		flex-wrap: wrap;
-		align-items: center;
-		gap: 6px 10px;
-		min-height: 24px;
-	}
-
-	.metadata-label {
-		flex: 0 0 auto;
-		min-width: 110px;
-		font-weight: 600;
-		color: var(--color-ink-dark);
-	}
-
-	.metadata-values {
-		display: inline-flex;
-		flex-wrap: wrap;
-		align-items: center;
 		gap: 6px;
-		min-width: 0;
-	}
-
-	@media (max-width: 640px) {
-		.metadata-row {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 4px;
-		}
-		.metadata-label {
-			min-width: 0;
-		}
+		align-items: center;
+		/* Pull tight against the breadcrumb's bottom padding so the pills
+		   read as part of the breadcrumb strip, not a separate row. */
+		margin: -16px 0 14px 0;
 	}
 
-	/*
-	 * Product hub pills (used in the "Stack products" row of the metadata
-	 * box, and reusable elsewhere). Each pill is a brand-color dot + the
-	 * product display name.
-	 */
-	.product-badge {
+	/* Override `.markdown-content a` (blue + underline) with a more
+	   specific selector. Pills are nav affordances, not body links.
+	   `!important` on color + decoration is a safety net against any
+	   utility-layer rules that beat us on cascade order. */
+	.markdown-content a.product-badge,
+	a.product-badge {
 		display: inline-flex;
 		align-items: center;
 		gap: 7px;
@@ -66,10 +43,10 @@
 		border-radius: 999px;
 		background: var(--color-white);
 		border: 1px solid var(--color-grey-20);
-		color: var(--color-ink-dark);
+		color: var(--color-ink-dark) !important;
 		font-size: 12px;
-		font-weight: 500;
-		text-decoration: none;
+		font-weight: 600;
+		text-decoration: none !important;
 		line-height: 1.3;
 		transition:
 			border-color 0.15s ease,
@@ -78,12 +55,28 @@
 			box-shadow 0.15s ease,
 			transform 0.15s ease;
 	}
-	.product-badge:hover {
-		text-decoration: none;
-		color: var(--color-ink-dark);
+	.markdown-content a.product-badge:hover,
+	a.product-badge:hover {
+		text-decoration: none !important;
+		color: var(--color-ink-dark) !important;
 		box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
 		transform: translateY(-1px);
 	}
+
+	.product-badge-arrow {
+		flex-shrink: 0;
+		color: var(--color-grey-50);
+		font-size: 13px;
+		line-height: 1;
+		margin-left: 1px;
+		transition:
+			transform 0.15s ease,
+			color 0.15s ease;
+	}
+	.product-badge:hover .product-badge-arrow {
+		color: var(--color-ink-light);
+		transform: translateX(2px);
+	}
 	.product-badge:focus-visible {
 		outline: 2px solid var(--color-blue-elastic);
 		outline-offset: 2px;
@@ -131,4 +124,127 @@
 		border-color: #00bfb3;
 		background: rgb(0 191 179 / 0.06);
 	}
+
+	/*
+	 * Requirements box. Two columns: a heading on the left that titles the
+	 * whole box, and a stack of labeled rows on the right. Hidden when no
+	 * applies_to-driven row would render.
+	 */
+	.metadata-box {
+		margin: 16px 0 24px 0;
+		padding: 8px 14px;
+		background: var(--color-grey-10);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 6px;
+		font-size: 13px;
+		line-height: 1.4;
+	}
+
+	.metadata-box-heading {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		cursor: pointer;
+		list-style: none;
+		padding: 4px 0;
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--color-ink-dark);
+		user-select: none;
+	}
+	.metadata-box-heading::-webkit-details-marker {
+		display: none;
+	}
+	.metadata-box-heading:focus-visible {
+		outline: 2px solid var(--color-blue-elastic);
+		outline-offset: 2px;
+		border-radius: 3px;
+	}
+
+	.metadata-box-chevron {
+		flex-shrink: 0;
+		color: var(--color-grey-60);
+		transition: transform 0.15s ease;
+	}
+	.metadata-box[open] .metadata-box-chevron {
+		transform: rotate(180deg);
+	}
+
+	.metadata-box-rows {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-top: 8px;
+		padding-top: 10px;
+		border-top: 1px solid var(--color-grey-20);
+	}
+
+	.metadata-row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px 10px;
+		min-height: 24px;
+	}
+
+	.metadata-label {
+		flex: 0 0 auto;
+		min-width: 100px;
+		font-weight: 600;
+		color: var(--color-ink-dark);
+	}
+
+	.metadata-values {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		row-gap: 4px;
+		min-width: 0;
+	}
+
+	/*
+	 * When the row has multiple entries, separate them with "or". Override
+	 * the global `.applies applies-to-popover { display: contents }` so the
+	 * popover's ::before generates a real separator inline.
+	 */
+	.metadata-values.applies applies-to-popover {
+		display: inline-flex;
+		align-items: center;
+	}
+	.metadata-values > * + *::before {
+		content: 'or';
+		margin: 0 8px;
+		color: var(--color-ink-light);
+		font-size: 12px;
+		font-style: italic;
+	}
+
+	/*
+	 * Plain pill for placeholder values like the Subscription row, until
+	 * real metadata replaces it. Visually quieter than the applies_to
+	 * popover badges so it reads as informational, not interactive.
+	 */
+	.metadata-pill {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 10px;
+		border-radius: 999px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		color: var(--color-ink-dark);
+		font-size: 12px;
+		line-height: 1.3;
+	}
+
+	@media (max-width: 640px) {
+		.metadata-row {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 4px;
+		}
+		.metadata-label {
+			min-width: 0;
+		}
+	}
 }
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index 70ca017a50..4f89660c1c 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -92,8 +92,10 @@
 <section id="elastic-docs-v3">
 	@if (Model.CurrentDocument.YamlFrontMatter?.Layout != MarkdownPageLayout.Hub)
 	{
+		@await RenderPartialAsync(ProductPills.Create(Model))
 		@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
 		@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
+		<hr class="page-meta-divider" />
 		@await RenderPartialAsync(MetadataBox.Create(Model))
 	}
 	@(new HtmlString(Model.MarkdownHtml))
diff --git a/src/Elastic.Markdown/Page/MetadataBox.cshtml b/src/Elastic.Markdown/Page/MetadataBox.cshtml
index 02b5b3107e..0b49d8dffd 100644
--- a/src/Elastic.Markdown/Page/MetadataBox.cshtml
+++ b/src/Elastic.Markdown/Page/MetadataBox.cshtml
@@ -5,93 +5,65 @@
 	if (layout is not null)
 		return;
 
-	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
-	var productHubs = Model.Products
-		.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
-		.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
-		.ToList();
-
 	var hasStackVersions = false;
 	var hasDeployments = false;
-	var hasOtherProducts = false;
 	if (Model.AppliesTo is not null)
 	{
 		hasStackVersions = Model.AppliesTo.Stack is not null
 			|| (Model.AppliesTo.Deployment is null && Model.AppliesTo.Serverless is not null);
 		hasDeployments = Model.AppliesTo.Deployment is not null;
-		hasOtherProducts = Model.AppliesTo.ProductApplicability is not null
-			|| Model.AppliesTo.Product is not null;
 	}
 
-	var hasProducts = productHubs.Count > 0;
-	if (!hasProducts && !hasStackVersions && !hasDeployments && !hasOtherProducts)
+	// Subscription is a placeholder until the metadata exists. Hardcoded so the
+	// row is always visible alongside the real applies_to data.
+	const string subscriptionPlaceholder = "Enterprise";
+
+	if (!hasStackVersions && !hasDeployments)
 		return;
 }
-<aside class="metadata-box" aria-label="Page metadata">
-	@if (hasProducts)
-	{
-		<div class="metadata-row metadata-row-products">
-			<span class="metadata-label">Stack products</span>
-			<div class="metadata-values">
-				@foreach (var product in productHubs)
-				{
-					var hub = product.Hub!;
-					var isExternal = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
-						|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
-					var href = isExternal ? hub : $"{prefix}/{hub.Trim('/')}/";
-					<a class="product-badge product-badge-@product.Id"
-						href="@href"
-						@(isExternal ? new HtmlString("target=\"_blank\" rel=\"noopener\"") : HtmlString.Empty)>
-						<span class="product-badge-dot" aria-hidden="true"></span>
-						<span class="product-badge-label">@product.DisplayName</span>
-					</a>
-				}
+<details class="metadata-box" open aria-label="Page requirements">
+	<summary class="metadata-box-heading">
+		<span class="metadata-box-title">Requirements</span>
+		<svg class="metadata-box-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+			<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+		</svg>
+	</summary>
+	<div class="metadata-box-rows">
+		@if (hasStackVersions)
+		{
+			<div class="metadata-row metadata-row-versions">
+				<span class="metadata-label">Versions</span>
+				<div class="metadata-values applies">
+					@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+					{
+						AppliesTo = Model.AppliesTo!,
+						Inline = false,
+						VersionsConfig = Model.VersionsConfig,
+						BadgePlacement = ApplicabilityBadgePlacement.StackVersionsRow
+					}))
+				</div>
 			</div>
-		</div>
-	}
-	@if (hasStackVersions)
-	{
-		<div class="metadata-row metadata-row-versions">
-			<span class="metadata-label">Stack versions</span>
-			<div class="metadata-values">
-				@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
-				{
-					AppliesTo = Model.AppliesTo!,
-					Inline = true,
-					VersionsConfig = Model.VersionsConfig,
-					BadgePlacement = ApplicabilityBadgePlacement.StackVersionsRow
-				}))
+		}
+		@if (hasDeployments)
+		{
+			<div class="metadata-row metadata-row-deployments">
+				<span class="metadata-label">Deployments</span>
+				<div class="metadata-values applies">
+					@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+					{
+						AppliesTo = Model.AppliesTo!,
+						Inline = false,
+						VersionsConfig = Model.VersionsConfig,
+						BadgePlacement = ApplicabilityBadgePlacement.DeploymentsRow
+					}))
+				</div>
 			</div>
-		</div>
-	}
-	@if (hasDeployments)
-	{
-		<div class="metadata-row metadata-row-deployments">
-			<span class="metadata-label">Deployments</span>
-			<div class="metadata-values">
-				@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
-				{
-					AppliesTo = Model.AppliesTo!,
-					Inline = true,
-					VersionsConfig = Model.VersionsConfig,
-					BadgePlacement = ApplicabilityBadgePlacement.DeploymentsRow
-				}))
-			</div>
-		</div>
-	}
-	@if (hasOtherProducts)
-	{
-		<div class="metadata-row metadata-row-other-products">
-			<span class="metadata-label">Other products</span>
+		}
+		<div class="metadata-row metadata-row-subscription">
+			<span class="metadata-label">Subscription</span>
 			<div class="metadata-values">
-				@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
-				{
-					AppliesTo = Model.AppliesTo!,
-					Inline = true,
-					VersionsConfig = Model.VersionsConfig,
-					BadgePlacement = ApplicabilityBadgePlacement.OtherProductsRow
-				}))
+				<span class="metadata-pill">@subscriptionPlaceholder</span>
 			</div>
 		</div>
-	}
-</aside>
+	</div>
+</details>
diff --git a/src/Elastic.Markdown/Page/ProductPills.cshtml b/src/Elastic.Markdown/Page/ProductPills.cshtml
new file mode 100644
index 0000000000..f601189ff6
--- /dev/null
+++ b/src/Elastic.Markdown/Page/ProductPills.cshtml
@@ -0,0 +1,29 @@
+@inherits RazorSlice<Elastic.Markdown.Page.IndexViewModel>
+@{
+	var layout = Model.CurrentDocument.YamlFrontMatter?.Layout;
+	if (layout is not null)
+		return;
+
+	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
+	var productHubs = Model.Products
+		.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
+		.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
+		.ToList();
+
+	if (productHubs.Count == 0)
+		return;
+}
+<div class="product-pills" role="navigation" aria-label="Product hubs related to this page">
+	@foreach (var product in productHubs)
+	{
+		var hub = product.Hub!;
+		var isAbsolute = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
+			|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
+		var href = isAbsolute ? hub : $"{prefix}/{hub.Trim('/')}/";
+		<a class="product-badge product-badge-@product.Id" href="@href">
+			<span class="product-badge-dot" aria-hidden="true"></span>
+			<span class="product-badge-label">@product.DisplayName</span>
+			<span class="product-badge-arrow" aria-hidden="true">&rarr;</span>
+		</a>
+	}
+</div>

From f5fea776f24cbd9c49f96c9a1415751ec4369cd4 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 14:03:46 +0200
Subject: [PATCH 25/56] fix: remove unnecessary null-forgiving operators
 flagged as IDE0370

The compiler already proves non-null via the IsNullOrWhiteSpace guards,
so the ! suppressions are redundant and treated as errors by the analyzer.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 src/Elastic.Markdown/IO/MarkdownFile.cs                       | 2 +-
 src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs | 4 ++--
 src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs   | 4 ++--
 src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs     | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Elastic.Markdown/IO/MarkdownFile.cs b/src/Elastic.Markdown/IO/MarkdownFile.cs
index 84edc11c79..42500c9123 100644
--- a/src/Elastic.Markdown/IO/MarkdownFile.cs
+++ b/src/Elastic.Markdown/IO/MarkdownFile.cs
@@ -175,7 +175,7 @@ protected void ReadDocumentInstructions(MarkdownDocument document, Func<string,
 				.FirstOrDefault()?
 				.Title;
 			if (!string.IsNullOrWhiteSpace(heroTitle))
-				Title = heroTitle!;
+				Title = heroTitle;
 		}
 
 		var yamlFrontMatter = ProcessYamlFrontMatter(document);
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 68341d7069..182d9057df 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -355,11 +355,11 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 	{
 		var releasesHtml = string.IsNullOrWhiteSpace(block.Releases)
 			? null
-			: RenderInlineMarkdown(block.Releases!);
+			: RenderInlineMarkdown(block.Releases);
 
 		var descriptionHtml = string.IsNullOrWhiteSpace(block.Description)
 			? null
-			: RenderInlineMarkdown(block.Description!);
+			: RenderInlineMarkdown(block.Description);
 
 		var slice = HeroView.Create(new HeroViewModel
 		{
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs
index adb9fc9e04..11f6f9a382 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/OnThisPageBlock.cs
@@ -40,10 +40,10 @@ public IReadOnlyList<OnThisPageItem> CollectItems()
 			switch (descendant)
 			{
 				case CardGroupBlock g when !string.IsNullOrWhiteSpace(g.Anchor) && !string.IsNullOrWhiteSpace(g.Title):
-					items.Add(new OnThisPageItem(g.Title!, g.Anchor!));
+					items.Add(new OnThisPageItem(g.Title, g.Anchor));
 					break;
 				case WhatsNewBlock w when !string.IsNullOrWhiteSpace(w.Data.Id) && !string.IsNullOrWhiteSpace(w.Data.Title):
-					items.Add(new OnThisPageItem(w.Data.Title!, w.Data.Id!));
+					items.Add(new OnThisPageItem(w.Data.Title, w.Data.Id));
 					break;
 			}
 		}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
index 59202757cc..f61250d815 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
@@ -42,7 +42,7 @@ public override void FinalizeAndValidate(ParserContext context)
 
 		if (!string.IsNullOrWhiteSpace(product))
 		{
-			var resolved = LoadFromCentralConfig(product!);
+			var resolved = LoadFromCentralConfig(product);
 			if (resolved is null)
 			{
 				this.EmitError($"{{whats-new}} :product: '{product}' was not found in config/whats-new.yml.");
@@ -94,7 +94,7 @@ public override void FinalizeAndValidate(ParserContext context)
 	}
 
 	public override IEnumerable<string> GeneratedAnchors =>
-		string.IsNullOrWhiteSpace(Data.Id) ? [] : [Data.Id!];
+		string.IsNullOrWhiteSpace(Data.Id) ? [] : [Data.Id];
 }
 
 [YamlSerializable]

From 04f59da5b7c97688ed4b3009fcbc3f1e96b02322 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 14:14:22 +0200
Subject: [PATCH 26/56] fix(tests): filter page-title-row div from HTML
 assertions

hub-pages moved the H1 title into a `div.page-title-row` wrapper
(alongside product badges). The test framework's prettyHtml filter
only stripped bare H1 as the first section child; update it to also
strip any element with class page-title-row so tests don't need to
include the title wrapper in their expected HTML snippets.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 tests/authoring/Framework/HtmlAssertions.fs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/authoring/Framework/HtmlAssertions.fs b/tests/authoring/Framework/HtmlAssertions.fs
index eaa648d322..0f025cfe01 100644
--- a/tests/authoring/Framework/HtmlAssertions.fs
+++ b/tests/authoring/Framework/HtmlAssertions.fs
@@ -105,7 +105,7 @@ actual: {actual}
         let formatter = PrettyMarkupFormatter()
         element.Children
         |> Seq.indexed
-        |> Seq.filter (fun (i, c) -> (not <| (i = 0 && c.TagName = "H1")))
+        |> Seq.filter (fun (i, c) -> not (c.ClassList.Contains("page-title-row")) && not (i = 0 && c.TagName = "H1"))
         |> Seq.map(fun (_, c) -> c)
         |> Seq.iter _.ToHtml(sw, formatter)
         sw.ToString().TrimStart('\n')

From 20a3966d5f1dec3ee907b75faee549b12c268b50 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 16:12:02 +0200
Subject: [PATCH 27/56] feat(hub-pages): wire hub pages through assembler
 preview

- assembler.yml: point narrative (docs-content) at hub-pages branch so
  the preview build checks out the branch containing the hub page files
- navigation.yml: add toc: products so the assembler builds and nav-positions
  the hub pages from docs-content://products/
- navigation-v2.yml: replace the external gist link with real page: entries
  for Kibana and Elasticsearch hub pages in docs-content

Together with the PageCrossLinkLeaf fix (already merged from nav-v2),
this wires hub pages end-to-end through the assembler preview build.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 config/assembler.yml     |  1 +
 config/navigation-v2.yml | 12 ++++++------
 config/navigation.yml    |  1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/config/assembler.yml b/config/assembler.yml
index e8e2acd183..e8092aabf0 100644
--- a/config/assembler.yml
+++ b/config/assembler.yml
@@ -73,6 +73,7 @@ shared_configuration:
 ###
 narrative:
   checkout_strategy: full
+  current: hub-pages
 
 ###
 # 'references' defines a map of `elastic/<repository_name> * <repository_config>
diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index b6704bd304..39f9aea547 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3307,13 +3307,13 @@ nav:
     children:
     - toc: docs-content://release-notes/intro
 
-  # Until hub pages are produced through the V1 navigation/toc chain so the
-  # assembler can resolve them, this section is an external link to the
-  # Kibana gist preview -- the visual reference for the prototype, with its
-  # own island-style nav and stubs already wired up.
-  # https://gist.github.com/florent-leborgne/c9075416b50ec111a09897b7be4462cc
   - section: Product hubs
-    url: https://htmlpreview.github.io/?https://gist.github.com/florent-leborgne/c9075416b50ec111a09897b7be4462cc/raw/kibana-hub.html
+    url: /products/
+    children:
+    - page: docs-content://products/kibana/v9.md
+      title: Kibana
+    - page: docs-content://products/elasticsearch/v9.md
+      title: Elasticsearch
 
   - section: Extension points
     url: /extend/
diff --git a/config/navigation.yml b/config/navigation.yml
index 01d93faeec..3bf8dd5dda 100644
--- a/config/navigation.yml
+++ b/config/navigation.yml
@@ -17,6 +17,7 @@ toc:
   #############
   # NARRATIVE #
   #############
+  - toc: products
   - toc: get-started
   - toc: solutions
   - toc: manage-data

From ca9489ea1a1a9073c46d128c28f2e5187eb865a5 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 16:27:29 +0200
Subject: [PATCH 28/56] style: fix Prettier formatting in pages-nav-v2.ts and
 styles.css

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 .../Assets/pages-nav-v2.ts                    | 34 +++++++++----------
 .../Assets/styles.css                         |  5 +--
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/pages-nav-v2.ts b/src/Elastic.Documentation.Site/Assets/pages-nav-v2.ts
index 6f49ca75cc..7582c5e01b 100644
--- a/src/Elastic.Documentation.Site/Assets/pages-nav-v2.ts
+++ b/src/Elastic.Documentation.Site/Assets/pages-nav-v2.ts
@@ -381,25 +381,25 @@ function scheduleNavV2CollapsedFolderLayoutWarmup(
 function initNavV2FolderLayoutWarmup(nav: HTMLElement) {
     primeNavV2FolderLayoutsSync(nav, 14)
 
-    nav.querySelectorAll<HTMLElement>('li.group-navigation > .nav-folder-peer').forEach(
-        (peer) => {
-            if (peer.dataset.navV2PointerWarmBound === 'true') {
-                return
-            }
-
-            peer.dataset.navV2PointerWarmBound = 'true'
-            const warm = () => {
-                warmFolderSubtreeLayoutFromPeer(peer)
-            }
+    nav.querySelectorAll<HTMLElement>(
+        'li.group-navigation > .nav-folder-peer'
+    ).forEach((peer) => {
+        if (peer.dataset.navV2PointerWarmBound === 'true') {
+            return
+        }
 
-            peer.addEventListener('pointerenter', warm, { passive: true })
-            /*
-             * Runs immediately before click (after hover path): pays layout once so the grid
-             * transition is less likely to share a frame with the first full subtree measure.
-             */
-            peer.addEventListener('pointerdown', warm, { passive: true })
+        peer.dataset.navV2PointerWarmBound = 'true'
+        const warm = () => {
+            warmFolderSubtreeLayoutFromPeer(peer)
         }
-    )
+
+        peer.addEventListener('pointerenter', warm, { passive: true })
+        /*
+         * Runs immediately before click (after hover path): pays layout once so the grid
+         * transition is less likely to share a frame with the first full subtree measure.
+         */
+        peer.addEventListener('pointerdown', warm, { passive: true })
+    })
 
     scheduleNavV2CollapsedFolderLayoutWarmup(nav, 14)
 }
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index 1c651b0a35..c29f5ea3e6 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -222,7 +222,9 @@ body:has([data-nav-v2]) aside.sidebar {
 	nav[data-nav-v2]
 	li
 	> .docs-sidebar-nav-v2__label--top
-	+ ul.docs-sidebar-nav-v2__subsection:has(> li > .docs-sidebar-nav-v2__label--nested) {
+	+ ul.docs-sidebar-nav-v2__subsection:has(
+		> li > .docs-sidebar-nav-v2__label--nested
+	) {
 	gap: 0.5rem !important;
 }
 
@@ -612,7 +614,6 @@ nav.docs-sidebar-nav-v2
 	transform: rotate(0deg);
 }
 
-
 @layer components {
 	.sidebar-trial-card {
 		background: var(--color-green-30);

From 10330f7158edea9a0568bc5e8fe61fe0f9c96dc4 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 16:34:27 +0200
Subject: [PATCH 29/56] fix(assembler): warn instead of error when branch has
 no link index entry

When the configured branch (e.g. a prototype/dev branch) has never been
published, it won't have a link index entry. Fall back to checking out
the branch directly by name rather than blocking the entire build with
an error. Cross-link resolution will use whatever entries are available.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 .../Sourcing/RepositorySourcesFetcher.cs                 | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/services/Elastic.Documentation.Assembler/Sourcing/RepositorySourcesFetcher.cs b/src/services/Elastic.Documentation.Assembler/Sourcing/RepositorySourcesFetcher.cs
index f53f37c40d..d2b01e5b61 100644
--- a/src/services/Elastic.Documentation.Assembler/Sourcing/RepositorySourcesFetcher.cs
+++ b/src/services/Elastic.Documentation.Assembler/Sourcing/RepositorySourcesFetcher.cs
@@ -97,10 +97,13 @@ await Task.Run(() =>
 					{
 						if (!entry.TryGetValue(branch, out var entryInfo))
 						{
-							context.Collector.EmitError("", $"'{repo.Key}' does not have a '{branch}' entry in link index");
-							return;
+							// Branch has no published link index (e.g. a prototype or dev branch).
+							// Warn and check out the branch directly without a pinned git ref;
+							// cross-link resolution will use whatever index entries are available.
+							context.Collector.EmitWarning("", $"'{repo.Key}' does not have a '{branch}' entry in link index, checking out branch directly");
 						}
-						gitRef = entryInfo.GitReference;
+						else
+							gitRef = entryInfo.GitReference;
 					}
 
 					var cloneInformation = RepositorySourcer.CloneRef(repo.Value, gitRef, fetchLatest, assumeCloned: assumeCloned);

From a1262cdec1141103d005ed2778e2f7c27f156feb Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 16:42:16 +0200
Subject: [PATCH 30/56] fix(assembler): gracefully handle unpublished branches
 in cross-link fetching

For prototype/dev branches (e.g. hub-pages) that have never been deployed
and therefore have no link index entry:

- RepositoryPublishValidationService: emit warnings instead of errors so
  validate-assembler doesn't block the build
- CrossLinkFetcher.FetchCrossLinks: fall back to main/master cross-link
  data rather than throwing when the requested branch isn't in the index

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 .../CrossLinks/CrossLinkFetcher.cs                         | 7 +++++++
 .../ContentSources/RepositoryPublishValidationService.cs   | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Documentation.Links/CrossLinks/CrossLinkFetcher.cs b/src/Elastic.Documentation.Links/CrossLinks/CrossLinkFetcher.cs
index 893754c2d0..a6f00f9d9c 100644
--- a/src/Elastic.Documentation.Links/CrossLinks/CrossLinkFetcher.cs
+++ b/src/Elastic.Documentation.Links/CrossLinks/CrossLinkFetcher.cs
@@ -107,6 +107,13 @@ protected async Task<RepositoryLinks> FetchCrossLinks(string repository, string[
 				return await FetchLinkIndexEntry(repository, linkIndexEntry, ctx);
 		}
 
+		// Branch not published yet (e.g. a prototype/dev branch) — fall back to main or master.
+		foreach (var fallback in new[] { "main", "master" })
+		{
+			if (repositoryLinks.TryGetValue(fallback, out var fallbackEntry))
+				return await FetchLinkIndexEntry(repository, fallbackEntry, ctx);
+		}
+
 		throw new Exception($"Repository found in link index however none of: '{string.Join(", ", keys)}' branches found");
 	}
 
diff --git a/src/services/Elastic.Documentation.Assembler/ContentSources/RepositoryPublishValidationService.cs b/src/services/Elastic.Documentation.Assembler/ContentSources/RepositoryPublishValidationService.cs
index 8f11b65b68..0c67cc354d 100644
--- a/src/services/Elastic.Documentation.Assembler/ContentSources/RepositoryPublishValidationService.cs
+++ b/src/services/Elastic.Documentation.Assembler/ContentSources/RepositoryPublishValidationService.cs
@@ -47,13 +47,13 @@ public async Task<bool> ValidatePublishStatus(IDiagnosticsCollector collector, C
 			var next = repository.GetBranch(ContentSource.Next);
 			if (!registryMapping.TryGetValue(next, out _))
 			{
-				collector.EmitError(reportPath,
+				collector.EmitWarning(reportPath,
 					$"'{repository.Name}' has not yet published links.json for configured 'next' content source: '{next}' see  {linkIndexReader.RegistryUrl}");
 			}
 
 			if (!registryMapping.TryGetValue(current, out _))
 			{
-				collector.EmitError(reportPath,
+				collector.EmitWarning(reportPath,
 					$"'{repository.Name}' has not yet published links.json for configured 'current' content source: '{current}' see  {linkIndexReader.RegistryUrl}");
 			}
 		}

From c6b9d67beca99a5b4ac16a91e99e93a7a08769c3 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 17:09:40 +0200
Subject: [PATCH 31/56] fix(nav): resolve V2 page entries from nested TOCs

V2 page links need to register their source files after the V2 tree is built so assembler layouts can position pages that are only surfaced through navigation-v2.yml.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../NavigationItemExtensions.cs               |   1 +
 .../V2/PageCrossLinkLeaf.cs                   |   2 +
 .../V2/PageFolderNavigationNode.cs            |   3 +
 .../V2/SiteNavigationV2.cs                    | 171 ++++++++++++++++++
 .../Assembler/SiteNavigationTests.cs          |  76 ++++++++
 5 files changed, 253 insertions(+)

diff --git a/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs b/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs
index 9c6e7cf815..762561469d 100644
--- a/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs
+++ b/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs
@@ -122,6 +122,7 @@ private static void BuildNavigationLookupsRecursive(
 				_ = navigationByOrder.TryAdd(documentationFileNode.NavigationIndex, documentationFileNode);
 				_ = navigationByOrder.TryAdd(documentationFileNode.Index.NavigationIndex, documentationFileNode.Index);
 				_ = urlToFile.TryAdd(documentationFileNode.Url, documentationFileNode.Index.Model);
+				_ = urlToFile.TryAdd(documentationFileNode.Index.Url, documentationFileNode.Index.Model);
 				foreach (var child in documentationFileNode.NavigationItems)
 					BuildNavigationLookupsRecursive(child, navigationDocumentationFileLookup, navigationByOrder, urlToFile);
 				break;
diff --git a/src/Elastic.Documentation.Navigation/V2/PageCrossLinkLeaf.cs b/src/Elastic.Documentation.Navigation/V2/PageCrossLinkLeaf.cs
index f1210849db..51927aaf14 100644
--- a/src/Elastic.Documentation.Navigation/V2/PageCrossLinkLeaf.cs
+++ b/src/Elastic.Documentation.Navigation/V2/PageCrossLinkLeaf.cs
@@ -15,6 +15,8 @@ public class PageCrossLinkLeaf(
 	INodeNavigationItem<INavigationModel, INavigationItem>? parent
 ) : ILeafNavigationItem<INavigationModel>, INavigationModel
 {
+	public Uri Page { get; } = page;
+
 	/// <inheritdoc />
 	public INavigationModel Model => this;
 
diff --git a/src/Elastic.Documentation.Navigation/V2/PageFolderNavigationNode.cs b/src/Elastic.Documentation.Navigation/V2/PageFolderNavigationNode.cs
index a610f70a4b..b19b2994b4 100644
--- a/src/Elastic.Documentation.Navigation/V2/PageFolderNavigationNode.cs
+++ b/src/Elastic.Documentation.Navigation/V2/PageFolderNavigationNode.cs
@@ -25,6 +25,7 @@ public PageFolderNavigationNode(
 	{
 		Id = ShortId.Create("page-folder", title);
 		NavigationTitle = title;
+		Page = page;
 		Url = ResolveUrl(page, sitePrefix);
 		NavigationItems = children;
 		Parent = parent;
@@ -35,6 +36,8 @@ public PageFolderNavigationNode(
 	/// <inheritdoc />
 	public string Id { get; }
 
+	public Uri Page { get; }
+
 	/// <inheritdoc />
 	public string Url { get; }
 
diff --git a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
index 1f6057df51..4b9cf4f5a7 100644
--- a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
+++ b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
@@ -34,6 +34,7 @@ public SiteNavigationV2(
 	{
 		var prefix = sitePrefix ?? string.Empty;
 		V2NavigationItems = BuildV2Items(v2File.Nav, Nodes, this, prefix);
+		RegisterV2PageLookups();
 		Sections = BuildSections(V2NavigationItems);
 		Islands = BuildIslands(Sections);
 		BuildUrlToSectionLookup();
@@ -153,6 +154,176 @@ private void BuildTocRootToIslandLookup()
 			_ = _tocRootToIsland.TryAdd(island.SourceTocRootId, island);
 	}
 
+	private void RegisterV2PageLookups()
+	{
+		var urlToFile = new Dictionary<string, IDocumentationFile>(StringComparer.OrdinalIgnoreCase);
+		foreach (var node in Nodes.Values)
+			CollectDocumentationFilesByUrl(node, urlToFile, Url);
+
+		RegisterV2PageLookups(V2NavigationItems, urlToFile);
+	}
+
+	private void RegisterV2PageLookups(
+		IEnumerable<INavigationItem> items,
+		IReadOnlyDictionary<string, IDocumentationFile> urlToFile
+	)
+	{
+		foreach (var item in items)
+		{
+			switch (item)
+			{
+				case PageCrossLinkLeaf pageCrossLink:
+					RegisterV2PageLookup(pageCrossLink.Page, pageCrossLink, urlToFile);
+					break;
+				case PageFolderNavigationNode pageFolder:
+					RegisterV2PageLookup(pageFolder.Page, pageFolder, urlToFile);
+					break;
+			}
+
+			if (item is INodeNavigationItem<INavigationModel, INavigationItem> node)
+				RegisterV2PageLookups(node.NavigationItems, urlToFile);
+		}
+	}
+
+	private void RegisterV2PageLookup(
+		Uri page,
+		INavigationItem item,
+		IReadOnlyDictionary<string, IDocumentationFile> urlToFile
+	)
+	{
+		if (TryResolvePageSource(page, out var file) || urlToFile.TryGetValue(item.Url, out file))
+			_ = NavigationDocumentationFileLookup.TryAdd(file, item);
+	}
+
+	private bool TryResolvePageSource(Uri page, out IDocumentationFile file)
+	{
+		file = null!;
+		var pagePath = GetUriPath(page);
+		if (string.IsNullOrEmpty(pagePath))
+			return false;
+
+		var segments = pagePath.Split('/', StringSplitOptions.RemoveEmptyEntries);
+		for (var length = segments.Length; length > 0; length--)
+		{
+			var tocPath = string.Join('/', segments.Take(length));
+			if (!Nodes.TryGetValue(CreateTocUri(page.Scheme, tocPath), out var node))
+				continue;
+
+			var remainingPath = string.Join('/', segments.Skip(length));
+			if (string.IsNullOrEmpty(remainingPath))
+			{
+				file = node.Index.Model;
+				return true;
+			}
+
+			if (TryFindDocumentationFile(node, remainingPath, out file))
+				return true;
+		}
+
+		return false;
+	}
+
+	private static bool TryFindDocumentationFile(
+		INavigationItem item,
+		string remainingPath,
+		out IDocumentationFile file
+	)
+	{
+		switch (item)
+		{
+			case ILeafNavigationItem<IDocumentationFile> leaf when MatchesRemainingPath(leaf.Url, remainingPath):
+				file = leaf.Model;
+				return true;
+			case INodeNavigationItem<IDocumentationFile, INavigationItem> node:
+				if (MatchesRemainingPath(node.Index.Url, remainingPath))
+				{
+					file = node.Index.Model;
+					return true;
+				}
+				foreach (var child in node.NavigationItems)
+				{
+					if (TryFindDocumentationFile(child, remainingPath, out file))
+						return true;
+				}
+				break;
+			case INodeNavigationItem<INavigationModel, INavigationItem> node:
+				foreach (var child in node.NavigationItems)
+				{
+					if (TryFindDocumentationFile(child, remainingPath, out file))
+						return true;
+				}
+				break;
+		}
+
+		file = null!;
+		return false;
+	}
+
+	private static bool MatchesRemainingPath(string url, string remainingPath)
+	{
+		var normalizedPath = NormalizePagePath(remainingPath);
+		return url.TrimEnd('/').EndsWith($"/{normalizedPath}", StringComparison.OrdinalIgnoreCase);
+	}
+
+	private static string NormalizePagePath(string path)
+	{
+		var normalized = path.Trim('/');
+		if (normalized.EndsWith(".md", StringComparison.OrdinalIgnoreCase))
+			normalized = normalized[..^3];
+		if (normalized.EndsWith("/index", StringComparison.OrdinalIgnoreCase))
+			normalized = normalized[..^6];
+		return normalized;
+	}
+
+	private static Uri CreateTocUri(string scheme, string path)
+	{
+		var slash = path.IndexOf('/');
+		return slash < 0
+			? new Uri($"{scheme}://{path}")
+			: new Uri($"{scheme}://{path[..slash]}/{path[(slash + 1)..]}");
+	}
+
+	private static string GetUriPath(Uri uri) => (uri.Host + uri.AbsolutePath).Trim('/');
+
+	private static void CollectDocumentationFilesByUrl(
+		INavigationItem item,
+		Dictionary<string, IDocumentationFile> urlToFile,
+		string sitePrefix
+	)
+	{
+		switch (item)
+		{
+			case ILeafNavigationItem<IDocumentationFile> leaf:
+				AddDocumentationFileUrl(urlToFile, leaf.Url, leaf.Model, sitePrefix);
+				break;
+			case INodeNavigationItem<IDocumentationFile, INavigationItem> node:
+				AddDocumentationFileUrl(urlToFile, node.Url, node.Index.Model, sitePrefix);
+				AddDocumentationFileUrl(urlToFile, node.Index.Url, node.Index.Model, sitePrefix);
+				foreach (var child in node.NavigationItems)
+					CollectDocumentationFilesByUrl(child, urlToFile, sitePrefix);
+				break;
+			case INodeNavigationItem<INavigationModel, INavigationItem> node:
+				foreach (var child in node.NavigationItems)
+					CollectDocumentationFilesByUrl(child, urlToFile, sitePrefix);
+				break;
+		}
+	}
+
+	private static void AddDocumentationFileUrl(
+		Dictionary<string, IDocumentationFile> urlToFile,
+		string url,
+		IDocumentationFile file,
+		string sitePrefix
+	)
+	{
+		_ = urlToFile.TryAdd(url, file);
+
+		if (sitePrefix == "/" || string.IsNullOrEmpty(url) || !url.StartsWith('/'))
+			return;
+
+		_ = urlToFile.TryAdd($"{sitePrefix.TrimEnd('/')}{url}", file);
+	}
+
 	private static IReadOnlyList<INavigationItem> BuildV2Items(
 		IReadOnlyList<INavV2Item> v2Items,
 		IReadOnlyDictionary<Uri, IRootNavigationItem<IDocumentationFile, INavigationItem>> nodes,
diff --git a/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs b/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs
index c79316636d..89bf6a0914 100644
--- a/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs
+++ b/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs
@@ -10,6 +10,7 @@
 using Elastic.Documentation.Navigation.Isolated;
 using Elastic.Documentation.Navigation.Isolated.Node;
 using Elastic.Documentation.Navigation.Tests.Isolation;
+using Elastic.Documentation.Navigation.V2;
 
 namespace Elastic.Documentation.Navigation.Tests.Assembler;
 
@@ -305,4 +306,79 @@ public void SitePrefixAppliedToMultipleNavigationItems(string? sitePrefix, strin
 		var searchItem = navigation.NavigationItems.Skip(1).First();
 		searchItem.Url.Should().Be(expectedSearchUrl, $"search URL should be '{expectedSearchUrl}' with sitePrefix '{sitePrefix}'");
 	}
+
+	[Fact]
+	public void SiteNavigationV2PageEntriesResolveFilesFromUnseenChildTocs()
+	{
+		var fileSystem = new MockFileSystem();
+		var docsContentDir = "/checkouts/current/docs-content";
+
+		// language=yaml
+		var docsetYaml = """
+		                 project: Docs content
+		                 toc:
+		                   - file: index.md
+		                   - toc: products
+		                 """;
+		fileSystem.AddFile($"{docsContentDir}/docs/docset.yml", new MockFileData(docsetYaml));
+		fileSystem.AddFile($"{docsContentDir}/docs/index.md", new MockFileData("# Docs content"));
+
+		// language=yaml
+		var productsTocYaml = """
+		                      toc:
+		                        - file: index.md
+		                        - toc: elasticsearch
+		                      """;
+		fileSystem.AddFile($"{docsContentDir}/docs/products/toc.yml", new MockFileData(productsTocYaml));
+		fileSystem.AddFile($"{docsContentDir}/docs/products/index.md", new MockFileData("# Product hubs"));
+
+		// language=yaml
+		var elasticsearchTocYaml = """
+		                           toc:
+		                             - file: v9.md
+		                           """;
+		fileSystem.AddFile($"{docsContentDir}/docs/products/elasticsearch/toc.yml", new MockFileData(elasticsearchTocYaml));
+		fileSystem.AddFile($"{docsContentDir}/docs/products/elasticsearch/v9.md", new MockFileData("# Elasticsearch"));
+
+		// language=yaml
+		var siteNavYaml = """
+		                  toc:
+		                    - toc: products
+		                  """;
+		var siteNavFile = SiteNavigationFile.Deserialize(siteNavYaml);
+
+		// language=yaml
+		var v2NavYaml = """
+		                nav:
+		                  - section: Product hubs
+		                    url: /products/
+		                    children:
+		                      - page: docs-content://products/elasticsearch/v9.md
+		                        title: Elasticsearch
+		                """;
+		var v2File = NavigationV2File.Deserialize(v2NavYaml);
+
+		var docsContentContext = SiteNavigationTestFixture.CreateAssemblerContext(fileSystem, docsContentDir, output);
+		var docset = DocumentationSetFile.LoadAndResolve(
+			docsContentContext.Collector,
+			fileSystem.FileInfo.New($"{docsContentDir}/docs/docset.yml"),
+			FileSystemFactory.ScopeSourceDirectory(fileSystem, "/checkouts")
+		);
+		var docsContentNav = new DocumentationSetNavigation<IDocumentationFile>(
+			docset,
+			docsContentContext,
+			GenericDocumentationFileFactory.Instance
+		);
+
+		var siteContext = SiteNavigationTestFixture.CreateAssemblerContext(fileSystem, docsContentDir, output);
+		var navigation = new SiteNavigationV2(v2File, siteNavFile, siteContext, [docsContentNav], sitePrefix: "docs");
+
+		var elasticsearchToc = navigation.Nodes[new Uri("docs-content://products/elasticsearch")];
+		var elasticsearchFile = elasticsearchToc.Index.Model;
+
+		navigation.NavigationDocumentationFileLookup.TryGetValue(elasticsearchFile, out var navigationItem)
+			.Should().BeTrue("V2 page entries should map docs files even when their child TOC is not declared in navigation.yml");
+		navigationItem.Should().BeOfType<PageCrossLinkLeaf>();
+		navigationItem.Url.Should().Be("/docs/products/elasticsearch/v9");
+	}
 }

From d556dff3c9f26911e00af4f4c2d3a264e869429e Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Mon, 4 May 2026 17:20:59 +0200
Subject: [PATCH 32/56] fix(nav): register files from unseen child TOCs

Assembler builds can process pages from nested TOCs that are not explicitly declared in global navigation, so register those files for positional lookup and let V2 page entries replace them when present.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Assembler/SiteNavigation.cs               |  5 ++
 .../NavigationItemExtensions.cs               | 29 +++++++++
 .../V2/SiteNavigationV2.cs                    |  5 +-
 .../Assembler/SiteNavigationTests.cs          | 63 +++++++++++++++++++
 4 files changed, 101 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Documentation.Navigation/Assembler/SiteNavigation.cs b/src/Elastic.Documentation.Navigation/Assembler/SiteNavigation.cs
index 291c80bed3..0e59fb4cd6 100644
--- a/src/Elastic.Documentation.Navigation/Assembler/SiteNavigation.cs
+++ b/src/Elastic.Documentation.Navigation/Assembler/SiteNavigation.cs
@@ -104,6 +104,11 @@ public SiteNavigation(
 		// Build positional navigation lookup tables from all navigation items in a single traversal
 		NavigationDocumentationFileLookup = [];
 		NavigationIndexedByOrder = this.BuildNavigationLookups(NavigationDocumentationFileLookup);
+		foreach (var node in UnseenNodes)
+		{
+			if (_nodes.TryGetValue(node, out var value))
+				value.AddNavigationFileLookups(NavigationDocumentationFileLookup);
+		}
 	}
 
 	public HashSet<Uri> DeclaredPhantoms { get; }
diff --git a/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs b/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs
index 762561469d..c851904805 100644
--- a/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs
+++ b/src/Elastic.Documentation.Navigation/NavigationItemExtensions.cs
@@ -94,6 +94,12 @@ public static FrozenDictionary<int, INavigationItem> BuildNavigationLookups(
 		return navigationByOrder.ToFrozenDictionary();
 	}
 
+	public static void AddNavigationFileLookups(
+		this INavigationItem rootItem,
+		ConditionalWeakTable<IDocumentationFile, INavigationItem> navigationDocumentationFileLookup
+	) =>
+		AddNavigationFileLookupsRecursive(rootItem, navigationDocumentationFileLookup);
+
 	/// <summary>
 	/// Recursively builds both NavigationDocumentationFileLookup and NavigationIndexedByOrder in a single traversal,
 	/// also collecting a URL-to-file map used by the second pass to resolve V2 page: entries.
@@ -134,6 +140,29 @@ private static void BuildNavigationLookupsRecursive(
 		}
 	}
 
+	private static void AddNavigationFileLookupsRecursive(
+		INavigationItem item,
+		ConditionalWeakTable<IDocumentationFile, INavigationItem> navigationDocumentationFileLookup)
+	{
+		switch (item)
+		{
+			case CrossLinkNavigationLeaf:
+				break;
+			case ILeafNavigationItem<IDocumentationFile> documentationFileLeaf:
+				_ = navigationDocumentationFileLookup.TryAdd(documentationFileLeaf.Model, documentationFileLeaf);
+				break;
+			case INodeNavigationItem<IDocumentationFile, INavigationItem> documentationFileNode:
+				_ = navigationDocumentationFileLookup.TryAdd(documentationFileNode.Index.Model, documentationFileNode);
+				foreach (var child in documentationFileNode.NavigationItems)
+					AddNavigationFileLookupsRecursive(child, navigationDocumentationFileLookup);
+				break;
+			case INodeNavigationItem<INavigationModel, INavigationItem> node:
+				foreach (var child in node.NavigationItems)
+					AddNavigationFileLookupsRecursive(child, navigationDocumentationFileLookup);
+				break;
+		}
+	}
+
 	/// <summary>
 	/// Second pass: for every V2 <c>page:</c> entry (<see cref="PageCrossLinkLeaf"/>) whose URL
 	/// matches a file already known from the V1 toc traversal, register that file in the lookup
diff --git a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
index 4b9cf4f5a7..7d9f1aa8ff 100644
--- a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
+++ b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
@@ -192,7 +192,10 @@ IReadOnlyDictionary<string, IDocumentationFile> urlToFile
 	)
 	{
 		if (TryResolvePageSource(page, out var file) || urlToFile.TryGetValue(item.Url, out file))
-			_ = NavigationDocumentationFileLookup.TryAdd(file, item);
+		{
+			_ = NavigationDocumentationFileLookup.Remove(file);
+			NavigationDocumentationFileLookup.Add(file, item);
+		}
 	}
 
 	private bool TryResolvePageSource(Uri page, out IDocumentationFile file)
diff --git a/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs b/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs
index 89bf6a0914..27daf3f7cb 100644
--- a/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs
+++ b/tests/Navigation.Tests/Assembler/SiteNavigationTests.cs
@@ -381,4 +381,67 @@ public void SiteNavigationV2PageEntriesResolveFilesFromUnseenChildTocs()
 		navigationItem.Should().BeOfType<PageCrossLinkLeaf>();
 		navigationItem.Url.Should().Be("/docs/products/elasticsearch/v9");
 	}
+
+	[Fact]
+	public void SiteNavigationResolvesFilesFromUnseenChildTocs()
+	{
+		var fileSystem = new MockFileSystem();
+		var docsContentDir = "/checkouts/current/docs-content";
+
+		// language=yaml
+		var docsetYaml = """
+		                 project: Docs content
+		                 toc:
+		                   - file: index.md
+		                   - toc: products
+		                 """;
+		fileSystem.AddFile($"{docsContentDir}/docs/docset.yml", new MockFileData(docsetYaml));
+		fileSystem.AddFile($"{docsContentDir}/docs/index.md", new MockFileData("# Docs content"));
+
+		// language=yaml
+		var productsTocYaml = """
+		                      toc:
+		                        - file: index.md
+		                        - toc: elasticsearch
+		                      """;
+		fileSystem.AddFile($"{docsContentDir}/docs/products/toc.yml", new MockFileData(productsTocYaml));
+		fileSystem.AddFile($"{docsContentDir}/docs/products/index.md", new MockFileData("# Product hubs"));
+
+		// language=yaml
+		var elasticsearchTocYaml = """
+		                           toc:
+		                             - file: v9.md
+		                           """;
+		fileSystem.AddFile($"{docsContentDir}/docs/products/elasticsearch/toc.yml", new MockFileData(elasticsearchTocYaml));
+		fileSystem.AddFile($"{docsContentDir}/docs/products/elasticsearch/v9.md", new MockFileData("# Elasticsearch"));
+
+		// language=yaml
+		var siteNavYaml = """
+		                  toc:
+		                    - toc: products
+		                  """;
+		var siteNavFile = SiteNavigationFile.Deserialize(siteNavYaml);
+
+		var docsContentContext = SiteNavigationTestFixture.CreateAssemblerContext(fileSystem, docsContentDir, output);
+		var docset = DocumentationSetFile.LoadAndResolve(
+			docsContentContext.Collector,
+			fileSystem.FileInfo.New($"{docsContentDir}/docs/docset.yml"),
+			FileSystemFactory.ScopeSourceDirectory(fileSystem, "/checkouts")
+		);
+		var docsContentNav = new DocumentationSetNavigation<IDocumentationFile>(
+			docset,
+			docsContentContext,
+			GenericDocumentationFileFactory.Instance
+		);
+
+		var siteContext = SiteNavigationTestFixture.CreateAssemblerContext(fileSystem, docsContentDir, output);
+		var navigation = new SiteNavigation(siteNavFile, siteContext, [docsContentNav], sitePrefix: "docs");
+
+		var elasticsearchToc = navigation.Nodes[new Uri("docs-content://products/elasticsearch")];
+		var elasticsearchFile = elasticsearchToc.Index.Model;
+
+		navigation.NavigationDocumentationFileLookup.TryGetValue(elasticsearchFile, out var navigationItem)
+			.Should().BeTrue("unseen child TOCs can still own files that the assembler processes");
+		navigationItem.Should().BeSameAs(elasticsearchToc);
+	}
 }

From 65bc6de90ab1068f506661063d4212d699df44b4 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 4 May 2026 19:28:30 +0200
Subject: [PATCH 33/56] Refine page-top metadata: pills inside Availability
 box, text+? tooltips

Successive refinements after the initial restructure:

- Move product pills from above the H1 into the box's title row, alongside
  the "This page applies to" label. Drops ProductPills.cshtml partial and
  the page-meta divider; the box is now the single page-top metadata zone.
- Drop the Subscription placeholder row and its CSS.
- Render applies_to entries as plain text + a small "?" icon (CSS-only
  reskin of the existing applies-to-popover), comma-separated. The "?"
  still triggers the rich tooltip on hover/click. No more "or" separator.
- Sort items so Serverless lands first, then other available items, with
  unavailable items at the end (struck-through + dimmed).
- Title typography lifts the row above the rest of the box without
  shouting (15px / 700 / ink-dark vs 13px / 600 / grey-80 row labels).
- Stack tooltip description now substitutes {base}/{current}/{base-major}
  from the VersioningSystem so the tooltip surfaces the actual range
  ("Elastic Stack 9.0.0 to 9.4.0...") instead of a static blurb.
- All four Serverless tooltip descriptions append a sentence noting that
  Serverless UI/capabilities can differ from versioned Elastic Stack.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Assets/markdown/metadata-box.css          | 303 ++++++++++--------
 .../Myst/Components/ApplicabilityRenderer.cs  |  20 +-
 .../Myst/Components/ApplicableToViewModel.cs  |  19 +-
 .../Myst/Components/ProductDescriptions.cs    |  13 +-
 src/Elastic.Markdown/Page/Index.cshtml        |   2 -
 src/Elastic.Markdown/Page/MetadataBox.cshtml  | 107 ++++---
 src/Elastic.Markdown/Page/ProductPills.cshtml |  29 --
 7 files changed, 276 insertions(+), 217 deletions(-)
 delete mode 100644 src/Elastic.Markdown/Page/ProductPills.cshtml

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css b/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
index 08e6357a16..7d90dca7fc 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/metadata-box.css
@@ -1,39 +1,184 @@
 /*
- * Page-top product pills + Requirements box. The pills sit just below the
- * H1 (one per `products:` frontmatter entry whose product has `hub:` set);
- * the box sits below the pills and surfaces applies_to-driven metadata in
- * a labeled two-column layout. Hub layout opts out (the partials return
- * early when YamlFrontMatter.Layout is set).
+ * Page-top "Availability" box. Sits below the H1 and consolidates two
+ * page-level metadata systems in a single container:
+ *
+ *   - Product hub pills, in the summary row alongside the "Availability"
+ *     label, for navigation to each product's hub page.
+ *   - applies_to-driven rows (Versions / Deployments) below the summary,
+ *     collapsible via native <details>, expanded by default.
+ *
+ * Hub layout (and any frontmatter Layout) opts out -- the partial returns
+ * early. The box only renders when at least one of pills or rows exists.
  */
 
 @layer components {
-	/*
-	 * Product hub pills below the H1. Brand-color dot + display name.
-	 */
-	/* Thin separator that sits between the H1 and the Requirements box,
-	   carrying the visual weight the old applies-to summary line used to
-	   provide. Keeps the page-top chrome anchored. */
-	.page-meta-divider {
-		height: 0;
-		margin: 18px 0;
-		border: none;
+	.metadata-box {
+		margin: 16px 0 24px 0;
+		padding: 8px 14px;
+		background: var(--color-grey-10);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 6px;
+		font-size: 13px;
+		line-height: 1.4;
+	}
+
+	.metadata-box-heading {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px 12px;
+		cursor: pointer;
+		list-style: none;
+		padding: 2px 0 6px 0;
+		user-select: none;
+	}
+	.metadata-box-heading::-webkit-details-marker {
+		display: none;
+	}
+	.metadata-box-heading:focus-visible {
+		outline: 2px solid var(--color-blue-elastic);
+		outline-offset: 2px;
+		border-radius: 3px;
+	}
+
+	.metadata-box-summary-only .metadata-box-heading {
+		cursor: default;
+	}
+
+	/* Title sits one step above the row labels in the visual hierarchy:
+	   slightly larger, heavier weight, full ink color. Row labels stay
+	   smaller and lighter, so the title reads as the box's heading and
+	   the pills next to it become the headlined entries. */
+	.metadata-box-title {
+		flex: 0 0 auto;
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+	}
+
+	.metadata-box-pills {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px;
+		flex: 1 1 auto;
+	}
+
+	.metadata-box-chevron {
+		flex-shrink: 0;
+		margin-left: auto;
+		color: var(--color-grey-60);
+		transition: transform 0.15s ease;
+	}
+	.metadata-box[open] .metadata-box-chevron {
+		transform: rotate(180deg);
+	}
+
+	.metadata-box-rows {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-top: 6px;
+		padding-top: 10px;
 		border-top: 1px solid var(--color-grey-20);
 	}
 
-	.product-pills {
+	.metadata-row {
 		display: flex;
 		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px 10px;
+		min-height: 24px;
+	}
+
+	.metadata-label {
+		flex: 0 0 auto;
+		min-width: 100px;
+		font-weight: 600;
+		color: var(--color-grey-80);
+	}
+
+	.metadata-values {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
 		gap: 6px;
+		min-width: 0;
+	}
+
+	/*
+	 * Render applies_to entries as plain comma-separated text + a small
+	 * "?" icon that carries the existing popover tooltip. Implemented in
+	 * CSS so we don't touch the popover web component:
+	 *   - Override the global `display: contents` on the popover host so
+	 *     it has its own box (and ::before content can render).
+	 *   - Use ::before with `attr(badge-key)` to print the entry's name.
+	 *   - Reskin the visible `.applicable-info` pill into a 16px "?"
+	 *     circle that still triggers the tooltip on hover/click.
+	 */
+	.metadata-values.applies applies-to-popover {
+		display: inline-flex;
+		align-items: center;
+		color: var(--color-ink-dark);
+	}
+	.metadata-values applies-to-popover::before {
+		content: attr(badge-key);
+	}
+	.metadata-values applies-to-popover:not(:first-child)::before {
+		content: ', ' attr(badge-key);
+	}
+
+	.metadata-values .applicable-info {
+		all: unset;
+		display: inline-flex;
 		align-items: center;
-		/* Pull tight against the breadcrumb's bottom padding so the pills
-		   read as part of the breadcrumb strip, not a separate row. */
-		margin: -16px 0 14px 0;
+		justify-content: center;
+		width: 14px;
+		height: 14px;
+		margin-left: 4px;
+		border-radius: 999px;
+		background: var(--color-grey-20);
+		color: var(--color-grey-80);
+		font-size: 10px;
+		font-weight: 700;
+		line-height: 1;
+		cursor: help;
+		transition:
+			background-color 0.15s ease,
+			color 0.15s ease;
+	}
+	.metadata-values .applicable-info::before {
+		content: '?';
+	}
+	.metadata-values .applicable-info > * {
+		display: none;
+	}
+	.metadata-values .applicable-info:hover {
+		background: var(--color-grey-30);
+		color: var(--color-ink-dark);
 	}
 
-	/* Override `.markdown-content a` (blue + underline) with a more
-	   specific selector. Pills are nav affordances, not body links.
-	   `!important` on color + decoration is a safety net against any
-	   utility-layer rules that beat us on cascade order. */
+	/* Unavailable items (sorted to the end by ApplicableToViewModel) render
+	   dimmed + struck-through to read as "not in scope" rather than as a
+	   peer alternative. */
+	.metadata-values applies-to-popover[lifecycle-class='unavailable']::before {
+		text-decoration: line-through;
+		text-decoration-color: var(--color-ink-light);
+		color: var(--color-ink-light);
+	}
+	.metadata-values
+		applies-to-popover[lifecycle-class='unavailable']
+		.applicable-info {
+		opacity: 0.65;
+	}
+
+	/*
+	 * Product hub pills (used inside the metadata box's summary row).
+	 * Brand-color dot + display name + arrow. Rendered as anchors, so we
+	 * override `.markdown-content a` (blue + underline) explicitly --
+	 * `!important` is the safety net against utility-layer rules that beat
+	 * us on cascade order.
+	 */
 	.markdown-content a.product-badge,
 	a.product-badge {
 		display: inline-flex;
@@ -125,118 +270,6 @@
 		background: rgb(0 191 179 / 0.06);
 	}
 
-	/*
-	 * Requirements box. Two columns: a heading on the left that titles the
-	 * whole box, and a stack of labeled rows on the right. Hidden when no
-	 * applies_to-driven row would render.
-	 */
-	.metadata-box {
-		margin: 16px 0 24px 0;
-		padding: 8px 14px;
-		background: var(--color-grey-10);
-		border: 1px solid var(--color-grey-20);
-		border-radius: 6px;
-		font-size: 13px;
-		line-height: 1.4;
-	}
-
-	.metadata-box-heading {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 12px;
-		cursor: pointer;
-		list-style: none;
-		padding: 4px 0;
-		font-size: 14px;
-		font-weight: 600;
-		color: var(--color-ink-dark);
-		user-select: none;
-	}
-	.metadata-box-heading::-webkit-details-marker {
-		display: none;
-	}
-	.metadata-box-heading:focus-visible {
-		outline: 2px solid var(--color-blue-elastic);
-		outline-offset: 2px;
-		border-radius: 3px;
-	}
-
-	.metadata-box-chevron {
-		flex-shrink: 0;
-		color: var(--color-grey-60);
-		transition: transform 0.15s ease;
-	}
-	.metadata-box[open] .metadata-box-chevron {
-		transform: rotate(180deg);
-	}
-
-	.metadata-box-rows {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		margin-top: 8px;
-		padding-top: 10px;
-		border-top: 1px solid var(--color-grey-20);
-	}
-
-	.metadata-row {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 6px 10px;
-		min-height: 24px;
-	}
-
-	.metadata-label {
-		flex: 0 0 auto;
-		min-width: 100px;
-		font-weight: 600;
-		color: var(--color-ink-dark);
-	}
-
-	.metadata-values {
-		display: inline-flex;
-		flex-wrap: wrap;
-		align-items: center;
-		row-gap: 4px;
-		min-width: 0;
-	}
-
-	/*
-	 * When the row has multiple entries, separate them with "or". Override
-	 * the global `.applies applies-to-popover { display: contents }` so the
-	 * popover's ::before generates a real separator inline.
-	 */
-	.metadata-values.applies applies-to-popover {
-		display: inline-flex;
-		align-items: center;
-	}
-	.metadata-values > * + *::before {
-		content: 'or';
-		margin: 0 8px;
-		color: var(--color-ink-light);
-		font-size: 12px;
-		font-style: italic;
-	}
-
-	/*
-	 * Plain pill for placeholder values like the Subscription row, until
-	 * real metadata replaces it. Visually quieter than the applies_to
-	 * popover badges so it reads as informational, not interactive.
-	 */
-	.metadata-pill {
-		display: inline-flex;
-		align-items: center;
-		padding: 2px 10px;
-		border-radius: 999px;
-		background: var(--color-white);
-		border: 1px solid var(--color-grey-20);
-		color: var(--color-ink-dark);
-		font-size: 12px;
-		line-height: 1.3;
-	}
-
 	@media (max-width: 640px) {
 		.metadata-row {
 			flex-direction: column;
diff --git a/src/Elastic.Markdown/Myst/Components/ApplicabilityRenderer.cs b/src/Elastic.Markdown/Myst/Components/ApplicabilityRenderer.cs
index a6a3dd4a6d..14708ddaf0 100644
--- a/src/Elastic.Markdown/Myst/Components/ApplicabilityRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Components/ApplicabilityRenderer.cs
@@ -164,8 +164,10 @@ private static PopoverData BuildPopoverData(
 
 		var showVersionNote = productInfo is { IncludeVersionNote: true } && versioningSystem.IsVersioned();
 
+		var description = InterpolateVersionPlaceholders(productInfo?.Description, versioningSystem);
+
 		return new PopoverData(
-			ProductDescription: productInfo?.Description,
+			ProductDescription: description,
 			AvailabilityItems: orderedApplicabilities.Select(applicability => BuildAvailabilityItem(applicability, versioningSystem, productName, applicabilities.Count)).OfType<PopoverAvailabilityItem>().ToArray(),
 			AdditionalInfo: productInfo?.AdditionalAvailabilityInfo,
 			ShowVersionNote: showVersionNote,
@@ -173,6 +175,22 @@ private static PopoverData BuildPopoverData(
 		);
 	}
 
+	/// <summary>
+	/// Substitutes <c>{base}</c>, <c>{current}</c>, and <c>{base-major}</c> placeholders in
+	/// product descriptions with values from the versioning system, so tooltips can surface
+	/// the actual version range without hardcoding it in <c>ProductDescriptions</c>.
+	/// </summary>
+	private static string? InterpolateVersionPlaceholders(string? template, VersioningSystem versioningSystem)
+	{
+		if (string.IsNullOrEmpty(template))
+			return template;
+
+		return template
+			.Replace("{base}", versioningSystem.Base.ToString())
+			.Replace("{current}", versioningSystem.Current.ToString())
+			.Replace("{base-major}", versioningSystem.Base.Major.ToString());
+	}
+
 	/// <summary>
 	/// Builds an availability item for an applicability entry.
 	/// Returns null if the item should not be added to the availability list.
diff --git a/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs b/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
index 7dffae80ea..1f0992f4a3 100644
--- a/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
@@ -91,7 +91,24 @@ public IReadOnlyCollection<ApplicabilityItem> GetApplicabilityItems()
 			_ => CollectCombinedRaw()
 		};
 
-		return RenderGroupedItems(rawItems).ToArray();
+		var rendered = RenderGroupedItems(rawItems);
+
+		// In the metadata-box rows, surface Serverless first, then other available
+		// items, then unavailable items at the end. The CSS suppresses the "or"
+		// separator before unavailable items so they read as a distinct group.
+		if (BadgePlacement is ApplicabilityBadgePlacement.StackVersionsRow
+			or ApplicabilityBadgePlacement.DeploymentsRow
+			or ApplicabilityBadgePlacement.OtherProductsRow)
+		{
+			rendered = rendered
+				.Select((item, index) => (item, index))
+				.OrderBy(x => x.item.RenderData.LifecycleClass == "unavailable" ? 1 : 0)
+				.ThenBy(x => x.item.Key.StartsWith("Serverless", StringComparison.Ordinal) ? 0 : 1)
+				.ThenBy(x => x.index)
+				.Select(x => x.item);
+		}
+
+		return rendered.ToArray();
 	}
 
 	private List<RawApplicabilityItem> CollectCombinedRaw()
diff --git a/src/Elastic.Markdown/Myst/Components/ProductDescriptions.cs b/src/Elastic.Markdown/Myst/Components/ProductDescriptions.cs
index bee9e8a7c8..612fd1af87 100644
--- a/src/Elastic.Markdown/Myst/Components/ProductDescriptions.cs
+++ b/src/Elastic.Markdown/Myst/Components/ProductDescriptions.cs
@@ -34,33 +34,34 @@ bool IncludeVersionNote
 
 	private static readonly Dictionary<VersioningSystemId, ProductInfo> Descriptions = new()
 	{
-		// Stack
+		// Stack -- {base} and {current} are interpolated by ApplicabilityRenderer
+		// from the Stack VersioningSystem so the tooltip surfaces the actual range.
 		[VersioningSystemId.Stack] = new ProductInfo(
-			Description: "The <strong>Elastic Stack</strong> includes Elastic's core products such as Elasticsearch, Kibana, Logstash, and Beats.",
+			Description: "This documentation applies to <strong>Elastic Stack</strong> {base} to {current}. To know if this functionality exists in versions prior to v{base-major}, refer to the corresponding version of the documentation.",
 			AdditionalAvailabilityInfo: "Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.",
 			IncludeVersionNote: true
 		),
 
 		// Serverless
 		[VersioningSystemId.Serverless] = new ProductInfo(
-			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.",
+			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.",
 			AdditionalAvailabilityInfo: "Serverless interfaces and procedures might differ from classic Elastic Stack deployments.",
 			IncludeVersionNote: false
 		),
 
 		// Serverless Project Types
 		[VersioningSystemId.ElasticsearchProject] = new ProductInfo(
-			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.",
+			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.",
 			AdditionalAvailabilityInfo: null,
 			IncludeVersionNote: false
 		),
 		[VersioningSystemId.ObservabilityProject] = new ProductInfo(
-			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.",
+			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.",
 			AdditionalAvailabilityInfo: null,
 			IncludeVersionNote: false
 		),
 		[VersioningSystemId.SecurityProject] = new ProductInfo(
-			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.",
+			Description: "<strong>Elastic Cloud Serverless</strong> projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.",
 			AdditionalAvailabilityInfo: null,
 			IncludeVersionNote: false
 		),
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index 4f89660c1c..70ca017a50 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -92,10 +92,8 @@
 <section id="elastic-docs-v3">
 	@if (Model.CurrentDocument.YamlFrontMatter?.Layout != MarkdownPageLayout.Hub)
 	{
-		@await RenderPartialAsync(ProductPills.Create(Model))
 		@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
 		@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
-		<hr class="page-meta-divider" />
 		@await RenderPartialAsync(MetadataBox.Create(Model))
 	}
 	@(new HtmlString(Model.MarkdownHtml))
diff --git a/src/Elastic.Markdown/Page/MetadataBox.cshtml b/src/Elastic.Markdown/Page/MetadataBox.cshtml
index 0b49d8dffd..c0ae7791fc 100644
--- a/src/Elastic.Markdown/Page/MetadataBox.cshtml
+++ b/src/Elastic.Markdown/Page/MetadataBox.cshtml
@@ -5,6 +5,12 @@
 	if (layout is not null)
 		return;
 
+	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
+	var productHubs = Model.Products
+		.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
+		.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
+		.ToList();
+
 	var hasStackVersions = false;
 	var hasDeployments = false;
 	if (Model.AppliesTo is not null)
@@ -14,56 +20,71 @@
 		hasDeployments = Model.AppliesTo.Deployment is not null;
 	}
 
-	// Subscription is a placeholder until the metadata exists. Hardcoded so the
-	// row is always visible alongside the real applies_to data.
-	const string subscriptionPlaceholder = "Enterprise";
-
-	if (!hasStackVersions && !hasDeployments)
+	var hasPills = productHubs.Count > 0;
+	var hasRows = hasStackVersions || hasDeployments;
+	if (!hasPills && !hasRows)
 		return;
 }
-<details class="metadata-box" open aria-label="Page requirements">
+<details class="metadata-box@(hasRows ? "" : " metadata-box-summary-only")" @(hasRows ? "open" : "") aria-label="This page applies to">
 	<summary class="metadata-box-heading">
-		<span class="metadata-box-title">Requirements</span>
-		<svg class="metadata-box-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-			<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-		</svg>
-	</summary>
-	<div class="metadata-box-rows">
-		@if (hasStackVersions)
+		<span class="metadata-box-title">This page applies to</span>
+		@if (hasPills)
 		{
-			<div class="metadata-row metadata-row-versions">
-				<span class="metadata-label">Versions</span>
-				<div class="metadata-values applies">
-					@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
-					{
-						AppliesTo = Model.AppliesTo!,
-						Inline = false,
-						VersionsConfig = Model.VersionsConfig,
-						BadgePlacement = ApplicabilityBadgePlacement.StackVersionsRow
-					}))
-				</div>
+			<div class="metadata-box-pills">
+				@foreach (var product in productHubs)
+				{
+					var hub = product.Hub!;
+					var isAbsolute = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
+						|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
+					var href = isAbsolute ? hub : $"{prefix}/{hub.Trim('/')}/";
+					<a class="product-badge product-badge-@product.Id" href="@href">
+						<span class="product-badge-dot" aria-hidden="true"></span>
+						<span class="product-badge-label">@product.DisplayName</span>
+						<span class="product-badge-arrow" aria-hidden="true">&rarr;</span>
+					</a>
+				}
 			</div>
 		}
-		@if (hasDeployments)
+		@if (hasRows)
 		{
-			<div class="metadata-row metadata-row-deployments">
-				<span class="metadata-label">Deployments</span>
-				<div class="metadata-values applies">
-					@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
-					{
-						AppliesTo = Model.AppliesTo!,
-						Inline = false,
-						VersionsConfig = Model.VersionsConfig,
-						BadgePlacement = ApplicabilityBadgePlacement.DeploymentsRow
-					}))
-				</div>
-			</div>
+			<svg class="metadata-box-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+			</svg>
 		}
-		<div class="metadata-row metadata-row-subscription">
-			<span class="metadata-label">Subscription</span>
-			<div class="metadata-values">
-				<span class="metadata-pill">@subscriptionPlaceholder</span>
-			</div>
+	</summary>
+	@if (hasRows)
+	{
+		<div class="metadata-box-rows">
+			@if (hasStackVersions)
+			{
+				<div class="metadata-row metadata-row-versions">
+					<span class="metadata-label">Versions</span>
+					<div class="metadata-values applies">
+						@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+						{
+							AppliesTo = Model.AppliesTo!,
+							Inline = false,
+							VersionsConfig = Model.VersionsConfig,
+							BadgePlacement = ApplicabilityBadgePlacement.StackVersionsRow
+						}))
+					</div>
+				</div>
+			}
+			@if (hasDeployments)
+			{
+				<div class="metadata-row metadata-row-deployments">
+					<span class="metadata-label">Deployments</span>
+					<div class="metadata-values applies">
+						@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+						{
+							AppliesTo = Model.AppliesTo!,
+							Inline = false,
+							VersionsConfig = Model.VersionsConfig,
+							BadgePlacement = ApplicabilityBadgePlacement.DeploymentsRow
+						}))
+					</div>
+				</div>
+			}
 		</div>
-	</div>
+	}
 </details>
diff --git a/src/Elastic.Markdown/Page/ProductPills.cshtml b/src/Elastic.Markdown/Page/ProductPills.cshtml
deleted file mode 100644
index f601189ff6..0000000000
--- a/src/Elastic.Markdown/Page/ProductPills.cshtml
+++ /dev/null
@@ -1,29 +0,0 @@
-@inherits RazorSlice<Elastic.Markdown.Page.IndexViewModel>
-@{
-	var layout = Model.CurrentDocument.YamlFrontMatter?.Layout;
-	if (layout is not null)
-		return;
-
-	var prefix = Model.UrlPathPrefix?.TrimEnd('/') ?? string.Empty;
-	var productHubs = Model.Products
-		.Where(p => !string.IsNullOrWhiteSpace(p.Hub))
-		.OrderBy(p => p.DisplayName, StringComparer.Ordinal)
-		.ToList();
-
-	if (productHubs.Count == 0)
-		return;
-}
-<div class="product-pills" role="navigation" aria-label="Product hubs related to this page">
-	@foreach (var product in productHubs)
-	{
-		var hub = product.Hub!;
-		var isAbsolute = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
-			|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
-		var href = isAbsolute ? hub : $"{prefix}/{hub.Trim('/')}/";
-		<a class="product-badge product-badge-@product.Id" href="@href">
-			<span class="product-badge-dot" aria-hidden="true"></span>
-			<span class="product-badge-label">@product.DisplayName</span>
-			<span class="product-badge-arrow" aria-hidden="true">&rarr;</span>
-		</a>
-	}
-</div>

From 63f927e9a646f67e59c8d60b5264145933ba6d16 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 4 May 2026 20:15:17 +0200
Subject: [PATCH 34/56] Repoint product hub URLs at the real
 /products/<product>/v9/ pages

The two hub gist HTML files were a stand-in while the V2 nav wiring was
unresolved. That's fixed upstream and the docs-content `hub-pages` branch
now serves the real hub markdown, so product pills should link to the
canonical URLs (`/products/elasticsearch/v9`, `/products/kibana/v9`)
instead of the gist previews.

The two visual-reference gists are no longer used by any code path. The
design handoff gist is still referenced in the PR and remains the
human-facing UX/technical write-up.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/products.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/products.yml b/config/products.yml
index da1fcb230a..874f835c70 100644
--- a/config/products.yml
+++ b/config/products.yml
@@ -147,7 +147,7 @@ products:
   elasticsearch:
     display: 'Elasticsearch'
     versioning: 'stack'
-    hub: 'https://htmlpreview.github.io/?https://gist.github.com/florent-leborgne/b2ddb83d7b849980d1668aef600d0139/raw/elasticsearch-hub.html'
+    hub: 'products/elasticsearch/v9'
   elasticsearch-client:
     display: 'Elasticsearch Client'
     versioning: 'stack'
@@ -208,7 +208,7 @@ products:
   kibana:
     display: 'Kibana'
     versioning: 'stack'
-    hub: 'https://htmlpreview.github.io/?https://gist.github.com/florent-leborgne/c9075416b50ec111a09897b7be4462cc/raw/kibana-hub.html'
+    hub: 'products/kibana/v9'
   logstash:
     display: 'Logstash'
     versioning: 'stack'

From 1fab04a8cd2dcfdf8c317d8f58b9d25153c2c033 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 4 May 2026 20:29:40 +0200
Subject: [PATCH 35/56] Add Product hubs landing page to V2 nav

References docs-content://products/index.md so /products/ resolves to
the landing page instead of 404. The landing lists Elasticsearch and
Kibana hubs alongside stubs for upcoming products and deployment
runbooks. Companion docs-content commit lands the index.md itself on
the hub-pages branch.
---
 config/navigation-v2.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 39f9aea547..6dce230cac 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3310,6 +3310,8 @@ nav:
   - section: Product hubs
     url: /products/
     children:
+    - page: docs-content://products/index.md
+      title: Product hubs
     - page: docs-content://products/kibana/v9.md
       title: Kibana
     - page: docs-content://products/elasticsearch/v9.md

From 1c18fa145583b2df17f6e6cc076e903b9c50f33e Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 4 May 2026 20:40:15 +0200
Subject: [PATCH 36/56] Update authoring snapshot tests for new applies-to
 tooltip copy

Stack and Serverless productDescription text changed (Stack interpolates
{base}/{current}/{base-major} from the VersioningSystem; Serverless
appends a sentence about UI/capabilities differing from versioned
Stack), so the popover-data attribute in 40 snapshot fixtures across
ApplicableToComponent.fs, AppliesToRole.fs, and Admonitions.fs needed
to be updated to match. The test fixture's stack VersioningSystem has
base==current==8.0.0, so the substituted string reads "Elastic Stack
8.0.0 to 8.0.0... prior to v8".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Applicability/ApplicableToComponent.fs    | 74 +++++++++----------
 tests/authoring/Blocks/Admonitions.fs         |  6 +-
 tests/authoring/Inline/AppliesToRole.fs       |  4 +-
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/tests/authoring/Applicability/ApplicableToComponent.fs b/tests/authoring/Applicability/ApplicableToComponent.fs
index b6970a7828..c1ad9ae8ac 100644
--- a/tests/authoring/Applicability/ApplicableToComponent.fs
+++ b/tests/authoring/Applicability/ApplicableToComponent.fs
@@ -31,7 +31,7 @@ stack: ga 9.0.0
     let ``renders GA with version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -47,7 +47,7 @@ stack: preview 9.1.0
     let ``renders preview future version as planned`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -63,7 +63,7 @@ stack: beta 8.8.0
     let ``renders beta future version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -79,7 +79,7 @@ stack: deprecated 8.7.0
     let ``renders deprecation planned`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Deprecation planned" lifecycle-class="deprecated" lifecycle-name="Deprecated" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for deprecation&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be deprecated in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Deprecation planned" lifecycle-class="deprecated" lifecycle-name="Deprecated" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for deprecation&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be deprecated in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -95,7 +95,7 @@ stack: removed 8.6.0
     let ``renders planned for removal`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Removal planned" lifecycle-class="removed" lifecycle-name="Removed" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for removal&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be removed in an upcoming Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Removal planned" lifecycle-class="removed" lifecycle-name="Removed" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for removal&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be removed in an upcoming Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -111,7 +111,7 @@ stack: ga
     let ``renders ga without version in badge or popover`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -128,7 +128,7 @@ serverless: ga
     let ``renders serverless ga`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Serverless" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Serverless interfaces and procedures might differ from classic Elastic Stack deployments.&quot;,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false"></applies-to-popover>
+	<applies-to-popover badge-key="Serverless" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Serverless interfaces and procedures might differ from classic Elastic Stack deployments.&quot;,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false"></applies-to-popover>
 </p>
 """
 
@@ -146,11 +146,11 @@ serverless:
     let ``renders serverless individual projects`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Serverless Elasticsearch" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Elasticsearch projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Serverless Elasticsearch" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Elasticsearch projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
 </applies-to-popover>
-	<applies-to-popover badge-key="Serverless Observability" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Observability projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Serverless Observability" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Observability projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
 </applies-to-popover>
-	<applies-to-popover badge-key="Serverless Security" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Security projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Serverless Security" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Security projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -292,7 +292,7 @@ stack: ga 8.8.0, preview 8.1.0
     let ``renders Planned when GA and Preview are both unreleased`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -308,7 +308,7 @@ stack: deprecated 9.1.0
     let ``renders deprecation planned for future version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Deprecation planned" lifecycle-class="deprecated" lifecycle-name="Deprecated" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for deprecation&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be deprecated in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Deprecation planned" lifecycle-class="deprecated" lifecycle-name="Deprecated" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for deprecation&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be deprecated in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -324,7 +324,7 @@ stack: removed 9.1.0
     let ``renders removal planned for future version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Removal planned" lifecycle-class="removed" lifecycle-name="Removed" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for removal&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be removed in an upcoming Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Removal planned" lifecycle-class="removed" lifecycle-name="Removed" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned for removal&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is planned to be removed in an upcoming Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -341,7 +341,7 @@ stack: unavailable
     let ``renders unavailable`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" lifecycle-class="unavailable" lifecycle-name="Unavailable" show-lifecycle-name="true" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Unavailable&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is not available in Elastic Stack.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" lifecycle-class="unavailable" lifecycle-name="Unavailable" show-lifecycle-name="true" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Unavailable&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is not available in Elastic Stack.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -398,11 +398,11 @@ apm_agent_java: beta 9.1.0
     let ``renders complex mixed scenario`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Serverless Elasticsearch" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Elasticsearch projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Serverless Elasticsearch" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Elasticsearch projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
 </applies-to-popover>
-	<applies-to-popover badge-key="Serverless Observability" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Observability projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Serverless Observability" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Serverless Observability projects update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false">
 </applies-to-popover>
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 	<applies-to-popover badge-key="ECK" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud on Kubernetes\u003C/strong\u003E extends Kubernetes orchestration capabilities to allow you to deploy and manage components of the Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Cloud on Kubernetes update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
@@ -428,7 +428,7 @@ deployment:
     let ``renders stack and ece planned`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 	<applies-to-popover badge-key="ECE" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Enterprise\u003C/strong\u003E is a self-managed orchestration platform for deploying and managing the Elastic Stack at scale.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Cloud Enterprise update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
@@ -446,7 +446,7 @@ stack:
     let ``no version defaults to ga`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -470,8 +470,8 @@ product: ga 9.0.0
     let ``renders VersioningSystemId coverage`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Serverless" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Serverless interfaces and procedures might differ from classic Elastic Stack deployments.&quot;,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false"></applies-to-popover>
-	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false"></applies-to-popover>
+	<applies-to-popover badge-key="Serverless" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Serverless interfaces and procedures might differ from classic Elastic Stack deployments.&quot;,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false"></applies-to-popover>
+	<applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false"></applies-to-popover>
 	<applies-to-popover badge-key="ECH" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Hosted\u003C/strong\u003E lets you manage and configure one or more deployments of the versioned Elastic Stack, hosted on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Cloud Hosted update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="false"></applies-to-popover>
 	<applies-to-popover badge-key="ECK" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud on Kubernetes\u003C/strong\u003E extends Kubernetes orchestration capabilities to allow you to deploy and manage components of the Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Cloud on Kubernetes update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false"></applies-to-popover>
 	<applies-to-popover badge-key="ECE" badge-lifecycle-text="Planned" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Enterprise\u003C/strong\u003E is a self-managed orchestration platform for deploying and managing the Elastic Stack at scale.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Cloud Enterprise update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false"></applies-to-popover>
@@ -493,7 +493,7 @@ stack: ga 8.0.0, beta 8.1.0
     let ``renders multiple lifecycles with ellipsis and shows GA lifecycle`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="8.0" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available in 8.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="8.0" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available in 8.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -509,7 +509,7 @@ stack: ga 7.0.0
     let ``renders ga since released version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -525,7 +525,7 @@ stack: preview 7.0.0
     let ``renders preview since released version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -541,7 +541,7 @@ stack: beta 7.0.0
     let ``renders beta since released version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Beta since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in beta and is not ready for production usage. For beta features, the design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Beta since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in beta and is not ready for production usage. For beta features, the design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -557,7 +557,7 @@ stack: deprecated 7.0.0
     let ``renders deprecated since released version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="deprecated" lifecycle-name="Deprecated" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Deprecated since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is deprecated. You can still use it, but it\u0027ll be removed in a future Elastic Stack update.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="deprecated" lifecycle-name="Deprecated" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Deprecated since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is deprecated. You can still use it, but it\u0027ll be removed in a future Elastic Stack update.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -573,7 +573,7 @@ stack: removed 7.0.0
     let ``renders removed in released version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0" lifecycle-class="removed" lifecycle-name="Removed" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Removed in 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality was removed. You can no longer use it if you\u0027re running on this version or a later one.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0" lifecycle-class="removed" lifecycle-name="Removed" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Removed in 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality was removed. You can no longer use it if you\u0027re running on this version or a later one.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -590,7 +590,7 @@ stack: ga =7.5
     let ``renders ga in exact released version`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.5" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available in 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.5" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available in 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -606,7 +606,7 @@ stack: ga 7.0-8.0
     let ``renders ga from-to when both ends released`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0-8.0" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available from 7.0 to 8.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0-8.0" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available from 7.0 to 8.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -622,7 +622,7 @@ stack: ga 7.0-9.0
     let ``renders ga since min when max unreleased`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0+" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available since 7.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -639,7 +639,7 @@ stack: preview 7.0, ga 7.5
     let ``renders ga badge with both lifecycles in popover`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.5+" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available since 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;},{&quot;text&quot;:&quot;Preview from 7.0 to 7.4&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.5+" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available since 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;},{&quot;text&quot;:&quot;Preview from 7.0 to 7.4&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -655,7 +655,7 @@ stack: preview 7.5.4!
     let ``renders patch version when explicitly requested with exclamation mark`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.5.4+" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview since 7.5.4&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.5.4+" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview since 7.5.4&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -671,7 +671,7 @@ stack: preview 7.5.4
     let ``hides patch version when no exclamation mark used`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.5+" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview since 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.5+" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview since 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -687,7 +687,7 @@ stack: beta 7.0.3!-7.5.2!
     let ``renders range with patch versions when both have exclamation marks`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0.3-7.5.2" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Beta from 7.0.3 to 7.5.2&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in beta and is not ready for production usage. For beta features, the design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0.3-7.5.2" lifecycle-class="beta" lifecycle-name="Beta" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Beta from 7.0.3 to 7.5.2&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in beta and is not ready for production usage. For beta features, the design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -703,7 +703,7 @@ stack: ga 7.0.5!-7.5
     let ``renders range with patch on mininum version only when explicit operator is used`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0.5-7.5" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available from 7.0.5 to 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0.5-7.5" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available from 7.0.5 to 7.5&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -719,7 +719,7 @@ stack: ga 7.0-7.5.3!
     let ``renders range with patch on maxinum version only when explicit operator is used`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.0-7.5.3" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available from 7.0 to 7.5.3&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.0-7.5.3" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available from 7.0 to 7.5.3&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
@@ -735,7 +735,7 @@ stack: ga =7.5.3!
     let ``renders exact version with patch when explicit operator is used`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<applies-to-popover badge-key="Stack" badge-version="7.5.3" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available in 7.5.3&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
+	<applies-to-popover badge-key="Stack" badge-version="7.5.3" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="true" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available in 7.5.3&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="false">
 </applies-to-popover>
 </p>
 """
diff --git a/tests/authoring/Blocks/Admonitions.fs b/tests/authoring/Blocks/Admonitions.fs
index 7d0585d504..719fa637d0 100644
--- a/tests/authoring/Blocks/Admonitions.fs
+++ b/tests/authoring/Blocks/Admonitions.fs
@@ -64,7 +64,7 @@ This is a custom admonition with applies_to information.
 	<div class="admonition-header">
 		<span class="admonition-title">Note</span>
 		<span class="applies applies-admonition">
-			<applies-to-popover badge-key="Stack" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="true"></applies-to-popover>
+			<applies-to-popover badge-key="Stack" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="true"></applies-to-popover>
 		</span>
 		<span class="admonition-title__separator"></span>
 	</div>
@@ -76,7 +76,7 @@ This is a custom admonition with applies_to information.
 	<div class="admonition-header">
 		<span class="admonition-title">Warning</span>
 		<span class="applies applies-admonition">
-			<applies-to-popover badge-key="Serverless" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Serverless interfaces and procedures might differ from classic Elastic Stack deployments.&quot;,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="true"></applies-to-popover>
+			<applies-to-popover badge-key="Serverless" lifecycle-class="ga" lifecycle-name="GA" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Generally available&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is generally available and ready for production usage.&quot;}],&quot;additionalInfo&quot;:&quot;Serverless interfaces and procedures might differ from classic Elastic Stack deployments.&quot;,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="true"></applies-to-popover>
 		</span>
 		<span class="admonition-title__separator"></span>
 	</div>
@@ -88,7 +88,7 @@ This is a custom admonition with applies_to information.
 	<div class="admonition-header">
 		<span class="admonition-title">Tip</span>
 		<span class="applies applies-admonition">
-			<applies-to-popover badge-key="Serverless Elasticsearch" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="true"></applies-to-popover>
+			<applies-to-popover badge-key="Serverless Elasticsearch" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;\u003Cstrong\u003EElastic Cloud Serverless\u003C/strong\u003E projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Their UI and capabilities can differ from the traditionally versioned Elastic Stack.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:null,&quot;showVersionNote&quot;:false,&quot;versionNote&quot;:null}" show-popover="true" is-inline="true"></applies-to-popover>
 		</span>
 		<span class="admonition-title__separator"></span>
 	</div>
diff --git a/tests/authoring/Inline/AppliesToRole.fs b/tests/authoring/Inline/AppliesToRole.fs
index 81bb0f78fd..3c93c00cf3 100644
--- a/tests/authoring/Inline/AppliesToRole.fs
+++ b/tests/authoring/Inline/AppliesToRole.fs
@@ -30,7 +30,7 @@ This is an inline {applies_to}`stack: preview 9.1` element.
         markdown |> convertsToHtml """
 <p>This is an inline
 	<span class="applies applies-inline">
-        <applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="true">
+        <applies-to-popover badge-key="Stack" badge-lifecycle-text="Planned" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="false" show-version="false" has-multiple-lifecycles="false" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Planned&quot;,&quot;lifecycleDescription&quot;:&quot;We plan to add this functionality in a future Elastic Stack update. Subject to changes.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="true">
         </applies-to-popover>
 	</span>
 	element.</p>
@@ -150,7 +150,7 @@ This is an inline {applies_to}`stack: preview 8.0, ga 8.1` element.
         markdown |> convertsToHtml """
 <p>This is an inline
 	<span class="applies applies-inline">
-        <applies-to-popover badge-key="Stack" badge-version="8.0" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;The \u003Cstrong\u003EElastic Stack\u003C/strong\u003E includes Elastic\u0027s core products such as Elasticsearch, Kibana, Logstash, and Beats.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview in 8.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="true">
+        <applies-to-popover badge-key="Stack" badge-version="8.0" lifecycle-class="preview" lifecycle-name="Preview" show-lifecycle-name="true" show-version="true" has-multiple-lifecycles="true" popover-data="{&quot;productDescription&quot;:&quot;This documentation applies to \u003Cstrong\u003EElastic Stack\u003C/strong\u003E 8.0.0 to 8.0.0. To know if this functionality exists in versions prior to v8, refer to the corresponding version of the documentation.&quot;,&quot;availabilityItems&quot;:[{&quot;text&quot;:&quot;Preview in 8.0&quot;,&quot;lifecycleDescription&quot;:&quot;This functionality is in technical preview and is not ready for production usage. Technical preview features may change or be removed at any time. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features. Specific Support terms apply.&quot;}],&quot;additionalInfo&quot;:&quot;Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments.&quot;,&quot;showVersionNote&quot;:true,&quot;versionNote&quot;:&quot;This documentation corresponds to the latest patch available for each minor version. If you\u0027re not using the latest patch, check the \u003Ca href=\u0022https://www.elastic.co/docs/release-notes\u0022\u003Erelease notes\u003C/a\u003E for changes.&quot;}" show-popover="true" is-inline="true">
         </applies-to-popover>
 	</span>
 	element.</p>

From 54c3a7e272bbebb9024651de7d81609519a42d7d Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 4 May 2026 21:13:46 +0200
Subject: [PATCH 37/56] Stop pill click from toggling the metadata box

The product pill <a> lives inside <details>/<summary>, so a native
click on the pill toggles the box and the link doesn't navigate.
`onclick="event.stopPropagation()"` lets the link navigate while
the toggle is suppressed. Toggle still works on every other part of
the summary (label, chevron, empty space).
---
 src/Elastic.Markdown/Page/MetadataBox.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Page/MetadataBox.cshtml b/src/Elastic.Markdown/Page/MetadataBox.cshtml
index c0ae7791fc..58a1035a77 100644
--- a/src/Elastic.Markdown/Page/MetadataBox.cshtml
+++ b/src/Elastic.Markdown/Page/MetadataBox.cshtml
@@ -37,7 +37,7 @@
 					var isAbsolute = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
 						|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
 					var href = isAbsolute ? hub : $"{prefix}/{hub.Trim('/')}/";
-					<a class="product-badge product-badge-@product.Id" href="@href">
+					<a class="product-badge product-badge-@product.Id" href="@href" onclick="event.stopPropagation()">
 						<span class="product-badge-dot" aria-hidden="true"></span>
 						<span class="product-badge-label">@product.DisplayName</span>
 						<span class="product-badge-arrow" aria-hidden="true">&rarr;</span>

From 3357eb60d7526ec21ed9cb5a00340375210b3f89 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 4 May 2026 22:46:32 +0200
Subject: [PATCH 38/56] Make hub-page navigation work cleanly from htmx-boosted
 swaps

Three small fixes triggered by clicking through to hub pages:

- MetadataBox.cshtml: product pill <a> now carries hx-boost="false"
  so the body-level hx-boost="true" doesn't intercept the click. The
  onclick="event.stopPropagation()" still suppresses the <details>
  toggle so the click navigates rather than collapsing the box.

- _Layout.cshtml: hub layout adds an empty <aside id="toc-nav"
  hidden> so htmx's hx-select-oob="#content-container,#toc-nav"
  swap doesn't fail on missing target when boosting from a regular
  page. Hub pages have their own inline {on-this-page} chip, so the
  TOC slot stays empty.

- hub.css: drop the grey + dotted page background. It made the page
  read inconsistently between full-load and htmx-boosted swap (the
  swap leaves the regular layout's white body intact). Hero stays
  dark navy; section cards keep their own visual separation.
---
 .../Assets/markdown/hub.css                         | 13 +++----------
 src/Elastic.Markdown/Page/MetadataBox.cshtml        |  2 +-
 src/Elastic.Markdown/_Layout.cshtml                 |  2 ++
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 8ea07978b8..1a9f814d0b 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -17,16 +17,9 @@
  */
 
 @layer components {
-	/* Page wrapper: dotted background like the gist, full-width content. */
-	.hub-page {
-		background-color: var(--color-grey-10);
-		background-image: radial-gradient(
-			circle,
-			var(--color-grey-20) 0.75px,
-			transparent 0.75px
-		);
-		background-size: 24px 24px;
-	}
+	/* Page wrapper: full-width content. Stays white so the page reads
+	   consistently whether the user lands via full navigation or via an
+	   htmx-boosted swap from a regular docs page. */
 	.hub-page .hub-content {
 		@apply mb-20 w-full max-w-none p-0;
 	}
diff --git a/src/Elastic.Markdown/Page/MetadataBox.cshtml b/src/Elastic.Markdown/Page/MetadataBox.cshtml
index 58a1035a77..4d69e8494d 100644
--- a/src/Elastic.Markdown/Page/MetadataBox.cshtml
+++ b/src/Elastic.Markdown/Page/MetadataBox.cshtml
@@ -37,7 +37,7 @@
 					var isAbsolute = hub.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
 						|| hub.StartsWith("https://", StringComparison.OrdinalIgnoreCase);
 					var href = isAbsolute ? hub : $"{prefix}/{hub.Trim('/')}/";
-					<a class="product-badge product-badge-@product.Id" href="@href" onclick="event.stopPropagation()">
+					<a class="product-badge product-badge-@product.Id" href="@href" hx-boost="false" onclick="event.stopPropagation()">
 						<span class="product-badge-dot" aria-hidden="true"></span>
 						<span class="product-badge-label">@product.DisplayName</span>
 						<span class="product-badge-arrow" aria-hidden="true">&rarr;</span>
diff --git a/src/Elastic.Markdown/_Layout.cshtml b/src/Elastic.Markdown/_Layout.cshtml
index 9d141914ab..20974384c7 100644
--- a/src/Elastic.Markdown/_Layout.cshtml
+++ b/src/Elastic.Markdown/_Layout.cshtml
@@ -63,6 +63,8 @@
 							@await RenderBodyAsync()
 						</article>
 					</main>
+					@* Empty TOC slot so htmx hx-select-oob="#toc-nav" swaps don't fail when boosted from a regular page. Hub pages have their own inline {on-this-page} chip. *@
+					<aside id="toc-nav" class="hidden" aria-hidden="true"></aside>
 				</div>
 			</div>
 		</div>

From 588260f13f075b0bb5906d61bbbbfe356367832a Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Thu, 7 May 2026 10:58:47 +0200
Subject: [PATCH 39/56] Update top navigation order

Co-Authored-By: GPT-5.5 <noreply@openai.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 config/navigation-v2.yml | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 6dce230cac..b08a0ff54c 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3285,6 +3285,16 @@ nav:
   #      - page: docs-content://troubleshoot/ingest/opentelemetry/index.md
   #        title: Troubleshoot EDOT
 
+  - section: Products
+    url: /products/
+    children:
+    - page: docs-content://products/index.md
+      title: Product hubs
+    - page: docs-content://products/kibana/v9.md
+      title: Kibana
+    - page: docs-content://products/elasticsearch/v9.md
+      title: Elasticsearch
+
   - section: APIs
     url: https://www.elastic.co/docs/api
 
@@ -3297,25 +3307,15 @@ nav:
     - island: Logstash versioned plugins
       toc: logstash-docs-md://vpr
 
-  - section: Troubleshoot
-    url: /troubleshoot/
-    children:
-    - toc: docs-content://troubleshoot
-
   - section: Release notes
     url: /release-notes/
     children:
     - toc: docs-content://release-notes/intro
 
-  - section: Product hubs
-    url: /products/
+  - section: Troubleshoot
+    url: /troubleshoot/
     children:
-    - page: docs-content://products/index.md
-      title: Product hubs
-    - page: docs-content://products/kibana/v9.md
-      title: Kibana
-    - page: docs-content://products/elasticsearch/v9.md
-      title: Elasticsearch
+    - toc: docs-content://troubleshoot
 
   - section: Extension points
     url: /extend/

From 3e262e4b3f3ad782ac1d84d343bacc68dc7b9e2e Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 7 May 2026 15:59:53 +0200
Subject: [PATCH 40/56] Subsection product hubs nav island into Stack products
 + Deployment runbooks

Group the Product hubs sidebar by category and surface upcoming products
as non-clickable stubs, matching the gist's prototype island. Uses the
existing nav-v2 grammar:

- '- label: <name>' creates a non-clickable section header
- '- title: <name>' creates a non-clickable leaf entry (used for stubs)

Stack products: Elasticsearch, Kibana (linked) + Logstash, Beats (soon).
Deployment runbooks: Cloud Hosted, Cloud Serverless, Self-managed (all soon).
---
 config/navigation-v2.yml | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index b08a0ff54c..83ce92fbd0 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3285,16 +3285,6 @@ nav:
   #      - page: docs-content://troubleshoot/ingest/opentelemetry/index.md
   #        title: Troubleshoot EDOT
 
-  - section: Products
-    url: /products/
-    children:
-    - page: docs-content://products/index.md
-      title: Product hubs
-    - page: docs-content://products/kibana/v9.md
-      title: Kibana
-    - page: docs-content://products/elasticsearch/v9.md
-      title: Elasticsearch
-
   - section: APIs
     url: https://www.elastic.co/docs/api
 
@@ -3307,15 +3297,34 @@ nav:
     - island: Logstash versioned plugins
       toc: logstash-docs-md://vpr
 
+  - section: Troubleshoot
+    url: /troubleshoot/
+    children:
+    - toc: docs-content://troubleshoot
+
   - section: Release notes
     url: /release-notes/
     children:
     - toc: docs-content://release-notes/intro
 
-  - section: Troubleshoot
-    url: /troubleshoot/
+  - section: Product hubs
+    url: /products/
     children:
-    - toc: docs-content://troubleshoot
+    - page: docs-content://products/index.md
+      title: Product hubs
+    - label: Stack products
+      children:
+      - page: docs-content://products/elasticsearch/v9.md
+        title: Elasticsearch
+      - page: docs-content://products/kibana/v9.md
+        title: Kibana
+      - title: Logstash (soon)
+      - title: Beats (soon)
+    - label: Deployment runbooks
+      children:
+      - title: Elastic Cloud Hosted (soon)
+      - title: Elastic Cloud Serverless (soon)
+      - title: Self-managed (soon)
 
   - section: Extension points
     url: /extend/

From 17bbea5437c8eb79143b8f0b00852bd2c0d1023f Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Thu, 7 May 2026 17:15:54 +0200
Subject: [PATCH 41/56] Top-bar dropdown for sections + restore Products rename
 and reorder

Two related changes that go together:

1. Add a `dropdown: true` opt-in to V2 nav sections. When set, the
   secondary nav renders the section as a <details>/<summary> with a
   chevron, and the open panel lists the section's children grouped by
   `- label:` subsections. `- title:` items without a `page:` render as
   muted "soon" stubs. Affects:
   - SectionNavV2Item (parser) reads `dropdown:`.
   - SectionNavigationNode + NavigationSection thread the flag.
   - _SecondaryNav.cshtml renders the dropdown UI when set.
   - secondary-nav-dropdown.css covers the visual layer.

2. Restore commit 588260f1 ("Update top navigation order") that was
   silently reverted during an earlier rebase resolution. Section
   renamed Product hubs -> Products, moved to second position right
   after Guides. Release notes moved before Troubleshoot. Final order:
   Guides -> Products -> APIs -> Reference -> Release notes ->
   Troubleshoot -> Extension points.

Wires Products as the first user of the new dropdown so reviewers can
jump straight from the top bar to a specific product hub without going
through the /products/ landing page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 config/navigation-v2.yml                      |  45 ++++----
 .../Toc/NavigationV2File.cs                   |   7 +-
 .../V2/NavigationSection.cs                   |   1 +
 .../V2/SectionNavigationNode.cs               |   5 +
 .../V2/SiteNavigationV2.cs                    |   6 +-
 .../Assets/secondary-nav-dropdown.css         | 102 ++++++++++++++++++
 .../Assets/styles.css                         |   1 +
 .../Layout/_SecondaryNav.cshtml               |  72 ++++++++++++-
 .../Navigation/GlobalNavigationHtmlWriter.cs  |   2 +-
 9 files changed, 213 insertions(+), 28 deletions(-)
 create mode 100644 src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 83ce92fbd0..1969f8185e 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3285,6 +3285,26 @@ nav:
   #      - page: docs-content://troubleshoot/ingest/opentelemetry/index.md
   #        title: Troubleshoot EDOT
 
+  - section: Products
+    url: /products/
+    dropdown: true
+    children:
+    - page: docs-content://products/index.md
+      title: Product hubs
+    - label: Stack products
+      children:
+      - page: docs-content://products/elasticsearch/v9.md
+        title: Elasticsearch
+      - page: docs-content://products/kibana/v9.md
+        title: Kibana
+      - title: Logstash (soon)
+      - title: Beats (soon)
+    - label: Deployment runbooks
+      children:
+      - title: Elastic Cloud Hosted (soon)
+      - title: Elastic Cloud Serverless (soon)
+      - title: Self-managed (soon)
+
   - section: APIs
     url: https://www.elastic.co/docs/api
 
@@ -3297,34 +3317,15 @@ nav:
     - island: Logstash versioned plugins
       toc: logstash-docs-md://vpr
 
-  - section: Troubleshoot
-    url: /troubleshoot/
-    children:
-    - toc: docs-content://troubleshoot
-
   - section: Release notes
     url: /release-notes/
     children:
     - toc: docs-content://release-notes/intro
 
-  - section: Product hubs
-    url: /products/
+  - section: Troubleshoot
+    url: /troubleshoot/
     children:
-    - page: docs-content://products/index.md
-      title: Product hubs
-    - label: Stack products
-      children:
-      - page: docs-content://products/elasticsearch/v9.md
-        title: Elasticsearch
-      - page: docs-content://products/kibana/v9.md
-        title: Kibana
-      - title: Logstash (soon)
-      - title: Beats (soon)
-    - label: Deployment runbooks
-      children:
-      - title: Elastic Cloud Hosted (soon)
-      - title: Elastic Cloud Serverless (soon)
-      - title: Self-managed (soon)
+    - toc: docs-content://troubleshoot
 
   - section: Extension points
     url: /extend/
diff --git a/src/Elastic.Documentation.Configuration/Toc/NavigationV2File.cs b/src/Elastic.Documentation.Configuration/Toc/NavigationV2File.cs
index 71cbf85b70..ab85ff9cdd 100644
--- a/src/Elastic.Documentation.Configuration/Toc/NavigationV2File.cs
+++ b/src/Elastic.Documentation.Configuration/Toc/NavigationV2File.cs
@@ -36,6 +36,7 @@ public record SectionNavV2Item(
 	string Label,
 	string Url,
 	bool Isolated,
+	bool Dropdown,
 	IReadOnlyList<INavV2Item> Children
 ) : INavV2Item;
 
@@ -139,10 +140,14 @@ private static IReadOnlyList<INavV2Item> ReadItemList(IParser parser, ObjectDese
 				&& isoVal is string isoStr
 				&& bool.TryParse(isoStr, out var isoBool)
 				&& isoBool;
+			var dropdown = dict.TryGetValue("dropdown", out var ddVal)
+				&& ddVal is string ddStr
+				&& bool.TryParse(ddStr, out var ddBool)
+				&& ddBool;
 			var sectionChildren = dict.TryGetValue("children", out var sch) && sch is IReadOnlyList<INavV2Item> sChildList
 				? sChildList
 				: [];
-			return new SectionNavV2Item(sectionStr, sectionUrl, isolated, sectionChildren);
+			return new SectionNavV2Item(sectionStr, sectionUrl, isolated, dropdown, sectionChildren);
 		}
 
 		if (dict.TryGetValue("island", out var islandVal) && islandVal is string islandStr)
diff --git a/src/Elastic.Documentation.Navigation/V2/NavigationSection.cs b/src/Elastic.Documentation.Navigation/V2/NavigationSection.cs
index b0ee805d19..467d61db13 100644
--- a/src/Elastic.Documentation.Navigation/V2/NavigationSection.cs
+++ b/src/Elastic.Documentation.Navigation/V2/NavigationSection.cs
@@ -13,6 +13,7 @@ public record NavigationSection(
 	string Label,
 	string Url,
 	bool Isolated,
+	bool Dropdown,
 	IReadOnlyList<INavigationItem> NavigationItems
 );
 
diff --git a/src/Elastic.Documentation.Navigation/V2/SectionNavigationNode.cs b/src/Elastic.Documentation.Navigation/V2/SectionNavigationNode.cs
index 2e0012bf75..eb6f37ec2d 100644
--- a/src/Elastic.Documentation.Navigation/V2/SectionNavigationNode.cs
+++ b/src/Elastic.Documentation.Navigation/V2/SectionNavigationNode.cs
@@ -19,6 +19,7 @@ public SectionNavigationNode(
 		string label,
 		string url,
 		bool isolated,
+		bool dropdown,
 		IReadOnlyCollection<INavigationItem> children,
 		INodeNavigationItem<INavigationModel, INavigationItem>? parent
 	)
@@ -27,6 +28,7 @@ public SectionNavigationNode(
 		NavigationTitle = label;
 		Url = url;
 		Isolated = isolated;
+		Dropdown = dropdown;
 		NavigationItems = children;
 		Parent = parent;
 		NavigationRoot = parent?.NavigationRoot!;
@@ -36,6 +38,9 @@ public SectionNavigationNode(
 	/// <summary>Whether this section is excluded from the top bar and renders with a back arrow.</summary>
 	public bool Isolated { get; }
 
+	/// <summary>Whether the top-bar entry should render as a dropdown listing the section's children.</summary>
+	public bool Dropdown { get; }
+
 	/// <inheritdoc />
 	public string Id { get; }
 
diff --git a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
index 7d9f1aa8ff..c07e24a304 100644
--- a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
+++ b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
@@ -86,7 +86,7 @@ public SiteNavigationV2(
 	private static IReadOnlyList<NavigationSection> BuildSections(IReadOnlyList<INavigationItem> items) =>
 		items
 			.OfType<SectionNavigationNode>()
-			.Select(s => new NavigationSection(s.Id, s.NavigationTitle, s.Url, s.Isolated, [.. s.NavigationItems]))
+			.Select(s => new NavigationSection(s.Id, s.NavigationTitle, s.Url, s.Isolated, s.Dropdown, [.. s.NavigationItems]))
 			.ToList();
 
 	private static IReadOnlyList<NavigationIsland> BuildIslands(IReadOnlyList<NavigationSection> sections)
@@ -402,9 +402,9 @@ private static SectionNavigationNode CreateSection(
 		string sitePrefix
 	)
 	{
-		var placeholder = new SectionNavigationNode(section.Label, section.Url, section.Isolated, [], parent);
+		var placeholder = new SectionNavigationNode(section.Label, section.Url, section.Isolated, section.Dropdown, [], parent);
 		var children = BuildV2Items(section.Children, nodes, placeholder, sitePrefix);
-		return new SectionNavigationNode(section.Label, section.Url, section.Isolated, children, parent);
+		return new SectionNavigationNode(section.Label, section.Url, section.Isolated, section.Dropdown, children, parent);
 	}
 
 	private static INavigationItem? CreateIsland(
diff --git a/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css b/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
new file mode 100644
index 0000000000..ea82bd88da
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
@@ -0,0 +1,102 @@
+/*
+ * Top-bar section dropdown. Opt in by setting `dropdown: true` on a
+ * `- section:` entry in `navigation-v2.yml`. The section's own URL
+ * remains the link target on the summary's anchor; the chevron toggles
+ * a panel listing the section's children so users can jump straight
+ * to a child page without going through the section landing.
+ */
+
+@layer components {
+	.secondary-nav-dropdown {
+		display: inline-flex;
+		align-items: center;
+	}
+	.secondary-nav-dropdown summary {
+		list-style: none;
+	}
+	.secondary-nav-dropdown summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.secondary-nav-dropdown-chevron {
+		flex-shrink: 0;
+		color: var(--color-grey-60);
+		transition: transform 0.15s ease;
+	}
+	.secondary-nav-dropdown[open] .secondary-nav-dropdown-chevron {
+		transform: rotate(180deg);
+	}
+
+	.secondary-nav-dropdown-menu {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		min-width: 220px;
+		max-width: 320px;
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		padding: 6px 0;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 6px;
+		box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
+		font-weight: 500;
+	}
+
+	.secondary-nav-dropdown-group-label {
+		padding: 8px 14px 4px 14px;
+		font-size: 11px;
+		font-weight: 700;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--color-grey-70);
+		user-select: none;
+	}
+	.secondary-nav-dropdown-group-label:not(:first-child) {
+		margin-top: 4px;
+		border-top: 1px solid var(--color-grey-15, var(--color-grey-20));
+		padding-top: 10px;
+	}
+
+	.secondary-nav-dropdown-link {
+		display: block;
+		padding: 6px 14px;
+		font-size: 14px;
+		color: var(--color-ink-dark) !important;
+		text-decoration: none !important;
+		transition: background-color 0.12s ease;
+	}
+	.secondary-nav-dropdown-link:hover {
+		background: var(--color-grey-10);
+		color: var(--color-blue-elastic) !important;
+	}
+
+	.secondary-nav-dropdown-stub {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 14px;
+		font-size: 14px;
+		color: var(--color-grey-60);
+		cursor: default;
+	}
+	.secondary-nav-dropdown-stub::after {
+		content: 'soon';
+		font-size: 10px;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		padding: 2px 6px;
+		border-radius: 4px;
+		background: var(--color-grey-15, var(--color-grey-20));
+		color: var(--color-grey-70);
+	}
+
+	/* Close the menu when the user clicks outside is browser-default for
+	   <details>; just suppress the htmx-boost on summary clicks so the
+	   first click only toggles. */
+	.secondary-nav-dropdown summary a {
+		text-decoration: none;
+	}
+}
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index 9a3843dda7..85c696851f 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -29,6 +29,7 @@
 @import './markdown/agent-skill.css';
 @import './markdown/hub.css';
 @import './markdown/metadata-box.css';
+@import './secondary-nav-dropdown.css';
 @import './markdown/contributors.css';
 @import './api-docs.css';
 @import 'tippy.js/dist/tippy.css';
diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
index 21ea826449..0f9dea550c 100644
--- a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -1,4 +1,6 @@
 @using System.Linq
+@using Elastic.Documentation.Navigation
+@using Elastic.Documentation.Navigation.V2
 @inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
 <div class="md:sticky md:top-0 md:z-30 bg-grey-10">
 	<ask-ai></ask-ai>
@@ -12,12 +14,79 @@
 				{
 					var isAbsolute = navTab.Url.StartsWith("http", StringComparison.OrdinalIgnoreCase);
 					var isActive = !isAbsolute && navTab.Id == Model.ActiveSectionId;
-					<li class="text-nowrap @(isActive ? "text-blue-elastic" : "hover:text-blue-elastic active:text-blue-elastic-100")"
+					<li class="text-nowrap @(isActive ? "text-blue-elastic" : "hover:text-blue-elastic active:text-blue-elastic-100") @(navTab.Dropdown ? "secondary-nav-dropdown-host relative" : "")"
 						data-section-id="@navTab.Id">
 						@if (isAbsolute)
 						{
 							<a href="@navTab.Url" target="_blank" rel="noopener" class="inline-flex items-center gap-1">@navTab.Label<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3 opacity-60" aria-hidden="true"><path d="M8.75 1a.75.75 0 0 0 0 1.5h3.69L6.72 8.22a.75.75 0 0 0 1.06 1.06l5.72-5.72v3.69a.75.75 0 0 0 1.5 0v-5.5a.75.75 0 0 0-.75-.75h-5.5Z"/><path d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10a.75.75 0 0 0-1.5 0v2.5h-8v-8H6A.75.75 0 0 0 6 3H3.5Z"/></svg></a>
 						}
+						else if (navTab.Dropdown)
+						{
+							<details class="secondary-nav-dropdown">
+								<summary class="inline-flex items-center gap-1 cursor-pointer select-none">
+									<a
+										href="@Model.Link(navTab.Url)"
+										@Model.Htmx.GetHxAttributes(
+											hxSwapOob: "#main-container,#secondary-nav"
+										)
+									>
+										@navTab.Label
+									</a>
+									<svg width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true" class="secondary-nav-dropdown-chevron">
+										<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+									</svg>
+								</summary>
+								<div class="secondary-nav-dropdown-menu">
+									@foreach (var child in navTab.NavigationItems)
+									{
+										var childUrl = child.Url;
+										var childTitle = child.NavigationTitle;
+										var childItems = child is INodeNavigationItem<INavigationModel, INavigationItem> nn ? nn.NavigationItems : null;
+										var isHidden = child is ILeafNavigationItem<INavigationModel> hl && hl.Hidden;
+
+										if (isHidden)
+										{
+											// Section index leaf is already linked from the summary; skip.
+											continue;
+										}
+										if (childItems is { Count: > 0 })
+										{
+											<div class="secondary-nav-dropdown-group-label">@childTitle</div>
+											foreach (var grandchild in childItems)
+											{
+												var gcUrl = grandchild.Url;
+												var gcTitle = grandchild.NavigationTitle;
+												var gcHasChildren = grandchild is INodeNavigationItem<INavigationModel, INavigationItem> gn && gn.NavigationItems.Count > 0;
+												if (!gcHasChildren && string.IsNullOrEmpty(gcUrl))
+												{
+													<span class="secondary-nav-dropdown-stub">@gcTitle</span>
+												}
+												else if (!string.IsNullOrEmpty(gcUrl))
+												{
+													<a class="secondary-nav-dropdown-link"
+														href="@gcUrl"
+														@Model.Htmx.GetHxAttributes(hxSwapOob: "#main-container,#secondary-nav")>
+														@gcTitle
+													</a>
+												}
+											}
+										}
+										else if (!string.IsNullOrEmpty(childUrl))
+										{
+											<a class="secondary-nav-dropdown-link"
+												href="@childUrl"
+												@Model.Htmx.GetHxAttributes(hxSwapOob: "#main-container,#secondary-nav")>
+												@childTitle
+											</a>
+										}
+										else
+										{
+											<span class="secondary-nav-dropdown-stub">@childTitle</span>
+										}
+									}
+								</div>
+							</details>
+						}
 						else
 						{
 							<a
@@ -62,3 +131,4 @@
 		</div>
 	</nav>
 </div>
+
diff --git a/src/services/Elastic.Documentation.Assembler/Navigation/GlobalNavigationHtmlWriter.cs b/src/services/Elastic.Documentation.Assembler/Navigation/GlobalNavigationHtmlWriter.cs
index 1f93a310ff..caef5c711d 100644
--- a/src/services/Elastic.Documentation.Assembler/Navigation/GlobalNavigationHtmlWriter.cs
+++ b/src/services/Elastic.Documentation.Assembler/Navigation/GlobalNavigationHtmlWriter.cs
@@ -141,7 +141,7 @@ Cancel ctx
 			_logger.LogInformation("Rendering V2 island navigation: {IslandLabel} ({IslandId})", island.Label, island.Id);
 
 			var wrapper = new SectionNavigationV2Wrapper(
-				new NavigationSection(island.Id, island.Label, "", false, island.NavigationItems),
+				new NavigationSection(island.Id, island.Label, "", false, false, island.NavigationItems),
 				navV2
 			);
 			var model = new NavigationViewModel

From 6d5be8b58b9d1e9e523363ea095019a33b51c962 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Fri, 8 May 2026 10:23:29 +0200
Subject: [PATCH 42/56] Make Products section index a placeholder leaf

The `- page: docs-content://products/index.md / title: Product hubs`
crosslink pointed at a file that does not exist in docs-content, which
caused /products/ to 404. Replace it with `- title: Product hubs` (no
page key) so the placeholder system generates a "Coming soon" stub at
that URL, per the mechanism documented in PR #2927.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 config/navigation-v2.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 1969f8185e..823be31735 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3289,8 +3289,7 @@ nav:
     url: /products/
     dropdown: true
     children:
-    - page: docs-content://products/index.md
-      title: Product hubs
+    - title: Product hubs
     - label: Stack products
       children:
       - page: docs-content://products/elasticsearch/v9.md

From 80a366e5c8592577f6f69b6375bae292b393a5a8 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 8 May 2026 11:17:51 +0200
Subject: [PATCH 43/56] Revert "Make Products section index a placeholder leaf"

This reverts commit 6d5be8b58b9d1e9e523363ea095019a33b51c962.

The Products dropdown is the discovery surface, so /products/ doesn't
need a placeholder landing page. Drops the index entry from the
Products section's children entirely, and switches the dropdown
summary in _SecondaryNav.cshtml from an <a> to a non-clickable
<span> so clicking the title row toggles the dropdown instead of
trying to navigate to a non-existent landing.
---
 config/navigation-v2.yml                                 | 1 -
 .../Layout/_SecondaryNav.cshtml                          | 9 +--------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 823be31735..1d2b98bd1d 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -3289,7 +3289,6 @@ nav:
     url: /products/
     dropdown: true
     children:
-    - title: Product hubs
     - label: Stack products
       children:
       - page: docs-content://products/elasticsearch/v9.md
diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
index 0f9dea550c..596898c90c 100644
--- a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -24,14 +24,7 @@
 						{
 							<details class="secondary-nav-dropdown">
 								<summary class="inline-flex items-center gap-1 cursor-pointer select-none">
-									<a
-										href="@Model.Link(navTab.Url)"
-										@Model.Htmx.GetHxAttributes(
-											hxSwapOob: "#main-container,#secondary-nav"
-										)
-									>
-										@navTab.Label
-									</a>
+									<span class="secondary-nav-dropdown-label">@navTab.Label</span>
 									<svg width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true" class="secondary-nav-dropdown-chevron">
 										<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 									</svg>

From 113403af1cf85b16d09a16212a290077b5aecb00 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Fri, 8 May 2026 11:43:51 +0200
Subject: [PATCH 44/56] Drop all-caps from dropdown subsection labels

The secondary-nav-dropdown-group-label was rendering as uppercase
with letter-spacing (UI-pattern look), which Florent didn't want.
Plain title case at 12px / weight 700 / grey-80 reads cleaner and
matches the rest of the menu typography.
---
 .../Assets/secondary-nav-dropdown.css                       | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css b/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
index ea82bd88da..48580da254 100644
--- a/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
+++ b/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
@@ -46,11 +46,9 @@
 
 	.secondary-nav-dropdown-group-label {
 		padding: 8px 14px 4px 14px;
-		font-size: 11px;
+		font-size: 12px;
 		font-weight: 700;
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
-		color: var(--color-grey-70);
+		color: var(--color-grey-80);
 		user-select: none;
 	}
 	.secondary-nav-dropdown-group-label:not(:first-child) {

From d7b636076b8ac414edc485f8210382a53d6a28de Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 11 May 2026 18:31:01 +0200
Subject: [PATCH 45/56] Prefix hub directive URLs with the site path prefix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

{hero}, {link-card}, and {whats-new} emit YAML body URLs verbatim
into <a href> attributes — they don't go through Markdig's link
resolver. So root-relative URLs like \`/deploy-manage/...\` landed
on the page as-is and broke under the \`/docs/\` path prefix the
assembler builds with.

Add a HubUrl.Prefix helper that prepends the site path prefix to
root-relative URLs (leaves absolute http/https/mailto and anchors
alone, and won't double-prefix). Pass block.Build.UrlPathPrefix into
the three view models, and call Model.PrefixUrl(...) in the cshtml
where hrefs are emitted.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |  9 +++--
 .../Myst/Directives/Hub/HeroView.cshtml       |  4 +-
 .../Myst/Directives/Hub/HeroViewModel.cs      |  2 +
 .../Myst/Directives/Hub/HubUrl.cs             | 39 +++++++++++++++++++
 .../Myst/Directives/Hub/LinkCardView.cshtml   |  6 +--
 .../Myst/Directives/Hub/LinkCardViewModel.cs  |  2 +
 .../Myst/Directives/Hub/WhatsNewView.cshtml   |  4 +-
 .../Myst/Directives/Hub/WhatsNewViewModel.cs  |  2 +
 8 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs

diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 8934da227a..a1e6d37ae7 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -387,7 +387,8 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 			ShowSearch = block.ShowSearch,
 			QuickLinks = block.QuickLinks,
 			OtherVersions = block.OtherVersions,
-			ReleasesHtml = releasesHtml
+			ReleasesHtml = releasesHtml,
+			SitePathPrefix = block.Build.UrlPathPrefix
 		});
 		RenderRazorSlice(slice, renderer);
 	}
@@ -411,7 +412,8 @@ private static void WriteLinkCard(HtmlRenderer renderer, LinkCardBlock block)
 		{
 			DirectiveBlock = block,
 			Data = block.Data,
-			IconSvg = ProductIcons.Get(block.Data.Icon)
+			IconSvg = ProductIcons.Get(block.Data.Icon),
+			SitePathPrefix = block.Build.UrlPathPrefix
 		});
 		RenderRazorSlice(slice, renderer);
 	}
@@ -421,7 +423,8 @@ private static void WriteWhatsNew(HtmlRenderer renderer, WhatsNewBlock block)
 		var slice = WhatsNewView.Create(new WhatsNewViewModel
 		{
 			DirectiveBlock = block,
-			Data = block.Data
+			Data = block.Data,
+			SitePathPrefix = block.Build.UrlPathPrefix
 		});
 		RenderRazorSlice(slice, renderer);
 	}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index d25284d072..cdc5e4b402 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -68,7 +68,7 @@
 								}
 								else
 								{
-									<li role="menuitem"><a href="@v.Url">@v.Label</a></li>
+									<li role="menuitem"><a href="@Model.PrefixUrl(v.Url)">@v.Label</a></li>
 								}
 							}
 						</ul>
@@ -87,7 +87,7 @@
 				<ul class="hub-hero-pills">
 					@foreach (var link in Model.QuickLinks)
 					{
-						<li><a href="@link.Url">@link.Label</a></li>
+						<li><a href="@Model.PrefixUrl(link.Url)">@link.Label</a></li>
 					}
 				</ul>
 			}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index 7c971bdd02..dfbae92ff3 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -15,4 +15,6 @@ public class HeroViewModel : DirectiveViewModel
 	public required IReadOnlyList<HeroQuickLink> QuickLinks { get; init; }
 	public required IReadOnlyList<HeroVersion> OtherVersions { get; init; }
 	public required string? ReleasesHtml { get; init; }
+	public required string? SitePathPrefix { get; init; }
+	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
new file mode 100644
index 0000000000..9f1b2835d3
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
@@ -0,0 +1,39 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// URL helpers for hub directives ({hero}, {link-card}, {whats-new}) whose YAML body
+/// values are emitted verbatim into href attributes and don't go through Markdig's
+/// link resolver. Root-relative URLs (e.g. "/deploy-manage/...") need the site's
+/// URL path prefix (e.g. "/docs") prepended so they resolve on the assembled site.
+/// </summary>
+internal static class HubUrl
+{
+	/// <summary>
+	/// Prefix a root-relative URL with the site's path prefix. Absolute URLs
+	/// (http/https/mailto), anchors, and URLs already under the prefix are
+	/// returned unchanged.
+	/// </summary>
+	public static string? Prefix(string? url, string? sitePathPrefix)
+	{
+		if (string.IsNullOrEmpty(url))
+			return url;
+		if (string.IsNullOrEmpty(sitePathPrefix))
+			return url;
+		if (url.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
+			|| url.StartsWith("https://", StringComparison.OrdinalIgnoreCase)
+			|| url.StartsWith("mailto:", StringComparison.OrdinalIgnoreCase)
+			|| url.StartsWith('#'))
+			return url;
+
+		var prefix = "/" + sitePathPrefix.Trim('/');
+		if (url == prefix || url.StartsWith(prefix + "/", StringComparison.OrdinalIgnoreCase))
+			return url;
+		if (!url.StartsWith('/'))
+			return url;
+		return prefix + url;
+	}
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
index 2017da0d05..33f081f118 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
@@ -16,7 +16,7 @@
 		<h3 class="hub-card-title">
 			@if (!string.IsNullOrWhiteSpace(d.Link))
 			{
-				<a href="@d.Link">@d.Title</a>
+				<a href="@Model.PrefixUrl(d.Link)">@d.Title</a>
 			}
 			else
 			{
@@ -37,7 +37,7 @@
 			{
 				if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 					continue;
-				<li><a href="@link.Url">@link.Label</a></li>
+				<li><a href="@Model.PrefixUrl(link.Url)">@link.Label</a></li>
 			}
 		</ul>
 	}
@@ -55,7 +55,7 @@
 					var link = aside.Links[i];
 					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 						continue;
-					<a href="@link.Url">@link.Label</a>
+					<a href="@Model.PrefixUrl(link.Url)">@link.Label</a>
 					@if (i < aside.Links.Length - 1)
 					{
 						<span class="hub-card-aside-sep" aria-hidden="true">·</span>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
index ff75e4821f..1ceea4bc45 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
@@ -8,4 +8,6 @@ public class LinkCardViewModel : DirectiveViewModel
 {
 	public required LinkCardData Data { get; init; }
 	public required string? IconSvg { get; init; }
+	public required string? SitePathPrefix { get; init; }
+	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
index ea449797ec..ceeca9a986 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
@@ -23,7 +23,7 @@
 					var link = d.ReleaseLinks[i];
 					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 						continue;
-					<a href="@link.Url">@link.Label</a>
+					<a href="@Model.PrefixUrl(link.Url)">@link.Label</a>
 					@if (i < d.ReleaseLinks.Length - 1)
 					{
 						<span class="hub-wn-rn-sep" aria-hidden="true">·</span>
@@ -42,7 +42,7 @@
 				<li class="hub-wn-item">
 					@if (!string.IsNullOrWhiteSpace(item.Link))
 					{
-						<a href="@item.Link" class="hub-wn-item-link">
+						<a href="@Model.PrefixUrl(item.Link)" class="hub-wn-item-link">
 							<strong class="hub-wn-item-title">@item.Title</strong>
 							@if (!string.IsNullOrWhiteSpace(item.Description))
 							{
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs
index 678e31f650..601b7b8eb4 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewViewModel.cs
@@ -7,4 +7,6 @@ namespace Elastic.Markdown.Myst.Directives.Hub;
 public class WhatsNewViewModel : DirectiveViewModel
 {
 	public required WhatsNewData Data { get; init; }
+	public required string? SitePathPrefix { get; init; }
+	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
 }

From 0a758ebd736485ed5b1f414557bd1a7153fae3cd Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 11 May 2026 18:42:37 +0200
Subject: [PATCH 46/56] Hub links opt out of body-level hx-boost
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The body has hx-boost=\"true\" hx-swap=\"none\" so boosted clicks
need an explicit hx-select-oob to swap anything. Hub-directive
links don't carry those attributes — clicks pushed the URL but
swapped no content, so the page appeared to just scroll to the top.

Add hx-boost=\"false\" to every <a> in {hero}, {link-card}, and
{whats-new} so they fall back to native navigation. Same fix
already in place for the page-top product pills.
---
 src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml    | 4 ++--
 src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs          | 4 ++++
 .../Myst/Directives/Hub/LinkCardView.cshtml                 | 6 +++---
 .../Myst/Directives/Hub/WhatsNewView.cshtml                 | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index cdc5e4b402..6017272119 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -68,7 +68,7 @@
 								}
 								else
 								{
-									<li role="menuitem"><a href="@Model.PrefixUrl(v.Url)">@v.Label</a></li>
+									<li role="menuitem"><a href="@Model.PrefixUrl(v.Url)" hx-boost="false">@v.Label</a></li>
 								}
 							}
 						</ul>
@@ -87,7 +87,7 @@
 				<ul class="hub-hero-pills">
 					@foreach (var link in Model.QuickLinks)
 					{
-						<li><a href="@Model.PrefixUrl(link.Url)">@link.Label</a></li>
+						<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
 					}
 				</ul>
 			}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
index 9f1b2835d3..a74e3b6e65 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
@@ -9,9 +9,13 @@ namespace Elastic.Markdown.Myst.Directives.Hub;
 /// values are emitted verbatim into href attributes and don't go through Markdig's
 /// link resolver. Root-relative URLs (e.g. "/deploy-manage/...") need the site's
 /// URL path prefix (e.g. "/docs") prepended so they resolve on the assembled site.
+/// They also need to opt out of body-level <c>hx-boost</c> because the layout uses
+/// <c>hx-swap="none"</c> by default — without an explicit <c>hx-select-oob</c>,
+/// boosted clicks fetch the URL but swap nothing.
 /// </summary>
 internal static class HubUrl
 {
+
 	/// <summary>
 	/// Prefix a root-relative URL with the site's path prefix. Absolute URLs
 	/// (http/https/mailto), anchors, and URLs already under the prefix are
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
index 33f081f118..2ff734685b 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
@@ -16,7 +16,7 @@
 		<h3 class="hub-card-title">
 			@if (!string.IsNullOrWhiteSpace(d.Link))
 			{
-				<a href="@Model.PrefixUrl(d.Link)">@d.Title</a>
+				<a href="@Model.PrefixUrl(d.Link)" hx-boost="false">@d.Title</a>
 			}
 			else
 			{
@@ -37,7 +37,7 @@
 			{
 				if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 					continue;
-				<li><a href="@Model.PrefixUrl(link.Url)">@link.Label</a></li>
+				<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
 			}
 		</ul>
 	}
@@ -55,7 +55,7 @@
 					var link = aside.Links[i];
 					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 						continue;
-					<a href="@Model.PrefixUrl(link.Url)">@link.Label</a>
+					<a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a>
 					@if (i < aside.Links.Length - 1)
 					{
 						<span class="hub-card-aside-sep" aria-hidden="true">·</span>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
index ceeca9a986..b5b1dcef23 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
@@ -23,7 +23,7 @@
 					var link = d.ReleaseLinks[i];
 					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 						continue;
-					<a href="@Model.PrefixUrl(link.Url)">@link.Label</a>
+					<a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a>
 					@if (i < d.ReleaseLinks.Length - 1)
 					{
 						<span class="hub-wn-rn-sep" aria-hidden="true">·</span>
@@ -42,7 +42,7 @@
 				<li class="hub-wn-item">
 					@if (!string.IsNullOrWhiteSpace(item.Link))
 					{
-						<a href="@Model.PrefixUrl(item.Link)" class="hub-wn-item-link">
+						<a href="@Model.PrefixUrl(item.Link)" hx-boost="false" class="hub-wn-item-link">
 							<strong class="hub-wn-item-title">@item.Title</strong>
 							@if (!string.IsNullOrWhiteSpace(item.Description))
 							{

From de8dec6ade81e5dcedc3b71fad9112e7639a5234 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 11 May 2026 18:58:08 +0200
Subject: [PATCH 47/56] HubUrl strips .md and /index.md so authors can write
 file paths

Hub directives ({hero}, {link-card}, {whats-new}) emit URLs verbatim
into <a href>. Authors naturally write .md file paths (matching how
body markdown works) but the assembler serves clean URLs without
.md. So /reference/elasticsearch-clients/index.md 404'd on the
assembled site.

HubUrl.Prefix now strips trailing .md and /index.md before
prepending the site path prefix. Anchors are preserved.

Also fixes 4 source URLs whose docs-content folder names differ
from the slug the assembler serves (e.g. /release-notes/elastic-
security/ -> /release-notes/security), and the wrong fleet-
integrations target.

All 193 internal hub-page links now resolve (76/76 elasticsearch,
117/117 kibana, validated against the local assembler serve).
---
 .../Myst/Directives/Hub/HubUrl.cs             | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
index a74e3b6e65..4afa0cdfda 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HubUrl.cs
@@ -25,19 +25,32 @@ internal static class HubUrl
 	{
 		if (string.IsNullOrEmpty(url))
 			return url;
-		if (string.IsNullOrEmpty(sitePathPrefix))
-			return url;
 		if (url.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
 			|| url.StartsWith("https://", StringComparison.OrdinalIgnoreCase)
 			|| url.StartsWith("mailto:", StringComparison.OrdinalIgnoreCase)
 			|| url.StartsWith('#'))
 			return url;
 
+		// Convert markdown file paths to URL paths so authors can write
+		// e.g. /deploy-manage/...md and we render /deploy-manage/... .
+		// Anchor is preserved.
+		var clean = url;
+		var hash = clean.IndexOf('#');
+		var anchor = hash >= 0 ? clean[hash..] : string.Empty;
+		if (hash >= 0)
+			clean = clean[..hash];
+		if (clean.EndsWith("/index.md", StringComparison.OrdinalIgnoreCase))
+			clean = clean[..^"/index.md".Length];
+		else if (clean.EndsWith(".md", StringComparison.OrdinalIgnoreCase))
+			clean = clean[..^".md".Length];
+
+		if (string.IsNullOrEmpty(sitePathPrefix))
+			return clean + anchor;
 		var prefix = "/" + sitePathPrefix.Trim('/');
-		if (url == prefix || url.StartsWith(prefix + "/", StringComparison.OrdinalIgnoreCase))
-			return url;
-		if (!url.StartsWith('/'))
-			return url;
-		return prefix + url;
+		if (clean == prefix || clean.StartsWith(prefix + "/", StringComparison.OrdinalIgnoreCase))
+			return clean + anchor;
+		if (!clean.StartsWith('/'))
+			return clean + anchor;
+		return prefix + clean + anchor;
 	}
 }

From 5bc32e39847b37486170817986116808f61196f5 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 11 May 2026 20:12:45 +0200
Subject: [PATCH 48/56] fix(nav-v2): restore V2 page lookup registration lost
 in merge

The RegisterV2PageLookups machinery from d556dff3 was dropped when
nav-v2-sections was merged into hub-pages. Without it, V2 page: entries
referencing files in unseen child TOCs are shadowed by the V1
TableOfContentsNavigation registration, breaking positional layout for
those pages.

Restores the original logic and uses Remove + Add so V2 entries override
V1 toc entries on collision.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../V2/SiteNavigationV2.cs                    | 174 ++++++++++++++++++
 1 file changed, 174 insertions(+)

diff --git a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
index 3ef6b1354d..c07e24a304 100644
--- a/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
+++ b/src/Elastic.Documentation.Navigation/V2/SiteNavigationV2.cs
@@ -34,6 +34,7 @@ public SiteNavigationV2(
 	{
 		var prefix = sitePrefix ?? string.Empty;
 		V2NavigationItems = BuildV2Items(v2File.Nav, Nodes, this, prefix);
+		RegisterV2PageLookups();
 		Sections = BuildSections(V2NavigationItems);
 		Islands = BuildIslands(Sections);
 		BuildUrlToSectionLookup();
@@ -153,6 +154,179 @@ private void BuildTocRootToIslandLookup()
 			_ = _tocRootToIsland.TryAdd(island.SourceTocRootId, island);
 	}
 
+	private void RegisterV2PageLookups()
+	{
+		var urlToFile = new Dictionary<string, IDocumentationFile>(StringComparer.OrdinalIgnoreCase);
+		foreach (var node in Nodes.Values)
+			CollectDocumentationFilesByUrl(node, urlToFile, Url);
+
+		RegisterV2PageLookups(V2NavigationItems, urlToFile);
+	}
+
+	private void RegisterV2PageLookups(
+		IEnumerable<INavigationItem> items,
+		IReadOnlyDictionary<string, IDocumentationFile> urlToFile
+	)
+	{
+		foreach (var item in items)
+		{
+			switch (item)
+			{
+				case PageCrossLinkLeaf pageCrossLink:
+					RegisterV2PageLookup(pageCrossLink.Page, pageCrossLink, urlToFile);
+					break;
+				case PageFolderNavigationNode pageFolder:
+					RegisterV2PageLookup(pageFolder.Page, pageFolder, urlToFile);
+					break;
+			}
+
+			if (item is INodeNavigationItem<INavigationModel, INavigationItem> node)
+				RegisterV2PageLookups(node.NavigationItems, urlToFile);
+		}
+	}
+
+	private void RegisterV2PageLookup(
+		Uri page,
+		INavigationItem item,
+		IReadOnlyDictionary<string, IDocumentationFile> urlToFile
+	)
+	{
+		if (TryResolvePageSource(page, out var file) || urlToFile.TryGetValue(item.Url, out file))
+		{
+			_ = NavigationDocumentationFileLookup.Remove(file);
+			NavigationDocumentationFileLookup.Add(file, item);
+		}
+	}
+
+	private bool TryResolvePageSource(Uri page, out IDocumentationFile file)
+	{
+		file = null!;
+		var pagePath = GetUriPath(page);
+		if (string.IsNullOrEmpty(pagePath))
+			return false;
+
+		var segments = pagePath.Split('/', StringSplitOptions.RemoveEmptyEntries);
+		for (var length = segments.Length; length > 0; length--)
+		{
+			var tocPath = string.Join('/', segments.Take(length));
+			if (!Nodes.TryGetValue(CreateTocUri(page.Scheme, tocPath), out var node))
+				continue;
+
+			var remainingPath = string.Join('/', segments.Skip(length));
+			if (string.IsNullOrEmpty(remainingPath))
+			{
+				file = node.Index.Model;
+				return true;
+			}
+
+			if (TryFindDocumentationFile(node, remainingPath, out file))
+				return true;
+		}
+
+		return false;
+	}
+
+	private static bool TryFindDocumentationFile(
+		INavigationItem item,
+		string remainingPath,
+		out IDocumentationFile file
+	)
+	{
+		switch (item)
+		{
+			case ILeafNavigationItem<IDocumentationFile> leaf when MatchesRemainingPath(leaf.Url, remainingPath):
+				file = leaf.Model;
+				return true;
+			case INodeNavigationItem<IDocumentationFile, INavigationItem> node:
+				if (MatchesRemainingPath(node.Index.Url, remainingPath))
+				{
+					file = node.Index.Model;
+					return true;
+				}
+				foreach (var child in node.NavigationItems)
+				{
+					if (TryFindDocumentationFile(child, remainingPath, out file))
+						return true;
+				}
+				break;
+			case INodeNavigationItem<INavigationModel, INavigationItem> node:
+				foreach (var child in node.NavigationItems)
+				{
+					if (TryFindDocumentationFile(child, remainingPath, out file))
+						return true;
+				}
+				break;
+		}
+
+		file = null!;
+		return false;
+	}
+
+	private static bool MatchesRemainingPath(string url, string remainingPath)
+	{
+		var normalizedPath = NormalizePagePath(remainingPath);
+		return url.TrimEnd('/').EndsWith($"/{normalizedPath}", StringComparison.OrdinalIgnoreCase);
+	}
+
+	private static string NormalizePagePath(string path)
+	{
+		var normalized = path.Trim('/');
+		if (normalized.EndsWith(".md", StringComparison.OrdinalIgnoreCase))
+			normalized = normalized[..^3];
+		if (normalized.EndsWith("/index", StringComparison.OrdinalIgnoreCase))
+			normalized = normalized[..^6];
+		return normalized;
+	}
+
+	private static Uri CreateTocUri(string scheme, string path)
+	{
+		var slash = path.IndexOf('/');
+		return slash < 0
+			? new Uri($"{scheme}://{path}")
+			: new Uri($"{scheme}://{path[..slash]}/{path[(slash + 1)..]}");
+	}
+
+	private static string GetUriPath(Uri uri) => (uri.Host + uri.AbsolutePath).Trim('/');
+
+	private static void CollectDocumentationFilesByUrl(
+		INavigationItem item,
+		Dictionary<string, IDocumentationFile> urlToFile,
+		string sitePrefix
+	)
+	{
+		switch (item)
+		{
+			case ILeafNavigationItem<IDocumentationFile> leaf:
+				AddDocumentationFileUrl(urlToFile, leaf.Url, leaf.Model, sitePrefix);
+				break;
+			case INodeNavigationItem<IDocumentationFile, INavigationItem> node:
+				AddDocumentationFileUrl(urlToFile, node.Url, node.Index.Model, sitePrefix);
+				AddDocumentationFileUrl(urlToFile, node.Index.Url, node.Index.Model, sitePrefix);
+				foreach (var child in node.NavigationItems)
+					CollectDocumentationFilesByUrl(child, urlToFile, sitePrefix);
+				break;
+			case INodeNavigationItem<INavigationModel, INavigationItem> node:
+				foreach (var child in node.NavigationItems)
+					CollectDocumentationFilesByUrl(child, urlToFile, sitePrefix);
+				break;
+		}
+	}
+
+	private static void AddDocumentationFileUrl(
+		Dictionary<string, IDocumentationFile> urlToFile,
+		string url,
+		IDocumentationFile file,
+		string sitePrefix
+	)
+	{
+		_ = urlToFile.TryAdd(url, file);
+
+		if (sitePrefix == "/" || string.IsNullOrEmpty(url) || !url.StartsWith('/'))
+			return;
+
+		_ = urlToFile.TryAdd($"{sitePrefix.TrimEnd('/')}{url}", file);
+	}
+
 	private static IReadOnlyList<INavigationItem> BuildV2Items(
 		IReadOnlyList<INavV2Item> v2Items,
 		IReadOnlyDictionary<Uri, IRootNavigationItem<IDocumentationFile, INavigationItem>> nodes,

From 393f73bd22089b93c4146294d77105d7e8c19b30 Mon Sep 17 00:00:00 2001
From: Florent Le Borgne <florent.leborgne@elastic.co>
Date: Mon, 11 May 2026 21:53:18 +0200
Subject: [PATCH 49/56] Validate links in {hero}, {link-card}, {whats-new}
 directives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

URL fields in hub directive YAML bodies and options never went through
Markdig's link parser, so cross-link resolution, missing-file checks,
and link-index emission were all skipped — broken hub links shipped as
silent 404s.

Adds HubLinkValidator, invoked from each hub block's FinalizeAndValidate
for every URL field. It:
- resolves declared cross-link schemes via CrossLinkResolver.TryResolve,
  rewrites the value with the resolved URL, and registers via
  Build.Collector.EmitCrossLink
- emits errors for undeclared schemes (with cursor:/vscode: passthrough)
- checks internal absolute paths against the docset source dir in
  isolated builds (skipped under assembler/codex where cross-docset
  paths are legal — assembler-aware validation is a follow-up)
- honours configured redirects with a warning suggesting the new path

Wired only into HeroBlock, LinkCardBlock, and WhatsNewBlock. Surfaces
~40 previously-silent broken cross-link references in docs-content's
kibana/elasticsearch hub pages.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../Myst/Directives/Hub/HeroBlock.cs          |   6 +-
 .../Myst/Directives/Hub/HubLinkValidator.cs   | 135 ++++++++++++++++++
 .../Myst/Directives/Hub/LinkCardBlock.cs      |   9 ++
 .../Myst/Directives/Hub/WhatsNewBlock.cs      |  12 ++
 4 files changed, 160 insertions(+), 2 deletions(-)
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HubLinkValidator.cs

diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
index 8787ad312f..b776239d70 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -48,9 +48,11 @@ public override void FinalizeAndValidate(ParserContext context)
 		// search defaults to true; explicit ":search: false" hides it
 		ShowSearch = TryPropBool("search") ?? true;
 		QuickLinks = ParsePairs(Prop("quick-links"), allowEmptyUrl: false)
-			.Select(p => new HeroQuickLink(p.Label, p.Url!)).ToList();
+			.Select(p => new HeroQuickLink(p.Label, HubLinkValidator.ValidateAndResolve(p.Url, this, context) ?? p.Url!))
+			.ToList();
 		OtherVersions = ParsePairs(Prop("versions"), allowEmptyUrl: true)
-			.Select(p => new HeroVersion(p.Label, p.Url)).ToList();
+			.Select(p => new HeroVersion(p.Label, HubLinkValidator.ValidateAndResolve(p.Url, this, context)))
+			.ToList();
 		Releases = Prop("releases");
 
 		if (string.IsNullOrWhiteSpace(Title))
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HubLinkValidator.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HubLinkValidator.cs
new file mode 100644
index 0000000000..159a59ab2e
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HubLinkValidator.cs
@@ -0,0 +1,135 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Elastic.Documentation;
+using Elastic.Documentation.Links;
+using Elastic.Markdown.Diagnostics;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Validates and resolves URL values supplied in hub directive YAML bodies and
+/// options. These URLs never pass through Markdig's <c>LinkInlineParser</c>, so
+/// without this helper the normal cross-link resolution, missing-file checks,
+/// and link-index emission are skipped — broken hub links ship silently.
+///
+/// Returns the resolved URL (or the original on failure) so callers can write
+/// it back into their YAML data records. Errors / hints are emitted against
+/// the supplying <see cref="DirectiveBlock"/>.
+/// </summary>
+internal static class HubLinkValidator
+{
+	/// <summary>
+	/// Validate <paramref name="url"/> and, when applicable, resolve cross-link
+	/// schemes to their final form. Returns the (possibly rewritten) URL.
+	/// </summary>
+	public static string? ValidateAndResolve(string? url, DirectiveBlock block, ParserContext context)
+	{
+		if (string.IsNullOrWhiteSpace(url) || block.SkipValidation)
+			return url;
+
+		var trimmed = url.Trim();
+		if (trimmed.Length == 0 || trimmed[0] == '#')
+			return url;
+
+		if (trimmed.StartsWith("http://", StringComparison.OrdinalIgnoreCase)
+			|| trimmed.StartsWith("https://", StringComparison.OrdinalIgnoreCase)
+			|| trimmed.StartsWith("mailto:", StringComparison.OrdinalIgnoreCase))
+			return url;
+
+		if (Uri.TryCreate(trimmed, UriKind.Absolute, out var uri) && CrossLinkValidator.IsCrossLink(uri))
+			return ResolveCrossLink(url, uri, block, context);
+
+		// Treat anything else as a docset-internal path. Hub directives are authored
+		// with site-absolute paths (e.g. "/explore-analyze/discover.md"); relative
+		// paths don't have a meaningful base because the YAML body isn't anchored
+		// to a markdown file location the way an inline [text](url) link is.
+		if (!trimmed.StartsWith('/'))
+		{
+			block.EmitError($"Hub directive link `{url}` must be an absolute path starting with `/`, a cross-link scheme (e.g. `kibana://`), or an external URL.");
+			return url;
+		}
+
+		ValidateInternal(url, block, context);
+		return url;
+	}
+
+	private static string ResolveCrossLink(string original, Uri uri, DirectiveBlock block, ParserContext context)
+	{
+		var resolver = context.CrossLinkResolver;
+		if (!resolver.IsDeclaredCrossLinkScheme(uri.Scheme))
+		{
+			// Custom passthrough protocols (cursor:, vscode:) — leave alone.
+			if (IsPassthroughCustomProtocolScheme(uri.Scheme))
+				return original;
+			block.EmitError($"Hub directive link `{original}` uses cross-link scheme `{uri.Scheme}://` which is not declared under `cross_links` in docset.yml.");
+			return original;
+		}
+
+		context.Build.Collector.EmitCrossLink(original);
+		return resolver.TryResolve(s => block.EmitError(s), uri, out var resolved)
+			? resolved.ToString()
+			: original;
+	}
+
+	private static void ValidateInternal(string url, DirectiveBlock block, ParserContext context)
+	{
+		// In Assembler/Codex builds an absolute path may target a file owned by a
+		// different docset (the assembled site is the union of all docsets), so the
+		// current docset's source dir isn't the right basis for an existence check.
+		// Cross-docset references should ideally use the cross-link scheme so they
+		// resolve through CrossLinkResolver, but we don't have a way to assert that
+		// at this layer yet — flagging here would produce false positives.
+		if (context.Build.BuildType != BuildType.Isolated)
+			return;
+
+		var (path, _) = SplitAnchor(url);
+		if (string.IsNullOrEmpty(path) || path == "/")
+			return;
+
+		var sourceDir = context.Build.DocumentationSourceDirectory.FullName;
+		var fs = context.Build.ReadFileSystem;
+		var rel = path.TrimStart('/');
+
+		// Probe candidates in order: as-given, with .md, with /index.md.
+		// docs-builder URLs typically omit .md, so authors write /explore-analyze/discover
+		// for /explore-analyze/discover.md or /explore-analyze/discover/index.md.
+		string[] candidates = path.EndsWith(".md", StringComparison.OrdinalIgnoreCase)
+			? [rel]
+			: [rel, rel + ".md", rel.TrimEnd('/') + "/index.md"];
+
+		foreach (var candidate in candidates)
+		{
+			if (context.TryFindDocumentByRelativePath(candidate) is not null)
+				return;
+			var pathOnDisk = Path.GetFullPath(Path.Join(sourceDir, candidate));
+			if (fs.File.Exists(pathOnDisk))
+				return;
+		}
+
+		// Honour configured redirects so old paths emit a hint, not an error.
+		if (context.Configuration.Redirects is not null
+			&& context.Configuration.Redirects.TryGetValue(rel, out var redirect))
+		{
+			var to = redirect.To
+				?? (redirect.Many is not null
+					? string.Join(", ", redirect.Many.Select(m => m.To))
+					: "unknown");
+			block.EmitWarning($"Hub directive link `{url}` has a redirect; update to: {to}");
+			return;
+		}
+
+		block.EmitError($"Hub directive link `{url}` does not exist. If it was recently removed add a redirect.");
+	}
+
+	private static (string Path, string? Anchor) SplitAnchor(string url)
+	{
+		var hash = url.IndexOf('#');
+		return hash < 0 ? (url, null) : (url[..hash], url[(hash + 1)..]);
+	}
+
+	private static bool IsPassthroughCustomProtocolScheme(string scheme) =>
+		scheme.Equals("cursor", StringComparison.OrdinalIgnoreCase)
+		|| scheme.StartsWith("vscode", StringComparison.OrdinalIgnoreCase);
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
index a116fd6e81..61fadeb63d 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardBlock.cs
@@ -64,6 +64,15 @@ public override void FinalizeAndValidate(ParserContext context)
 
 		if (string.IsNullOrWhiteSpace(Data.Title))
 			this.EmitError("{link-card} requires a `title` field in its YAML body.");
+
+		Data.Link = HubLinkValidator.ValidateAndResolve(Data.Link, this, context);
+		foreach (var link in Data.Links)
+			link.Url = HubLinkValidator.ValidateAndResolve(link.Url, this, context);
+		if (Data.Aside is not null)
+		{
+			foreach (var link in Data.Aside.Links)
+				link.Url = HubLinkValidator.ValidateAndResolve(link.Url, this, context);
+		}
 	}
 }
 
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
index f61250d815..cf271a5ba8 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
@@ -49,6 +49,7 @@ public override void FinalizeAndValidate(ParserContext context)
 				return;
 			}
 			Data = resolved;
+			ValidateLinks(context);
 			return;
 		}
 
@@ -66,7 +67,18 @@ public override void FinalizeAndValidate(ParserContext context)
 		catch (YamlException ex)
 		{
 			this.EmitError($"{{whats-new}} YAML parse error: {ex.Message}");
+			return;
 		}
+
+		ValidateLinks(context);
+	}
+
+	private void ValidateLinks(ParserContext context)
+	{
+		foreach (var link in Data.ReleaseLinks)
+			link.Url = HubLinkValidator.ValidateAndResolve(link.Url, this, context);
+		foreach (var item in Data.Items)
+			item.Link = HubLinkValidator.ValidateAndResolve(item.Link, this, context);
 	}
 
 	private WhatsNewData? LoadFromCentralConfig(string productKey)

From 4d2c04bb75446d7e0201dce1cc29cd29ddee1d62 Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Tue, 23 Jun 2026 19:08:03 +0200
Subject: [PATCH 50/56] Simplify hero, make on-this-page sticky, trim Products
 dropdown

- Hero directive now renders only icon, title, description, and releases;
  drop the search box, version dropdown, and quick-link options end to end
- Make the hub "on this page" component sticky on desktop
- Restore the Products dropdown rendering and scroll-container fix lost in
  the nav-v2 merge, and remove the deployment-runbook and "soon" stubs

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 config/navigation-v2.yml                      |   7 -
 docs/syntax/hero.md                           |  27 +-
 docs/syntax/hub-pages.md                      |   3 -
 docs/testing/products/elasticsearch/v9.md     |   3 -
 docs/testing/products/kibana/v9.md            |   3 -
 .../Assets/markdown/hub.css                   | 240 +-----------------
 .../Layout/_SecondaryNav.cshtml               |   2 +-
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |   7 +-
 .../Myst/Directives/Hub/HeroBlock.cs          |  61 +----
 .../Myst/Directives/Hub/HeroView.cshtml       |  71 ------
 .../Myst/Directives/Hub/HeroViewModel.cs      |   6 -
 11 files changed, 13 insertions(+), 417 deletions(-)

diff --git a/config/navigation-v2.yml b/config/navigation-v2.yml
index 7a6257df31..e5cf213a92 100644
--- a/config/navigation-v2.yml
+++ b/config/navigation-v2.yml
@@ -4276,13 +4276,6 @@ nav:
         title: Elasticsearch
       - page: docs-content://products/kibana/v9.md
         title: Kibana
-      - title: Logstash (soon)
-      - title: Beats (soon)
-    - label: Deployment runbooks
-      children:
-      - title: Elastic Cloud Hosted (soon)
-      - title: Elastic Cloud Serverless (soon)
-      - title: Self-managed (soon)
 
   - section: APIs
     url: https://www.elastic.co/docs/api
diff --git a/docs/syntax/hero.md b/docs/syntax/hero.md
index 4c245b4c66..9c203aa6b6 100644
--- a/docs/syntax/hero.md
+++ b/docs/syntax/hero.md
@@ -1,6 +1,6 @@
 # Hero
 
-A full-bleed hero band with a product icon, page title, description, fake search box, version dropdown, quick-action pills, and an optional release-status line. Designed for the [hub layout](hub-pages.md) but reusable on any page.
+A full-bleed hero band with a product icon, page title, description, and an optional release-status line. Designed for the [hub layout](hub-pages.md) but reusable on any page.
 
 All hero content is supplied via options. The directive body is not used.
 
@@ -11,7 +11,6 @@ All hero content is supplied via options. The directive body is not used.
 :icon: kibana
 :title: Kibana
 :description: The UI for the Elasticsearch platform.
-:version: v9 / Serverless (current)
 :::
 ```
 
@@ -24,35 +23,15 @@ The `:title:` option doubles as the page title (no body H1 needed). `:descriptio
 | `:title:` | string | **Required.** Page heading shown next to the icon. Also picked up as the document's page title. |
 | `:description:` | inline markdown | One-line summary shown below the title. Supports bold, italics, and links. |
 | `:icon:` | string | Product key. Resolves to an inline SVG via the product-icon lookup. Known keys: `elasticsearch`, `kibana`, `observability`, `security`. Unknown keys fall back to a single-letter chip. |
-| `:version:` | string | Label inside the version chip (e.g. `v9 / Serverless (current)`). |
-| `:versions:` | comma list | When set, the chip becomes a `<details>` dropdown listing other versions. Items use `Label` (greyed, "soon") or `Label=URL` (clickable). |
-| `:quick-links:` | comma list, `Label=URL` | Pill bar below the version chip. |
-| `:releases:` | inline markdown | Small status line under the pills, supports inline links and bold/italic. |
-| `:search:` | bool, default `true` | Show the placeholder search box. |
+| `:releases:` | inline markdown | Small status line under the title, supports inline links and bold/italic. |
 
-## Version dropdown
-
-```markdown
-:::{hero}
-:icon: kibana
-:title: Kibana
-:description: The UI for the Elasticsearch platform.
-:version: v9 / Serverless (current)
-:versions: v8=https://www.elastic.co/docs/products/kibana/8.x,v7
-:::
-```
-
-`v8=...` is a clickable link. `v7` (no `=URL`) renders greyed out with a "soon" badge.
-
-## Quick links and releases
+## Releases
 
 ```markdown
 :::{hero}
 :icon: elasticsearch
 :title: Elasticsearch
 :description: The distributed search and analytics engine.
-:version: v9 / Serverless (current)
-:quick-links: Install=/install,API reference=/api,Release notes=/release-notes
 :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026) · [Serverless deployed](/srn) Apr 1, 2026
 :::
 ```
diff --git a/docs/syntax/hub-pages.md b/docs/syntax/hub-pages.md
index 71d3a9aaee..10de9e6676 100644
--- a/docs/syntax/hub-pages.md
+++ b/docs/syntax/hub-pages.md
@@ -40,9 +40,6 @@ layout: hub
 :icon: kibana
 :title: Kibana
 :description: The UI for the Elasticsearch platform.
-:version: v9 / Serverless (current)
-:versions: v8,v7
-:quick-links: Install=/install,Tutorial=/tutorial
 :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026)
 :::
 
diff --git a/docs/testing/products/elasticsearch/v9.md b/docs/testing/products/elasticsearch/v9.md
index 8c0caa1aca..c4cda54c46 100644
--- a/docs/testing/products/elasticsearch/v9.md
+++ b/docs/testing/products/elasticsearch/v9.md
@@ -6,9 +6,6 @@ layout: hub
 :icon: elasticsearch
 :title: Elasticsearch
 :description: The distributed search and analytics engine. Store, search, and analyze data at any scale, with vector search, AI toolkits, and a high-performance retrieval engine.
-:version: v9 / Serverless (current)
-:versions: v8,v7
-:quick-links: Install=https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch,Quick start=https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples,API reference=https://www.elastic.co/docs/api/doc/elasticsearch,Release notes=https://www.elastic.co/docs/release-notes/elasticsearch
 :releases: Latest&#58; [Stack 9.4.1](https://www.elastic.co/docs/release-notes/elasticsearch) (Mar 28, 2026) · [Serverless deployed](https://www.elastic.co/docs/release-notes/serverless) Apr 1, 2026
 :::
 
diff --git a/docs/testing/products/kibana/v9.md b/docs/testing/products/kibana/v9.md
index 360edb2f7e..cbd5bb9c60 100644
--- a/docs/testing/products/kibana/v9.md
+++ b/docs/testing/products/kibana/v9.md
@@ -6,9 +6,6 @@ layout: hub
 :icon: kibana
 :title: Kibana
 :description: The UI for the Elasticsearch platform. Explore and visualize your data, build dashboards, set up alerts, automate tasks with AI, and use purpose-built solutions for Search, Observability, and Security.
-:version: v9 / Serverless (current)
-:versions: v8,v7
-:quick-links: Install=/install,Tutorial=/tutorial,API reference=/api,Release notes=/release-notes
 :releases: Latest&#58; [Stack 9.4.1](/release-notes/kibana) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
 :::
 
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 1a9f814d0b..0f3fcb5764 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -85,241 +85,6 @@
 		line-height: 1.6;
 	}
 
-	.hub-hero .hub-hero-search {
-		margin-top: 20px;
-		margin-bottom: 20px;
-		max-width: 480px;
-	}
-	.hub-hero .hub-hero-search-box {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		background: var(--color-white);
-		border-radius: 10px;
-		padding: 10px 16px;
-		box-shadow: 0 2px 12px rgb(0 0 0 / 0.15);
-		color: var(--color-grey-80);
-		cursor: text;
-	}
-	.hub-hero .hub-hero-search-icon {
-		flex-shrink: 0;
-	}
-	.hub-hero .hub-hero-search-box input {
-		flex: 1;
-		border: none;
-		outline: none;
-		background: transparent;
-		font-size: 15px;
-		font-family: inherit;
-		color: var(--color-ink-dark);
-		min-width: 0;
-	}
-	.hub-hero .hub-hero-search-box input::placeholder {
-		color: var(--color-grey-40);
-	}
-
-	.hub-hero .hub-hero-meta {
-		@apply mt-2 flex flex-wrap items-center gap-3;
-	}
-
-	.hub-hero .hub-hero-version {
-		display: inline-flex;
-		align-items: center;
-		gap: 8px;
-		background: rgb(255 255 255 / 0.08);
-		border: 1px solid rgb(255 255 255 / 0.15);
-		border-radius: 20px;
-		padding: 5px 14px;
-		font-size: 13px;
-		color: rgb(255 255 255 / 0.85);
-	}
-	.hub-hero .hub-hero-version-dot {
-		display: inline-block;
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: #9adc30;
-	}
-
-	/* Version dropdown ------------------------------------------------- */
-	.hub-hero details.hub-hero-version-dropdown {
-		position: relative;
-		display: inline-block;
-		padding: 0;
-		border: 0;
-		background: transparent;
-	}
-	.hub-hero details.hub-hero-version-dropdown summary {
-		display: inline-flex;
-		align-items: center;
-		gap: 10px;
-		background: rgb(255 255 255 / 0.12);
-		border: 1px solid rgb(255 255 255 / 0.25);
-		border-radius: 999px;
-		padding: 4px 4px 4px 14px;
-		font-size: 13px;
-		color: var(--color-white);
-		cursor: pointer;
-		list-style: none;
-		user-select: none;
-		transition:
-			background 0.15s,
-			border-color 0.15s;
-	}
-	.hub-hero
-		details.hub-hero-version-dropdown
-		summary::-webkit-details-marker {
-		display: none;
-	}
-	.hub-hero details.hub-hero-version-dropdown summary:hover {
-		background: rgb(255 255 255 / 0.2);
-		border-color: rgb(255 255 255 / 0.4);
-	}
-	.hub-hero details[open].hub-hero-version-dropdown summary {
-		background: rgb(255 255 255 / 0.2);
-		border-color: rgb(255 255 255 / 0.4);
-	}
-	.hub-hero .hub-hero-version-caret {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: 50%;
-		background: rgb(255 255 255 / 0.22);
-		color: var(--color-white);
-		transition:
-			transform 0.18s ease,
-			background 0.15s;
-	}
-	.hub-hero .hub-hero-version-caret svg {
-		display: block;
-		width: 16px;
-		height: 16px;
-	}
-	.hub-hero
-		details.hub-hero-version-dropdown
-		summary:hover
-		.hub-hero-version-caret {
-		background: rgb(255 255 255 / 0.3);
-	}
-	.hub-hero details[open] .hub-hero-version-caret {
-		transform: rotate(180deg);
-	}
-
-	.hub-hero .hub-hero-version-menu {
-		position: absolute;
-		top: calc(100% + 6px);
-		left: 0;
-		min-width: 220px;
-		background: var(--color-white);
-		border: 1px solid var(--color-grey-20);
-		border-radius: 10px;
-		padding: 4px;
-		margin: 0;
-		list-style: none;
-		box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
-		font-size: 13px;
-		color: var(--color-ink-dark);
-		z-index: 20;
-	}
-	.hub-hero .hub-hero-version-menu li {
-		margin: 0;
-		padding: 0;
-		border-radius: 6px;
-	}
-	.hub-hero .hub-hero-version-menu li a,
-	.hub-hero
-		.hub-hero-version-menu
-		li
-		> span:not(.hub-hero-version-tick):not(.hub-hero-version-soon) {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 12px;
-		padding: 8px 12px;
-		text-decoration: none;
-		color: inherit;
-		white-space: nowrap;
-	}
-	.hub-hero
-		.hub-hero-version-menu
-		li
-		> span:not(.hub-hero-version-tick):not(.hub-hero-version-soon) {
-		display: flex;
-	}
-	.hub-hero .hub-hero-version-menu li {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 12px;
-		padding: 8px 12px;
-		white-space: nowrap;
-	}
-	.hub-hero .hub-hero-version-menu li a,
-	.hub-hero .hub-hero-version-menu li > span {
-		padding: 0;
-	}
-	.hub-hero
-		.hub-hero-version-menu
-		li:hover:not(.hub-hero-version-current):not(
-			.hub-hero-version-disabled
-		) {
-		background: var(--color-grey-10);
-	}
-	.hub-hero .hub-hero-version-menu li a {
-		color: inherit;
-		text-decoration: none;
-		flex: 1;
-	}
-	.hub-hero .hub-hero-version-menu li a:hover {
-		color: var(--color-blue-elastic-100);
-		text-decoration: none;
-	}
-	.hub-hero .hub-hero-version-current {
-		font-weight: 600;
-		color: var(--color-ink-dark);
-	}
-	.hub-hero .hub-hero-version-tick {
-		color: var(--color-blue-elastic-100);
-		font-weight: 700;
-	}
-	.hub-hero .hub-hero-version-disabled {
-		color: var(--color-grey-40);
-		cursor: not-allowed;
-	}
-	.hub-hero .hub-hero-version-soon {
-		font-size: 11px;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: var(--color-grey-40);
-		background: var(--color-grey-10);
-		padding: 2px 6px;
-		border-radius: 4px;
-	}
-
-	.hub-hero .hub-hero-pills {
-		@apply m-0 flex list-none flex-wrap gap-2 p-0;
-	}
-	.hub-hero .hub-hero-pills li {
-		@apply m-0 p-0;
-	}
-	.hub-hero .hub-hero-pills a {
-		font-size: 13px;
-		padding: 5px 14px;
-		border-radius: 20px;
-		background: rgb(255 255 255 / 0.06);
-		border: 1px solid rgb(255 255 255 / 0.12);
-		color: rgb(255 255 255 / 0.85);
-		text-decoration: none;
-		transition: background 0.15s;
-	}
-	.hub-hero .hub-hero-pills a:hover {
-		background: rgb(255 255 255 / 0.12);
-		color: var(--color-white);
-		text-decoration: none;
-	}
-
 	.hub-hero .hub-hero-releases {
 		@apply mt-4;
 		font-size: 12px;
@@ -337,12 +102,16 @@
 	/* On this page ----------------------------------------------------- */
 	.hub-on-this-page {
 		@apply mx-auto w-full max-w-5xl;
+		position: sticky;
+		top: calc(var(--offset-top) + 8px);
+		z-index: 20;
 		margin-top: 40px;
 		margin-bottom: 36px;
 		padding: 20px 28px;
 		background: var(--color-white);
 		border: 1px solid var(--color-grey-20);
 		border-radius: 16px;
+		box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
 		font-size: 14px;
 		display: flex;
 		flex-wrap: wrap;
@@ -654,6 +423,7 @@
 			grid-template-columns: 1fr;
 		}
 		.hub-on-this-page {
+			position: static;
 			flex-direction: column;
 		}
 		.hub-card {
diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
index bd495662ff..d8c718b691 100644
--- a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -6,7 +6,7 @@
 	<ask-ai></ask-ai>
 	<nav id="secondary-nav" hx-select-oob="#main-container" hx-swap="none"
 	     class="bg-grey-10 border-b border-grey-20">
-		<div class="w-full max-w-(--max-layout-width) mx-auto px-4 h-[55px] flex items-center min-w-0 overflow-x-auto">
+		<div class="secondary-nav-scroll-container w-full max-w-(--max-layout-width) mx-auto px-4 h-[55px] flex items-center min-w-0 overflow-x-auto">
 			@if (Model.NavV2Sections is { Count: > 0 } navTabs)
 			{
 				<ul class="flex w-max max-w-none flex-nowrap gap-6 font-sans font-semibold text-sm text-ink-light md:text-base">
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 39122a2705..ced8960b70 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -408,12 +408,7 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 			IconSvg = block.IconSvg,
 			Title = block.Title,
 			DescriptionHtml = descriptionHtml,
-			Version = block.Version,
-			ShowSearch = block.ShowSearch,
-			QuickLinks = block.QuickLinks,
-			OtherVersions = block.OtherVersions,
-			ReleasesHtml = releasesHtml,
-			SitePathPrefix = block.Build.UrlPathPrefix
+			ReleasesHtml = releasesHtml
 		});
 		RenderRazorSlice(slice, renderer);
 	}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
index b776239d70..afc69e08ae 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -7,9 +7,9 @@
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
 /// <summary>
-/// Renders a full-bleed page hero with product icon, title, description,
-/// search box, version chip, quick-link pills, and an optional release-status
-/// line. All content is supplied via options -- the body is unused.
+/// Renders a full-bleed page hero with product icon, title, description, and an
+/// optional release-status line. All content is supplied via options -- the body
+/// is unused.
 /// </summary>
 /// <example>
 /// <code>
@@ -17,8 +17,6 @@ namespace Elastic.Markdown.Myst.Directives.Hub;
 /// :icon: kibana
 /// :title: Kibana
 /// :description: The UI for the Elasticsearch platform.
-/// :version: v9 / Serverless (current)
-/// :quick-links: Install=/install,Tutorial=/tutorial
 /// :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026)
 /// :::
 /// </code>
@@ -32,10 +30,6 @@ public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
 	public string? IconSvg { get; private set; }
 	public string? Title { get; private set; }
 	public string? Description { get; private set; }
-	public string? Version { get; private set; }
-	public bool ShowSearch { get; private set; }
-	public IReadOnlyList<HeroQuickLink> QuickLinks { get; private set; } = [];
-	public IReadOnlyList<HeroVersion> OtherVersions { get; private set; } = [];
 	public string? Releases { get; private set; }
 
 	public override void FinalizeAndValidate(ParserContext context)
@@ -44,58 +38,9 @@ public override void FinalizeAndValidate(ParserContext context)
 		IconSvg = ProductIcons.Get(Icon);
 		Title = Prop("title");
 		Description = Prop("description");
-		Version = Prop("version");
-		// search defaults to true; explicit ":search: false" hides it
-		ShowSearch = TryPropBool("search") ?? true;
-		QuickLinks = ParsePairs(Prop("quick-links"), allowEmptyUrl: false)
-			.Select(p => new HeroQuickLink(p.Label, HubLinkValidator.ValidateAndResolve(p.Url, this, context) ?? p.Url!))
-			.ToList();
-		OtherVersions = ParsePairs(Prop("versions"), allowEmptyUrl: true)
-			.Select(p => new HeroVersion(p.Label, HubLinkValidator.ValidateAndResolve(p.Url, this, context)))
-			.ToList();
 		Releases = Prop("releases");
 
 		if (string.IsNullOrWhiteSpace(Title))
 			this.EmitError("{hero} requires a `:title:` option.");
 	}
-
-	private static IReadOnlyList<(string Label, string? Url)> ParsePairs(string? raw, bool allowEmptyUrl)
-	{
-		if (string.IsNullOrWhiteSpace(raw))
-			return [];
-
-		var entries = new List<(string, string?)>();
-		foreach (var part in raw.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
-		{
-			var separator = part.IndexOf('=');
-			string label;
-			string? url;
-			if (separator < 0)
-			{
-				if (!allowEmptyUrl)
-					continue;
-				label = part.Trim();
-				url = null;
-			}
-			else
-			{
-				label = part[..separator].Trim();
-				url = part[(separator + 1)..].Trim();
-				if (string.IsNullOrEmpty(url))
-				{
-					if (!allowEmptyUrl)
-						continue;
-					url = null;
-				}
-			}
-			if (label.Length > 0)
-				entries.Add((label, url));
-		}
-
-		return entries;
-	}
 }
-
-public readonly record struct HeroQuickLink(string Label, string Url);
-
-public readonly record struct HeroVersion(string Label, string? Url);
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index 6017272119..90a1999ed9 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -22,77 +22,6 @@
 			</div>
 		</div>
 
-		@if (Model.ShowSearch)
-		{
-			var placeholder = string.IsNullOrWhiteSpace(Model.IconKey)
-				? "Search docs..."
-				: $"Search {char.ToUpperInvariant(Model.IconKey![0])}{Model.IconKey.AsSpan(1).ToString()} docs...";
-			<div class="hub-hero-search">
-				<label class="hub-hero-search-box">
-					<svg class="hub-hero-search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-						<path d="M11.271 11.978l3.872 3.873a.502.502 0 00.708-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05 6.99 6.99 0 004.276-1.5v-.519zM2.752 11.24c-2.342-2.342-2.342-6.152 0-8.494 2.343-2.343 6.152-2.343 8.494 0 2.343 2.342 2.343 6.152 0 8.494-2.342 2.342-6.151 2.342-8.494 0z" fill="currentColor"/>
-					</svg>
-					<input type="text" placeholder="@placeholder" autocomplete="off" aria-label="@placeholder" disabled />
-				</label>
-			</div>
-		}
-
-		<div class="hub-hero-meta">
-			@if (!string.IsNullOrWhiteSpace(Model.Version))
-			{
-				if (Model.OtherVersions.Count > 0)
-				{
-					<details class="hub-hero-version hub-hero-version-dropdown">
-						<summary>
-							<span class="hub-hero-version-dot" aria-hidden="true"></span>
-							<span class="hub-hero-version-text">@Model.Version</span>
-							<span class="hub-hero-version-caret" aria-hidden="true">
-								<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-									<path d="M3.5 6L8 10.5L12.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-								</svg>
-							</span>
-						</summary>
-						<ul class="hub-hero-version-menu" role="menu">
-							<li class="hub-hero-version-current" role="menuitem" aria-current="page">
-								<span>@Model.Version</span>
-								<span class="hub-hero-version-tick" aria-hidden="true">✓</span>
-							</li>
-							@foreach (var v in Model.OtherVersions)
-							{
-								if (string.IsNullOrEmpty(v.Url))
-								{
-									<li class="hub-hero-version-disabled" role="menuitem" aria-disabled="true">
-										<span>@v.Label</span>
-										<span class="hub-hero-version-soon">soon</span>
-									</li>
-								}
-								else
-								{
-									<li role="menuitem"><a href="@Model.PrefixUrl(v.Url)" hx-boost="false">@v.Label</a></li>
-								}
-							}
-						</ul>
-					</details>
-				}
-				else
-				{
-					<span class="hub-hero-version">
-						<span class="hub-hero-version-dot" aria-hidden="true"></span>
-						<span class="hub-hero-version-text">@Model.Version</span>
-					</span>
-				}
-			}
-			@if (Model.QuickLinks.Count > 0)
-			{
-				<ul class="hub-hero-pills">
-					@foreach (var link in Model.QuickLinks)
-					{
-						<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
-					}
-				</ul>
-			}
-		</div>
-
 		@if (!string.IsNullOrWhiteSpace(Model.ReleasesHtml))
 		{
 			<p class="hub-hero-releases">@(new HtmlString(Model.ReleasesHtml))</p>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index dfbae92ff3..4eb5b03a25 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -10,11 +10,5 @@ public class HeroViewModel : DirectiveViewModel
 	public required string? IconSvg { get; init; }
 	public required string? Title { get; init; }
 	public required string? DescriptionHtml { get; init; }
-	public required string? Version { get; init; }
-	public required bool ShowSearch { get; init; }
-	public required IReadOnlyList<HeroQuickLink> QuickLinks { get; init; }
-	public required IReadOnlyList<HeroVersion> OtherVersions { get; init; }
 	public required string? ReleasesHtml { get; init; }
-	public required string? SitePathPrefix { get; init; }
-	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
 }

From d9f2ab32c0d9cd985edd9f08a9bdfde43dcbe20c Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Tue, 23 Jun 2026 21:12:00 +0200
Subject: [PATCH 51/56] Fix hub layout/dropdown and add hub indicator

- Add md:order-2 to hub <main> so content fills the wide column instead
  of collapsing into the sidebar column (matches the default layout).
- Hide the top-bar section dropdown when closed and anchor it under its
  summary; let the nav scroll container's overflow go visible while open
  so the menu isn't clipped behind the left nav.
- Add a "Find all docs about {product}" eyebrow on hub heroes to signal
  the page is a documentation index.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Assets/markdown/hub.css                       |  7 +++++++
 .../Assets/secondary-nav-dropdown.css             | 15 ++++++++++++++-
 .../Myst/Directives/Hub/HeroView.cshtml           |  4 ++++
 src/Elastic.Markdown/_Layout.cshtml               |  2 +-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 0f3fcb5764..e1f89a9cc7 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -33,6 +33,13 @@
 	.hub-hero .hub-hero-inner {
 		@apply mx-auto w-full max-w-5xl;
 	}
+	.hub-hero .hub-hero-eyebrow {
+		margin: 0 0 14px;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		letter-spacing: 0.02em;
+		color: rgb(255 255 255 / 0.55);
+	}
 	.hub-hero .hub-hero-top {
 		display: grid;
 		grid-template-columns: auto 1fr;
diff --git a/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css b/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
index 48580da254..3892321ac6 100644
--- a/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
+++ b/src/Elastic.Documentation.Site/Assets/secondary-nav-dropdown.css
@@ -8,9 +8,19 @@
 
 @layer components {
 	.secondary-nav-dropdown {
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 	}
+
+	/* The nav bar uses overflow-x:auto for horizontal tab scrolling, which
+	   also clips vertically and would cut off an open dropdown. Let the menu
+	   escape only while a dropdown is open. */
+	.secondary-nav-scroll-container:has(.secondary-nav-dropdown[open]) {
+		/* !important to win over the Tailwind `overflow-x-auto` utility,
+		   which sits in a higher cascade layer. */
+		overflow: visible !important;
+	}
 	.secondary-nav-dropdown summary {
 		list-style: none;
 	}
@@ -34,7 +44,7 @@
 		min-width: 220px;
 		max-width: 320px;
 		z-index: 50;
-		display: flex;
+		display: none;
 		flex-direction: column;
 		padding: 6px 0;
 		background: var(--color-white);
@@ -43,6 +53,9 @@
 		box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
 		font-weight: 500;
 	}
+	.secondary-nav-dropdown[open] .secondary-nav-dropdown-menu {
+		display: flex;
+	}
 
 	.secondary-nav-dropdown-group-label {
 		padding: 8px 14px 4px 14px;
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index 90a1999ed9..f372424a2c 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -2,6 +2,10 @@
 
 <section class="hub-hero">
 	<div class="hub-hero-inner">
+		@if (!string.IsNullOrWhiteSpace(Model.Title))
+		{
+			<p class="hub-hero-eyebrow">Find all docs about @Model.Title</p>
+		}
 		<div class="hub-hero-top">
 			@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
 			{
diff --git a/src/Elastic.Markdown/_Layout.cshtml b/src/Elastic.Markdown/_Layout.cshtml
index 8b3661ae10..2d2121efc6 100644
--- a/src/Elastic.Markdown/_Layout.cshtml
+++ b/src/Elastic.Markdown/_Layout.cshtml
@@ -71,7 +71,7 @@
 			<div class="min-h-screen w-full max-w-(--max-layout-width) mx-auto md:px-4">
 				<div class="min-h-screen grid grid-cols-1 md:grid-cols-[var(--max-sidebar-width)_1fr] gap-4">
 					@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
-					<main id="content-container" class="min-w-0">
+					<main id="content-container" class="min-w-0 md:order-2">
 						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
 						<article id="hub-content" class="hub-content min-w-0">
 							@await RenderBodyAsync()

From 87a8fbb24fea729ef52b7654d79dc70a04b0bc65 Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Wed, 24 Jun 2026 15:27:33 +0200
Subject: [PATCH 52/56] Add "Browse all Elastic docs" link to hub hero eyebrow

Turn the hub indicator into both a label and an escape hatch: keep
"Find all docs about {product}" and add a pill link to the docs home
so readers who land on a product hub can jump to the full docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Assets/markdown/hub.css                   | 38 ++++++++++++++++++-
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |  3 +-
 .../Myst/Directives/Hub/HeroView.cshtml       | 10 ++++-
 .../Myst/Directives/Hub/HeroViewModel.cs      |  2 +
 4 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index e1f89a9cc7..7a99b8e13f 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -34,12 +34,46 @@
 		@apply mx-auto w-full max-w-5xl;
 	}
 	.hub-hero .hub-hero-eyebrow {
-		margin: 0 0 14px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 10px 14px;
+		margin: 0 0 16px;
 		font-size: 0.8125rem;
-		font-weight: 600;
 		letter-spacing: 0.02em;
+	}
+	.hub-hero .hub-hero-eyebrow-label {
+		font-weight: 600;
 		color: rgb(255 255 255 / 0.55);
 	}
+	.hub-hero .hub-hero-eyebrow-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 12px;
+		font-weight: 600;
+		color: var(--color-white);
+		text-decoration: none;
+		background: rgb(255 255 255 / 0.08);
+		border: 1px solid rgb(255 255 255 / 0.2);
+		border-radius: 999px;
+		transition:
+			background 0.15s ease,
+			border-color 0.15s ease;
+	}
+	.hub-hero .hub-hero-eyebrow-link:hover,
+	.hub-hero .hub-hero-eyebrow-link:focus-visible {
+		background: rgb(255 255 255 / 0.16);
+		border-color: rgb(255 255 255 / 0.4);
+	}
+	.hub-hero .hub-hero-eyebrow-arrow {
+		flex-shrink: 0;
+		transition: transform 0.15s ease;
+	}
+	.hub-hero .hub-hero-eyebrow-link:hover .hub-hero-eyebrow-arrow,
+	.hub-hero .hub-hero-eyebrow-link:focus-visible .hub-hero-eyebrow-arrow {
+		transform: translateX(2px);
+	}
 	.hub-hero .hub-hero-top {
 		display: grid;
 		grid-template-columns: auto 1fr;
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 791a72008a..15478503f4 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -439,7 +439,8 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 			IconSvg = block.IconSvg,
 			Title = block.Title,
 			DescriptionHtml = descriptionHtml,
-			ReleasesHtml = releasesHtml
+			ReleasesHtml = releasesHtml,
+			SitePathPrefix = block.Build.UrlPathPrefix
 		});
 		RenderRazorSlice(slice, renderer);
 	}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index f372424a2c..9e49b87a07 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -4,7 +4,15 @@
 	<div class="hub-hero-inner">
 		@if (!string.IsNullOrWhiteSpace(Model.Title))
 		{
-			<p class="hub-hero-eyebrow">Find all docs about @Model.Title</p>
+			<div class="hub-hero-eyebrow">
+				<span class="hub-hero-eyebrow-label">Find all docs about @Model.Title</span>
+				<a class="hub-hero-eyebrow-link" href="@Model.PrefixUrl("/")" hx-boost="false">
+					<span>Browse all Elastic docs</span>
+					<svg class="hub-hero-eyebrow-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+					</svg>
+				</a>
+			</div>
 		}
 		<div class="hub-hero-top">
 			@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index 4eb5b03a25..800422b73d 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -11,4 +11,6 @@ public class HeroViewModel : DirectiveViewModel
 	public required string? Title { get; init; }
 	public required string? DescriptionHtml { get; init; }
 	public required string? ReleasesHtml { get; init; }
+	public required string? SitePathPrefix { get; init; }
+	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
 }

From 07dbf6144044a410f6b413c3c5ccd59ca7bbb458 Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Mon, 6 Jul 2026 13:02:57 +0200
Subject: [PATCH 53/56] Redesign hub page body to match Figma

Add Get started and Explore directives, extend the hero with up to three
navigation actions, add an upgrade link to What's new, and de-emphasize
Get started step numbers. Remove the superseded intro directive. Update
syntax docs, example fixtures, and whats-new config to match.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 config/whats-new.yml                          |  66 +-
 docs/_docset.yml                              |   3 +-
 docs/syntax/card-group.md                     |   9 +-
 docs/syntax/explore.md                        |  74 ++
 docs/syntax/get-started.md                    |  67 ++
 docs/syntax/hero.md                           |  27 +-
 docs/syntax/hub-pages.md                      |  41 +-
 docs/syntax/intro.md                          |  19 -
 docs/syntax/whats-new.md                      |  26 +-
 docs/testing/products/elasticsearch/v9.md     | 767 ++++++++----------
 docs/testing/products/kibana/v9.md            | 598 +++++++++-----
 .../Assets/markdown/hub.css                   | 738 +++++++++++++----
 .../Myst/Directives/DirectiveBlockParser.cs   |  14 +-
 .../Myst/Directives/DirectiveHtmlRenderer.cs  |  94 ++-
 .../Myst/Directives/Hub/CardGroupView.cshtml  |  46 +-
 .../Myst/Directives/Hub/CardGroupViewModel.cs |  12 +
 .../Myst/Directives/Hub/ExploreBlock.cs       |  49 ++
 .../Myst/Directives/Hub/ExploreView.cshtml    |  12 +
 ...{IntroViewModel.cs => ExploreViewModel.cs} |   7 +-
 .../Myst/Directives/Hub/GetStartedBlock.cs    | 162 ++++
 .../Myst/Directives/Hub/GetStartedView.cshtml | 136 ++++
 .../Directives/Hub/GetStartedViewModel.cs     |  39 +
 .../Myst/Directives/Hub/HeroBlock.cs          |  39 +-
 .../Myst/Directives/Hub/HeroView.cshtml       |  50 +-
 .../Myst/Directives/Hub/HeroViewModel.cs      |  27 +-
 .../Myst/Directives/Hub/HubExplore.cs         |  36 +
 .../Myst/Directives/Hub/IntroBlock.cs         |  26 -
 .../Myst/Directives/Hub/IntroView.cshtml      |   5 -
 .../Myst/Directives/Hub/LinkCardView.cshtml   | 131 ++-
 .../Myst/Directives/Hub/LinkCardViewModel.cs  |   4 +
 .../Myst/Directives/Hub/WhatsNewBlock.cs      |  20 +
 .../Myst/Directives/Hub/WhatsNewView.cshtml   | 122 ++-
 .../Myst/YamlSerialization.cs                 |   5 +
 33 files changed, 2428 insertions(+), 1043 deletions(-)
 create mode 100644 docs/syntax/explore.md
 create mode 100644 docs/syntax/get-started.md
 delete mode 100644 docs/syntax/intro.md
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/ExploreBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/ExploreView.cshtml
 rename src/Elastic.Markdown/Myst/Directives/Hub/{IntroViewModel.cs => ExploreViewModel.cs} (56%)
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/GetStartedBlock.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/GetStartedView.cshtml
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/GetStartedViewModel.cs
 create mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/HubExplore.cs
 delete mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs
 delete mode 100644 src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml

diff --git a/config/whats-new.yml b/config/whats-new.yml
index 2cfb4f0105..f3ea2be702 100644
--- a/config/whats-new.yml
+++ b/config/whats-new.yml
@@ -8,11 +8,11 @@
 #   :::
 #
 # The {whats-new} directive looks the product up in this file and renders the
-# full panel (header + items). Authors only edit this file; the directive
+# full panel (header + items). Authors only edit this file, and the directive
 # stays trivial in markdown.
 #
 # An optional `id` and `badge` per product control the section anchor and the
-# small badge shown to the left of the title; default badge is "New".
+# small badge shown to the left of the title. The default badge is "New".
 ###
 
 products:
@@ -20,53 +20,67 @@ products:
   kibana:
     title: What's new in Kibana
     id: whats-new
-    badge: New
     release-links:
-      - label: '9.4'
+      - label: Stack 9.4.1
         url: https://www.elastic.co/docs/release-notes/kibana
-      - label: Serverless
-        url: https://www.elastic.co/docs/release-notes/serverless
+      - label: Serverless · Apr 1, 2026
+        url: https://www.elastic.co/docs/release-notes/cloud-serverless
+    upgrade-link:
+      label: Upgrade guide
+      url: https://www.elastic.co/docs/deploy-manage/upgrade/deployment-or-cluster
     items:
       - title: Dashboards and visualizations APIs
-        description: Programmatically create and manage dashboards and visualizations
+        description: Programmatically create and manage dashboards and visualizations, so you can automate reporting and version-control your analytics.
         link: https://www.elastic.co/docs/api/doc/kibana
-        meta: 9.4 preview
+        date: 9.4 preview
+        tag: Dashboards
+        featured: true
       - title: AI agent skills
-        description: Teach AI coding agents to work with the Elastic stack
+        description: Teach AI coding agents to work with the Elastic stack.
         link: https://www.elastic.co/docs/explore-analyze/ai-features/agent-skills
-        meta: Mar 2026
+        date: Mar 2026
+        tag: AI Assistant
       - title: Agent Builder
-        description: Build custom AI agents that reason over your data
+        description: Build custom AI agents that reason over your data.
         link: https://www.elastic.co/docs/explore-analyze/ai-features/elastic-agent-builder
-        meta: 9.3 GA
+        date: 9.3 GA
+        tag: AI Assistant
       - title: Workflows
-        description: Automate tasks with Kibana actions, HTTP calls, and AI agents
+        description: Automate tasks with Kibana actions, HTTP calls, and AI agents.
         link: https://www.elastic.co/docs/explore-analyze/workflows
-        meta: 9.3 preview
+        date: 9.3 preview
+        tag: Automation
 
   elasticsearch:
     title: What's new in Elasticsearch
     id: whats-new
-    badge: New
     release-links:
-      - label: '9.4'
+      - label: Stack 9.4.1
         url: https://www.elastic.co/docs/release-notes/elasticsearch
-      - label: Serverless
-        url: https://www.elastic.co/docs/release-notes/serverless
+      - label: Serverless · Apr 1, 2026
+        url: https://www.elastic.co/docs/release-notes/cloud-serverless
+    upgrade-link:
+      label: Upgrade guide
+      url: https://www.elastic.co/docs/deploy-manage/upgrade/deployment-or-cluster
     items:
       - title: semantic_text field type
-        description: Simplify semantic search — no pipeline setup needed, just define the field and start querying
+        description: Simplify semantic search. No pipeline setup needed, just define the field and start querying.
         link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
-        meta: 9.4 GA
+        date: 9.4 GA
+        tag: Search
+        featured: true
       - title: ES|QL improvements
-        description: New functions, cross-cluster support, and dense vector operations directly in ES|QL queries
+        description: New functions, cross-cluster support, and dense vector operations directly in ES|QL queries.
         link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
-        meta: '9.4'
+        date: '9.4'
+        tag: Query languages
       - title: Inference API expansion
-        description: Connect to external AI models (OpenAI, Cohere, Anthropic, Hugging Face, Azure, Google) for embeddings and reranking
+        description: Connect to external AI models for embeddings and reranking.
         link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-        meta: '9.4'
+        date: '9.4'
+        tag: AI
       - title: Breaking changes in 9.x
-        description: Review removed settings, deprecated APIs, and behavioral changes before upgrading from 8.x
+        description: Review removed settings, deprecated APIs, and behavioral changes before upgrading from 8.x.
         link: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
-        meta: Upgrade guide
+        date: Upgrade guide
+        tag: Upgrade
diff --git a/docs/_docset.yml b/docs/_docset.yml
index 030b2b140b..2faf3f72ee 100644
--- a/docs/_docset.yml
+++ b/docs/_docset.yml
@@ -141,13 +141,14 @@ toc:
       - file: dropdowns.md
       - file: definition-lists.md
       - file: example_blocks.md
+      - file: explore.md
       - file: file_inclusion.md
       - file: footnotes.md
       - file: frontmatter.md
       - file: hero.md
       - file: hub-pages.md
       - file: icons.md
-      - file: intro.md
+      - file: get-started.md
       - file: images.md
       - file: videos.md
       - file: kbd.md
diff --git a/docs/syntax/card-group.md b/docs/syntax/card-group.md
index bf44068c45..d627531060 100644
--- a/docs/syntax/card-group.md
+++ b/docs/syntax/card-group.md
@@ -34,7 +34,14 @@ The outer fence uses **four** colons (`::::`) so the inner three-colon `:::` fen
 | `:title:` | H2 heading. Optional — without it, only the grid renders. |
 | `:intro:` | Optional intro paragraph below the heading. |
 | `:id:` | Section anchor. Picked up by [`{on-this-page}`](on-this-page.md). |
+| `:variant:` | Optional layout variant. Set to `solutions` to lock a 3-up grid that steps down to 2 then 1 column and tolerates a fourth card without shrinking into a narrow fourth column. |
 
 ## Layout
 
-The grid auto-fills 1, 2, or 3 columns based on viewport width using `grid-template-columns: repeat(auto-fill, minmax(310px, 1fr))`. Card heights match within a row.
+By default the grid auto-fills 1, 2, or 3 columns based on viewport width using `grid-template-columns: repeat(auto-fill, minmax(310px, 1fr))`. Card heights match within a row.
+
+With `:variant: solutions`, the grid is locked to three equal columns (two below 980px, one below 640px). A fourth card wraps to the next row rather than compressing the layout.
+
+## Inside `{explore}`
+
+When a card-group sits inside an [`{explore}`](explore.md) section, it renders as a collapsible **accordion group** instead of a titled grid: the `:title:` becomes the accordion header and the child [`{link-card}`](link-card.md)s render as link columns. No extra options are needed — the `{explore}` ancestor drives the change.
diff --git a/docs/syntax/explore.md b/docs/syntax/explore.md
new file mode 100644
index 0000000000..b409ad8772
--- /dev/null
+++ b/docs/syntax/explore.md
@@ -0,0 +1,74 @@
+# Explore
+
+The **Explore {product}** section of a [hub page](hub-pages.md): a titled band that
+houses a stack of collapsible **accordion groups**. It wraps one or more
+[`{card-group}`](card-group.md) directives. Inside `{explore}`, each card-group
+renders as an accordion and each [`{link-card}`](link-card.md) renders as a titled
+link **column** instead of a bordered card.
+
+The first accordion in the stack is expanded by default, and the rest are collapsed.
+Toggling uses native `<details>`/`<summary>`, so it works without JavaScript.
+
+## Basic
+
+```markdown
+:::::{explore}
+:title: Explore Kibana
+:intro: Explore the apps and capabilities that help you act on your data.
+
+::::{card-group}
+:title: Install & admin
+:id: install
+
+:::{link-card}
+title: Self-managed
+link: /deploy-manage/deploy/self-managed
+links:
+  - { label: Docker, url: /deploy/docker }
+  - { label: Configure, url: /deploy/configure }
+aside:
+  label: Even more
+  links:
+    - { label: RPM, url: /deploy/rpm }
+    - { label: Windows, url: /deploy/windows }
+:::
+::::
+
+::::{card-group}
+:title: Visualize & analyze
+:id: visualize
+
+:::{link-card}
+title: Dashboards
+link: /explore-analyze/dashboards
+links:
+  - { label: Create a dashboard, url: /dashboards/create }
+:::
+::::
+:::::
+```
+
+The outer `{explore}` fence uses **five** colons so the four-colon `::::` card-group
+fences and three-colon `:::` link-card fences nest without closing it early. Add more
+colons on the outer fence if you need to nest deeper.
+
+## Options
+
+| Option | Notes |
+|---|---|
+| `:title:` | H2 heading for the section (for example, `Explore Kibana`). Required. |
+| `:intro:` | Optional intro paragraph below the heading. |
+| `:id:` | Section anchor. |
+
+## How nested directives change
+
+Inside `{explore}`, the same authoring you already use for card grids is reinterpreted:
+
+| Directive | Standalone rendering | Inside `{explore}` |
+|---|---|---|
+| `{card-group}` | Section heading + card grid | A collapsible accordion group (title in the header, cards inside) |
+| `{link-card}` | A bordered card | A titled link **column** (title and link list, with the `description` not shown in column mode) |
+| `{link-card}` `aside` | Inline "label: A · B · C" line | An **"Even more"** badge cluster under the column |
+
+Because the effect is driven by the `{explore}` ancestor, the card-group and link-card
+bodies don't need any extra options. Wrapping them is enough.
diff --git a/docs/syntax/get-started.md b/docs/syntax/get-started.md
new file mode 100644
index 0000000000..ffa7bfce9d
--- /dev/null
+++ b/docs/syntax/get-started.md
@@ -0,0 +1,67 @@
+# Get started section
+
+The first section of a hub-page body: a short onboarding funnel with an intro line and a set of numbered steps. A step can present two equally-weighted start **options** (for example, run locally versus try on Cloud), be a plain informational step, or link out as a whole card.
+
+## Basic
+
+```markdown
+:::{get-started}
+title: Get started in 3 steps
+intro: Spin up Elasticsearch and Kibana, connect your data, and start exploring in minutes.
+steps:
+  - title: Run Elasticsearch and Kibana
+    options:
+      - label: Run locally
+        description: Spin up Elasticsearch and Kibana on your machine for development.
+        code: curl -fsSL https://elastic.co/start-local | sh
+        language: sh
+        url: /deploy-manage/deploy/self-managed/install-kibana
+        url-label: Install self-managed
+      - label: Try on Cloud
+        description: Start a free Elastic Cloud trial. No local setup needed.
+        url: https://cloud.elastic.co/registration
+        url-label: Start a free trial
+  - title: Connect your data
+    description: Point Kibana at your data and create a data view.
+    link: /manage-data/ingest
+    link-label: Ingest data
+  - title: Explore and visualize
+    description: Open Discover, then build your first chart and dashboard.
+    link: /explore-analyze/kibana-data-exploration-learning-tutorial
+    link-label: Start the tutorial
+:::
+```
+
+## Fields
+
+| Field | Required | Description |
+|---|---|---|
+| `title` | yes | Section heading, for example `Get started in 3 steps`. |
+| `intro` | no | One-line lead sentence. Rendered as inline markdown. |
+| `steps[].title` | yes | Step heading, shown next to the step number. |
+| `steps[].description` | no | Short supporting sentence. Rendered as inline markdown. |
+| `steps[].link` | no | When set, the whole step is a clickable card linking here. |
+| `steps[].link-label` | no | Call-to-action label for a link step. Defaults to `Open`. |
+| `steps[].options[]` | no | Two or more equally-weighted start options, rendered side by side. |
+| `steps[].options[].label` | no | Option heading, for example `Run locally`. |
+| `steps[].options[].description` | no | Short supporting sentence. Rendered as inline markdown. |
+| `steps[].options[].code` | no | A command shown in a copyable snippet (the "run locally" path). |
+| `steps[].options[].language` | no | Syntax-highlighting language for the snippet (for example `sh`). |
+| `steps[].options[].url` | no | Destination for the option. Rendered as a text link when the option also has `code`, or as a button otherwise. |
+| `steps[].options[].url-label` | no | Label for the option link/button. |
+
+An earlier top-level `install` / `tutorial` pair is still accepted for backward compatibility, but new pages should express the two start paths as `options` on the first step instead.
+
+## Linking the hero to this section
+
+The rendered section carries `id="get-started"`, so a [`{hero}`](hero.md) action can scroll to it instead of adding a competing entry point:
+
+```markdown
+:primary-action: [Get started](#get-started)
+```
+
+## When to use
+
+`{get-started}` is the standard "front door" section between the [`{hero}`](hero.md) and the rest of the hub body. It's optional. Skip it when the hero already says what readers need to know next.
+
+It is **not** an admonition. For caution / note / tip-style callouts inside body content, use the existing [admonitions](admonitions.md).
diff --git a/docs/syntax/hero.md b/docs/syntax/hero.md
index 9c203aa6b6..68d9c19f6a 100644
--- a/docs/syntax/hero.md
+++ b/docs/syntax/hero.md
@@ -1,6 +1,6 @@
 # Hero
 
-A full-bleed hero band with a product icon, page title, description, and an optional release-status line. Designed for the [hub layout](hub-pages.md) but reusable on any page.
+A full-bleed hero band with a product icon, page title, description, and up to three call-to-action buttons. Designed for the [hub layout](hub-pages.md) but reusable on any page.
 
 All hero content is supplied via options. The directive body is not used.
 
@@ -9,12 +9,17 @@ All hero content is supplied via options. The directive body is not used.
 ```markdown
 :::{hero}
 :icon: kibana
-:title: Kibana
+:title: Kibana documentation hub
 :description: The UI for the Elasticsearch platform.
+:primary-action: [Get started](#get-started)
+:secondary-action: [What's new](#whats-new)
+:tertiary-action: [Explore Kibana docs](#explore)
 :::
 ```
 
-The `:title:` option doubles as the page title (no body H1 needed). `:description:` supports inline markdown — links, bold, emphasis.
+The `:title:` option doubles as the page title (no body H1 needed). `:description:` supports inline markdown, including links, bold, and emphasis.
+
+On the hub pages the three actions are in-page jumps to the main sections: **Get started** (`#get-started`), **What's new** (`#whats-new`), and **Explore {product} docs** (`#explore`). An action whose URL starts with `#` renders with a downward chevron to signal an in-page jump. Actions are optional, so omit them for a pure identity hero.
 
 ## Options
 
@@ -23,17 +28,23 @@ The `:title:` option doubles as the page title (no body H1 needed). `:descriptio
 | `:title:` | string | **Required.** Page heading shown next to the icon. Also picked up as the document's page title. |
 | `:description:` | inline markdown | One-line summary shown below the title. Supports bold, italics, and links. |
 | `:icon:` | string | Product key. Resolves to an inline SVG via the product-icon lookup. Known keys: `elasticsearch`, `kibana`, `observability`, `security`. Unknown keys fall back to a single-letter chip. |
-| `:releases:` | inline markdown | Small status line under the title, supports inline links and bold/italic. |
+| `:primary-action:` | markdown link | First call-to-action button, given slightly more emphasis. Format: `[Label](/url)` or `[Label](#anchor)`. |
+| `:secondary-action:` | markdown link | Second call-to-action button (outline). Format: `[Label](/url)` or `[Label](#anchor)`. |
+| `:tertiary-action:` | markdown link | Third call-to-action button (outline). Format: `[Label](/url)` or `[Label](#anchor)`. |
+
+Release cadence (latest version, serverless deployment date, release-notes links) lives in the [`{whats-new}`](whats-new.md) section, not the hero.
 
-## Releases
+## Actions
 
 ```markdown
 :::{hero}
 :icon: elasticsearch
-:title: Elasticsearch
+:title: Elasticsearch documentation hub
 :description: The distributed search and analytics engine.
-:releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026) · [Serverless deployed](/srn) Apr 1, 2026
+:primary-action: [Get started](#get-started)
+:secondary-action: [What's new](#whats-new)
+:tertiary-action: [Explore Elasticsearch docs](#explore)
 :::
 ```
 
-The `:releases:` option is inline markdown — same syntax as a single line of body markdown. Use `&#58;` for a literal colon when you don't want YAML to parse the value as a key/value pair.
+Each action is a single markdown link. Actions render left to right in the order primary, secondary, tertiary. Anchor links (`#section`) get a downward chevron; other links render as plain buttons.
diff --git a/docs/syntax/hub-pages.md b/docs/syntax/hub-pages.md
index 10de9e6676..5ec3a3e66c 100644
--- a/docs/syntax/hub-pages.md
+++ b/docs/syntax/hub-pages.md
@@ -24,10 +24,11 @@ The `hub` layout drops the right-rail "On this page" TOC and the prev/next nav.
 |-----------|---------|
 | [`{hero}`](hero.md) | Full-bleed page hero with product icon, title, search, version dropdown, and quick-action pills. |
 | [`{on-this-page}`](on-this-page.md) | Auto-generated inline TOC linking each section anchor on the page. |
-| [`{intro}`](intro.md) | Small "getting started" callout panel with a teal accent bar. |
+| [`{get-started}`](get-started.md) | Onboarding funnel: intro line, install snippet, tutorial link, and numbered steps. |
 | [`{whats-new}`](whats-new.md) | "What's new" panel populated from `config/whats-new.yml`. |
-| [`{card-group}`](card-group.md) | Section heading + card grid container. |
-| [`{link-card}`](link-card.md) | Rich card with title, description, primary link list, and optional aside. |
+| [`{card-group}`](card-group.md) | Section heading + card grid container. Renders as an accordion group inside `{explore}`. |
+| [`{link-card}`](link-card.md) | Rich card with title, description, primary link list, and optional aside. Renders as a link column inside `{explore}`. |
+| [`{explore}`](explore.md) | "Explore {product}" section: a stack of collapsible accordion groups wrapping several `{card-group}`s. |
 
 ## Page skeleton
 
@@ -46,8 +47,16 @@ layout: hub
 :::{on-this-page}
 :::
 
-:::{intro}
-**New to Kibana?** [Take the tutorial](/tutorial) — 30 minutes, hands-on.
+:::{get-started}
+title: Get started in 3 steps
+intro: Spin up Kibana, connect your data, and start exploring in minutes.
+tutorial:
+  label: Tutorial
+  url: /tutorial
+steps:
+  - icon: launch
+    title: Run Kibana
+    description: Start locally, run in Docker, or open a free Cloud trial.
 :::
 
 :::{whats-new}
@@ -69,6 +78,28 @@ links:
 ::::
 ```
 
+Group the remaining card-groups under an [`{explore}`](explore.md) section so they render
+as a stack of collapsible accordions:
+
+```markdown
+:::::{explore}
+:title: Explore Kibana
+:intro: Explore the apps and capabilities that help you act on your data.
+
+::::{card-group}
+:title: Install and administer
+:id: install
+
+:::{link-card}
+title: Self-managed
+link: /deploy-manage/deploy/self-managed
+links:
+  - { label: Docker, url: /deploy/docker }
+:::
+::::
+:::::
+```
+
 ## Product badges
 
 Every regular (non-hub) page that declares one or more `products:` in its frontmatter automatically gets a clickable badge above its H1, linking to that product's hub page. The badge → hub URL mapping is set per product in [`config/products.yml`](../configure/site/products.md):
diff --git a/docs/syntax/intro.md b/docs/syntax/intro.md
deleted file mode 100644
index 9d4ca14cf3..0000000000
--- a/docs/syntax/intro.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Intro callout
-
-A small white panel with a teal accent bar — used for "getting started" callouts directly under the hero.
-
-## Basic
-
-```markdown
-:::{intro}
-**New to Kibana?** [Take the tutorial](/tutorial) — a 30-minute, hands-on walk-through of Discover, dashboards, and ES|QL.
-:::
-```
-
-Body is rendered as inline markdown. Use bold, links, and emphasis freely; keep it to one or two short paragraphs.
-
-## When to use
-
-`{intro}` is the standard "front door" panel between the [`{hero}`](hero.md) and the [`{on-this-page}`](on-this-page.md) chip. It's optional — skip it when the hero already says what readers need to know next.
-
-It is **not** an admonition. For caution / note / tip-style callouts inside body content, use the existing [admonitions](admonitions.md).
diff --git a/docs/syntax/whats-new.md b/docs/syntax/whats-new.md
index e13a1c1b0b..50a3032409 100644
--- a/docs/syntax/whats-new.md
+++ b/docs/syntax/whats-new.md
@@ -1,6 +1,6 @@
 # What's new
 
-A panel with a "New" badge, section title, optional release-notes link list on the right, and rows of recent highlights. Each row has a title, description, and right-aligned meta pill (e.g. `9.4 preview`, `Mar 2026`).
+A section with a heading, subtitle, and a "View release notes" link on the right, followed by a grid of highlight cards. Each card has an optional badge, a date and category tag, a title, a description, and a "Read more" link. One card can be marked `featured` to span two columns.
 
 ## Centralized lookup (recommended)
 
@@ -19,19 +19,22 @@ products:
   kibana:
     title: What's new in Kibana
     id: whats-new                     # used as the section anchor
-    badge: New                        # optional, default 'New'
-    release-links:
-      - { label: '9.4', url: /release-notes/kibana }
-      - { label: Serverless, url: /release-notes/serverless }
+    release-links:                        # rendered as "Latest release notes: <label> · <label>"
+      - { label: Stack 9.4.1, url: /release-notes/kibana }
+      - { label: Serverless · Apr 1, 2026, url: /release-notes/cloud-serverless }
     items:
-      - title: Dashboards APIs
+      - title: Dashboards and visualizations APIs
         description: Programmatically create and manage dashboards
         link: /api/dashboards
-        meta: 9.4 preview
+        badge: New                    # optional per-card badge
+        date: 9.4 preview             # left meta (date or version)
+        tag: Dashboards               # right meta (category)
+        featured: true                # spans two columns; use for one card
       - title: AI agent skills
         description: Teach AI coding agents to work with the Elastic stack
         link: /ai/agent-skills
-        meta: Mar 2026
+        date: Mar 2026
+        tag: AI Assistant
 ```
 
 ## Inline override
@@ -41,11 +44,14 @@ If `:product:` is omitted, the directive expects the same schema as a YAML body.
 ```markdown
 :::{whats-new}
 title: What's new in this release
+intro: Stay up to date with the latest features.
 items:
   - title: Custom feature A
     description: Details
     link: /feature-a
-    meta: 9.4
+    date: 9.4
+    tag: Search
+    featured: true
 :::
 ```
 
@@ -57,4 +63,4 @@ items:
 
 ## Anchor
 
-`{whats-new}` registers its `id` as a section anchor — `{on-this-page}` automatically picks it up alongside `{card-group}` sections.
+`{whats-new}` registers its `id` as a section anchor so it can be linked to directly.
diff --git a/docs/testing/products/elasticsearch/v9.md b/docs/testing/products/elasticsearch/v9.md
index c4cda54c46..a4b999a3d8 100644
--- a/docs/testing/products/elasticsearch/v9.md
+++ b/docs/testing/products/elasticsearch/v9.md
@@ -4,54 +4,136 @@ layout: hub
 
 :::{hero}
 :icon: elasticsearch
-:title: Elasticsearch
-:description: The distributed search and analytics engine. Store, search, and analyze data at any scale, with vector search, AI toolkits, and a high-performance retrieval engine.
-:releases: Latest&#58; [Stack 9.4.1](https://www.elastic.co/docs/release-notes/elasticsearch) (Mar 28, 2026) · [Serverless deployed](https://www.elastic.co/docs/release-notes/serverless) Apr 1, 2026
+:title: Elasticsearch documentation hub
+:description: The distributed search and analytics engine at the heart of the Elastic platform. Index, search, and analyze data at any scale, build semantic and vector search experiences, and power applications. Run it as a managed service or in your own environment.
+:primary-action: [Get started](#get-started)
+:secondary-action: [What's new](#whats-new)
+:tertiary-action: [Explore Elasticsearch docs](#explore)
+:::
+
+:::{get-started}
+title: Get started in 3 steps
+intro: Start a local development environment or a free Elastic Cloud trial, then run your first queries.
+steps:
+  - title: Run Elasticsearch
+    options:
+      - label: Run locally
+        description: Spin up Elasticsearch on your machine for development with `start-local`.
+        code: curl -fsSL https://elastic.co/start-local | sh
+        language: sh
+      - label: Try on Cloud
+        description: Start a free Elastic Cloud trial. No local setup needed.
+        url: https://cloud.elastic.co/registration
+        url-label: Start a free trial
+  - title: Ingest your data into Elasticsearch
+    description: Send documents to Elasticsearch using the APIs, ingest pipelines, connectors, or a language client.
+    link: https://www.elastic.co/docs/manage-data/ingest
+    link-label: Ingest your data
+  - title: Search your data
+    description: Build queries to find, rank, and analyze your documents.
+    link: https://www.elastic.co/docs/solutions/search/querying-for-search
+    link-label: Build search queries
 :::
 
-:::{on-this-page}
+:::{whats-new}
+:product: elasticsearch
 :::
 
-:::{intro}
-**New to Elasticsearch?** [Follow the quick start](https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples) to run your first queries, or explore [how to bring your data in](https://www.elastic.co/docs/manage-data/ingest) and start searching in minutes.
+::::{card-group}
+:title: Get hands-on with Elasticsearch
+:id: hands-on
+:intro: New to Elasticsearch? Follow a guided quickstart to index and search your first data set.
+
+:::{link-card}
+title: Search fundamentals
+link: https://www.elastic.co/docs/solutions/search/get-started/index-basics
+links:
+  - label: Index and search basics
+    url: https://www.elastic.co/docs/solutions/search/get-started/index-basics
+  - label: Build your first query with Python
+    url: https://www.elastic.co/docs/solutions/search/get-started/keyword-search-python
 :::
 
-:::{whats-new}
-:product: elasticsearch
+:::{link-card}
+title: Semantic search and ES|QL
+link: https://www.elastic.co/docs/solutions/search/get-started/semantic-search
+links:
+  - label: Get started with semantic search
+    url: https://www.elastic.co/docs/solutions/search/get-started/semantic-search
+  - label: ES|QL tutorials
+    url: https://www.elastic.co/docs/reference/elasticsearch/query-languages/esql/esql-examples
+:::
+
+:::{link-card}
+title: Specialized quickstarts
+link: https://www.elastic.co/docs/manage-data/data-store/data-streams/quickstart-tsds
+links:
+  - label: Time series data stream basics
+    url: https://www.elastic.co/docs/manage-data/data-store/data-streams/quickstart-tsds
+  - label: Browse all quickstarts
+    url: https://www.elastic.co/docs/solutions/search/get-started/quickstarts
 :::
+::::
+
+:::::{explore}
+:id: explore
+:title: Explore Elasticsearch
+:intro: Find the Elasticsearch documentation you need, organized by task, from deploying and ingesting to searching, securing, and operating.
 
 ::::{card-group}
-:title: Install and deploy
-:id: install
+:title: Quick links
+:id: quick-links
 
 :::{link-card}
-title: Self-managed
-link: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch
-description: Install and run Elasticsearch on your own infrastructure.
+title: Releases and APIs
 links:
-  - label: Docker
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-docker
-  - label: Debian / Ubuntu
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-debian-package
-  - label: RPM
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-rpm
-  - label: Windows
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-zip-on-windows
-  - label: Linux / macOS archive
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-from-archive-on-linux-macos
-  - label: Configure Elasticsearch
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/configure-elasticsearch
-  - label: Secure a self-managed cluster
-    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/tutorial-self-managed-secure
+  - label: Release notes
+    url: https://www.elastic.co/docs/release-notes/elasticsearch
+  - label: Elasticsearch API docs
+    url: https://www.elastic.co/docs/api/doc/elasticsearch
+  - label: Language clients
+    url: https://www.elastic.co/docs/reference/elasticsearch-clients
 :::
 
 :::{link-card}
-title: Managed deployments
+title: Configuration
+links:
+  - label: Configuration reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/configuration-reference/index
+  - label: Index settings
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/index-settings/index
+  - label: Security settings
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/configuration-reference/security-settings
+:::
+
+:::{link-card}
+title: Operations
+links:
+  - label: Upgrade Elasticsearch
+    url: https://www.elastic.co/docs/deploy-manage/upgrade/deployment-or-cluster
+  - label: Technical reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/index
+:::
+::::
+
+::::{card-group}
+:title: Deploy and manage
+:id: deploy
+
+:::{link-card}
+title: Use Elastic Cloud
 link: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud
-description: Run Elasticsearch on Elastic Cloud, Kubernetes, or ECE.
 links:
+  - label: Serverless
+    url: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud/serverless
   - label: Elastic Cloud Hosted
     url: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud
+:::
+
+:::{link-card}
+title: Deploy with an orchestrator
+link: https://www.elastic.co/docs/deploy-manage/deploy/cloud-on-k8s
+links:
   - label: Elastic Cloud on Kubernetes (ECK)
     url: https://www.elastic.co/docs/deploy-manage/deploy/cloud-on-k8s
   - label: Elastic Cloud Enterprise (ECE)
@@ -59,549 +141,336 @@ links:
 :::
 
 :::{link-card}
-title: Maintain and monitor
-link: https://www.elastic.co/docs/deploy-manage/maintenance/start-stop-services/start-stop-elasticsearch
-description: Production guidance, upgrades, cluster health, and diagnostics.
+title: Run Elasticsearch yourself
+link: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/installing-elasticsearch
 links:
-  - label: Start and stop Elasticsearch
-    url: https://www.elastic.co/docs/deploy-manage/maintenance/start-stop-services/start-stop-elasticsearch
-  - label: Stack monitoring
-    url: https://www.elastic.co/docs/deploy-manage/monitor/stack-monitoring/elasticsearch-monitoring-self-managed
-  - label: Capture diagnostics
-    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/diagnostic
-  - label: Troubleshoot
-    url: https://www.elastic.co/docs/troubleshoot/elasticsearch
-  - label: Snapshot and restore
-    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
+  - label: Docker
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-docker
+  - label: Debian / Ubuntu
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-debian-package
+  - label: RPM
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-with-rpm
+  - label: Packages and archives
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-elasticsearch-from-archive-on-linux-macos
+  - label: Configure Elasticsearch
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/configure-elasticsearch
+:::
+
+:::{link-card}
+title: Design and operate
+link: https://www.elastic.co/docs/deploy-manage/distributed-architecture
+links:
+  - label: Distributed architecture
+    url: https://www.elastic.co/docs/deploy-manage/distributed-architecture
+  - label: Monitor Elasticsearch
+    url: https://www.elastic.co/docs/deploy-manage/monitor
+  - label: Upgrade Elasticsearch
+    url: https://www.elastic.co/docs/deploy-manage/upgrade/deployment-or-cluster
 :::
 ::::
 
 ::::{card-group}
-:title: Index and ingest data
+:title: Prepare and index data
 :id: ingest
 
 :::{link-card}
-title: Ingest pipelines
+title: Index data
+link: https://www.elastic.co/docs/manage-data/data-store
+links:
+  - label: Index API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-index
+  - label: Bulk API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-bulk
+  - label: Indices and data streams
+    url: https://www.elastic.co/docs/manage-data/data-store
+:::
+
+:::{link-card}
+title: Transform and enrich
 link: https://www.elastic.co/docs/manage-data/ingest/transform-enrich/ingest-pipelines
-description: Pre-process documents before indexing with processors that parse, transform, and enrich your data.
 links:
-  - label: Overview and setup
+  - label: Ingest pipelines
     url: https://www.elastic.co/docs/manage-data/ingest/transform-enrich/ingest-pipelines
-  - label: Simulate ingestion (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-simulate-ingest
-  - label: All ingest methods
-    url: https://www.elastic.co/docs/manage-data/ingest
+  - label: Enrich data
+    url: https://www.elastic.co/docs/manage-data/ingest/transform-enrich/data-enrichment
 :::
 
 :::{link-card}
-title: Data streams
-link: https://www.elastic.co/docs/manage-data/data-store/data-streams
-description: Manage time-series data with a single resource that spans multiple backing indices.
+title: Map fields
+link: https://www.elastic.co/docs/manage-data/data-store/mapping
 links:
-  - label: Data streams overview
-    url: https://www.elastic.co/docs/manage-data/data-store/data-streams
-  - label: Manage data streams
-    url: https://www.elastic.co/docs/manage-data/data-store/data-streams/manage-data-stream
-  - label: Logs data stream (logsdb)
-    url: https://www.elastic.co/docs/manage-data/data-store/data-streams/logs-data-stream
+  - label: Mappings
+    url: https://www.elastic.co/docs/manage-data/data-store/mapping
+  - label: Field types
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/mapping-reference/field-data-types
+  - label: Runtime fields
+    url: https://www.elastic.co/docs/manage-data/data-store/mapping/runtime-fields
 :::
 
 :::{link-card}
-title: Document APIs
-link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-index
-description: Index, update, delete, and retrieve documents with the core document APIs.
+title: Analyze text
+link: https://www.elastic.co/docs/manage-data/data-store/text-analysis
 links:
-  - label: Index a document
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-index
-  - label: Bulk API
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-bulk
-  - label: Reindex API
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-reindex
-  - label: Reindex examples
-    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/reindex-indices
-  - label: Migrate data between clusters
-    url: https://www.elastic.co/docs/manage-data/migrate/migrate-data-between-elasticsearch-clusters-with-minimal-downtime
+  - label: Text analysis
+    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis
+  - label: Configure analyzers
+    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/configure-text-analysis
+:::
+
+:::{link-card}
+title: Ingestion tools
+link: https://www.elastic.co/docs/manage-data/ingest
+links:
+  - label: Fleet and Elastic Agent
+    url: https://www.elastic.co/docs/reference/fleet
+  - label: Logstash
+    url: https://www.elastic.co/docs/reference/logstash/index
+  - label: Beats
+    url: https://www.elastic.co/docs/reference/beats/index
+  - label: Elastic Distributions of OpenTelemetry
+    url: https://www.elastic.co/docs/reference/opentelemetry/index
 :::
 ::::
 
 ::::{card-group}
-:title: Search and query
+:title: Search and analyze data
 :id: search
 
 :::{link-card}
-title: Query DSL
-link: https://www.elastic.co/docs/reference/query-languages/query-dsl/full-text-queries
-description: Write expressive queries using the JSON-based Domain Specific Language — from simple term filters to compound boolean queries.
+title: Search with the Search API
+link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-search
 links:
-  - label: Full-text search
-    url: https://www.elastic.co/docs/solutions/search/full-text
-  - label: Full-text queries
-    url: https://www.elastic.co/docs/reference/query-languages/query-dsl/full-text-queries
   - label: Search API
     url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-search
-  - label: Cross-cluster search
-    url: https://www.elastic.co/docs/explore-analyze/cross-cluster-search
-aside:
-  label: Query types
-  links:
-    - label: Full-text
-      url: https://www.elastic.co/docs/reference/query-languages/query-dsl/full-text-queries
-    - label: Term-level
-      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
-    - label: Geo
-      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
-    - label: Shape
-      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
-    - label: Joining
-      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
-    - label: Span
-      url: https://www.elastic.co/docs/reference/query-languages/query-dsl
+  - label: Query DSL
+    url: https://www.elastic.co/docs/reference/elasticsearch/query-languages/query-dsl/full-text-queries
+  - label: Retrievers
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/rest-apis/retrievers
+  - label: Aggregations
+    url: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations
 :::
 
 :::{link-card}
 title: ES|QL
-link: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
-description: A pipe-based query language purpose-built for filtering, transforming, and analyzing data — usable from the API, Kibana Discover, or directly in search.
+link: https://www.elastic.co/docs/reference/elasticsearch/query-languages/esql/esql-getting-started
 links:
   - label: Get started with ES|QL
-    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-getting-started
+    url: https://www.elastic.co/docs/reference/elasticsearch/query-languages/esql/esql-getting-started
   - label: Syntax reference
-    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-syntax-reference
-  - label: Commands
-    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-commands
+    url: https://www.elastic.co/docs/reference/elasticsearch/query-languages/esql/esql-syntax-reference
   - label: ES|QL for search
     url: https://www.elastic.co/docs/solutions/search/esql-for-search
-  - label: Cross-cluster ES|QL
-    url: https://www.elastic.co/docs/reference/query-languages/esql/esql-cross-clusters
 :::
 
 :::{link-card}
-title: Other query languages
-link: https://www.elastic.co/docs/reference/query-languages
-description: Use EQL for event sequences, SQL for familiar syntax, or Painless for custom scoring and scripted queries.
+title: Search across clusters and projects
+link: https://www.elastic.co/docs/explore-analyze/cross-cluster-search
 links:
-  - label: EQL (Event Query Language)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-eql-search
-  - label: SQL
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-sql-query
-  - label: Translate SQL to Query DSL
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-sql-translate
-  - label: Painless scripting
-    url: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
+  - label: Cross-cluster search
+    url: https://www.elastic.co/docs/explore-analyze/cross-cluster-search
 :::
 ::::
 
 ::::{card-group}
-:title: Aggregations
-:id: aggs
+:title: Vector database
+:id: vector
 
 :::{link-card}
-title: Aggregations overview
-link: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations
-description: Summarize and compute statistics over your data — counts, averages, histograms, date ranges, and more.
+title: Semantic and vector search
+link: https://www.elastic.co/docs/solutions/search/semantic-search
 links:
-  - label: Introduction
-    url: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations
-  - label: 'Tutorial: eCommerce data analysis'
-    url: https://www.elastic.co/docs/explore-analyze/query-filter/aggregations/tutorial-analyze-ecommerce-data-with-aggregations-using-query-dsl
-aside:
-  label: Aggregation families
-  links:
-    - label: Metric
-      url: https://www.elastic.co/docs/reference/aggregations
-    - label: Bucket
-      url: https://www.elastic.co/docs/reference/aggregations
-    - label: Pipeline
-      url: https://www.elastic.co/docs/reference/aggregations
-    - label: Matrix
-      url: https://www.elastic.co/docs/reference/aggregations
-:::
-
-:::{link-card}
-title: Metric aggregations
-link: https://www.elastic.co/docs/reference/aggregations
-description: Compute single numeric values from field data — min, max, avg, sum, percentiles, stats, and more.
-links:
-  - label: Top hits
-    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-metrics-top-hits-aggregation
-  - label: Top metrics
-    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-metrics-top-metrics
-  - label: Cardinality, percentiles, stats
-    url: https://www.elastic.co/docs/reference/aggregations
-:::
-
-:::{link-card}
-title: Bucket and pipeline aggregations
-link: https://www.elastic.co/docs/reference/aggregations
-description: Group documents into buckets, then chain pipeline aggregations to compute on those buckets.
-links:
-  - label: Filters aggregation
-    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-bucket-filters-aggregation
-  - label: Multi-terms aggregation
-    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-bucket-multi-terms-aggregation
-  - label: Avg bucket (pipeline)
-    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-pipeline-avg-bucket-aggregation
-  - label: Bucket script (pipeline)
-    url: https://www.elastic.co/docs/reference/aggregations/search-aggregations-pipeline-bucket-script-aggregation
+  - label: Semantic search
+    url: https://www.elastic.co/docs/solutions/search/semantic-search
+  - label: Vector search
+    url: https://www.elastic.co/docs/solutions/search/vector
+  - label: Hybrid search
+    url: https://www.elastic.co/docs/solutions/search/hybrid-search
+:::
+
+:::{link-card}
+title: Inference
+link: https://www.elastic.co/docs/api/doc/elasticsearch/group/endpoint-inference
+links:
+  - label: Inference API
+    url: https://www.elastic.co/docs/api/doc/elasticsearch/group/endpoint-inference
+  - label: Semantic search with inference
+    url: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-inference
 :::
 ::::
 
 ::::{card-group}
-:title: Data modeling
-:id: modeling
+:title: Build applications
+:id: build
 
 :::{link-card}
-title: Mapping
-link: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference
-description: Define how documents and their fields are stored, indexed, and analyzed.
+title: APIs, clients, and examples
+link: https://www.elastic.co/docs/reference/elasticsearch-clients
 links:
-  - label: Field data types
-    url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-  - label: Dynamic field mapping
-    url: https://www.elastic.co/docs/manage-data/data-store/mapping/dynamic-field-mapping
-  - label: Runtime fields
-    url: https://www.elastic.co/docs/manage-data/data-store/mapping/define-runtime-fields-in-search-request
-  - label: Update mappings (examples)
-    url: https://www.elastic.co/docs/manage-data/data-store/mapping/update-mappings-examples
-  - label: Put mapping API
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-indices-put-mapping
-aside:
-  label: Common field types
-  links:
-    - label: keyword
-      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-    - label: text
-      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-    - label: date
-      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-    - label: dense_vector
-      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-    - label: semantic_text
-      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-    - label: geo_point
-      url: https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/field-data-types
-:::
-
-:::{link-card}
-title: Text analysis
-link: https://www.elastic.co/docs/manage-data/data-store/text-analysis/configure-text-analysis
-description: Control how text is tokenized and indexed to optimize relevance and search recall.
-links:
-  - label: Configure text analysis
-    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/configure-text-analysis
-  - label: Create a custom analyzer
-    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/create-custom-analyzer
-  - label: Specify an analyzer
-    url: https://www.elastic.co/docs/manage-data/data-store/text-analysis/specify-an-analyzer
-  - label: Analyze API
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-indices-analyze
-  - label: Analyzers, tokenizers, and filters reference
-    url: https://www.elastic.co/docs/reference/text-analysis
+  - label: Elasticsearch API docs
+    url: https://www.elastic.co/docs/api/doc/elasticsearch
+  - label: Language clients
+    url: https://www.elastic.co/docs/reference/elasticsearch-clients
+  - label: REST API examples
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/rest-apis/api-examples
 :::
 
 :::{link-card}
-title: Configuration reference
-link: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference
-description: All Elasticsearch node settings — network, thread pools, index defaults, security, and more.
+title: Painless scripting
+link: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
 links:
-  - label: Node settings
-    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference/node-settings
-  - label: Security settings
-    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference/security-settings
-  - label: All settings reference
-    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference
+  - label: Write Painless scripts
+    url: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
+  - label: Language specification
+    url: https://www.elastic.co/docs/reference/elasticsearch/scripting-languages/painless/painless-language-specification
 :::
 ::::
 
 ::::{card-group}
-:title: Manage data
-:id: manage
+:title: Manage the data lifecycle
+:id: lifecycle
 
 :::{link-card}
-title: Index lifecycle management (ILM)
-link: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management
-description: Automate index policies to move data through hot, warm, cold, and frozen tiers — and eventually delete it.
+title: Choose a strategy
+link: https://www.elastic.co/docs/manage-data/lifecycle
 links:
-  - label: Create an ILM policy
-    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/configure-lifecycle-policy
-  - label: Tutorials
-    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/ilm-tutorials
-  - label: Check ILM status
-    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/policy-view-status
-  - label: Start and stop ILM
-    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management/start-stop-index-lifecycle-management
-  - label: Explain lifecycle (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-ilm-explain-lifecycle
+  - label: Data lifecycle overview
+    url: https://www.elastic.co/docs/manage-data/lifecycle
 :::
 
 :::{link-card}
 title: Data stream lifecycle
 link: https://www.elastic.co/docs/manage-data/lifecycle/data-stream
-description: Set built-in retention and rollover directly on data streams, without a separate ILM policy.
 links:
-  - label: Data stream lifecycle overview
+  - label: Data stream lifecycle
     url: https://www.elastic.co/docs/manage-data/lifecycle/data-stream
-  - label: Update an existing data stream
-    url: https://www.elastic.co/docs/manage-data/lifecycle/data-stream/tutorial-update-existing-data-stream
-  - label: Manage data tiers
-    url: https://www.elastic.co/docs/manage-data/lifecycle/data-tiers/manage-data-tiers-self-managed-eck
 :::
 
 :::{link-card}
-title: Snapshot and restore
-link: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
-description: Back up indices and data streams to a remote repository and restore them when needed.
+title: Index lifecycle management
+link: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management
 links:
-  - label: Overview
-    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
-  - label: Restore a snapshot
-    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore/restore-snapshot
-  - label: Create a snapshot repository (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-snapshot-create-repository
-  - label: Create a snapshot (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-snapshot-create
-  - label: Troubleshoot snapshots
-    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/snapshot-and-restore
+  - label: Index lifecycle management (ILM)
+    url: https://www.elastic.co/docs/manage-data/lifecycle/index-lifecycle-management
 :::
-::::
-
-::::{card-group}
-:title: AI and vector search
-:id: ai
 
 :::{link-card}
-title: Semantic search
-link: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
-description: Search by meaning rather than exact keywords using dense or sparse vector embeddings.
+title: Back up and restore
+link: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
 links:
-  - label: Semantic search with semantic_text
-    url: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-semantic-text
-  - label: Semantic search with ELSER
-    url: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-elser-ingest-pipelines
-  - label: Get started with semantic search
-    url: https://www.elastic.co/docs/solutions/search/get-started/semantic-search
-  - label: Dense vs. sparse ingest pipelines
-    url: https://www.elastic.co/docs/solutions/search/vector/dense-versus-sparse-ingest-pipelines
-:::
-
-:::{link-card}
-title: Vector search (kNN)
-link: https://www.elastic.co/docs/solutions/search/vector/knn
-description: Find the nearest neighbors to a query vector for similarity-based retrieval and hybrid search.
-links:
-  - label: kNN search
-    url: https://www.elastic.co/docs/solutions/search/vector/knn
-  - label: Sparse vector search
-    url: https://www.elastic.co/docs/solutions/search/vector/sparse-vector
-  - label: Bring your own vectors
-    url: https://www.elastic.co/docs/solutions/search/vector/bring-own-vectors
-  - label: kNN retriever
-    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/retrievers/knn-retriever
-  - label: kNN in ES|QL
-    url: https://www.elastic.co/docs/reference/query-languages/esql/functions-operators/dense-vector-functions/knn
-:::
-
-:::{link-card}
-title: Inference API
-link: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-description: Connect Elasticsearch to external AI model providers for embeddings, reranking, and completions.
-links:
-  - label: Create an inference endpoint
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-  - label: ELSER inference endpoint
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put-elser
-aside:
-  label: Supported providers
-  links:
-    - label: OpenAI
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    - label: Cohere
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    - label: Anthropic
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    - label: Azure
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    - label: Google
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    - label: Hugging Face
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
-    - label: Mistral
-      url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-inference-put
+  - label: Snapshot and restore
+    url: https://www.elastic.co/docs/deploy-manage/tools/snapshot-and-restore
 :::
 ::::
 
 ::::{card-group}
-:title: Security
+:title: Secure Elasticsearch
 :id: security
 
 :::{link-card}
-title: Encryption and TLS
+title: Encrypt communications
 link: https://www.elastic.co/docs/deploy-manage/security/secure-cluster-communications
-description: Encrypt communications between nodes and between clients and the cluster.
 links:
-  - label: Set up basic security (TLS)
-    url: https://www.elastic.co/docs/deploy-manage/security/set-up-basic-security
   - label: Secure cluster communications
     url: https://www.elastic.co/docs/deploy-manage/security/secure-cluster-communications
-  - label: Secure HTTP clients
-    url: https://www.elastic.co/docs/deploy-manage/security/httprest-clients-security
-  - label: Security settings reference
-    url: https://www.elastic.co/docs/reference/elasticsearch/configuration-reference/security-settings
 :::
 
 :::{link-card}
-title: Authentication
-link: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/ldap
-description: Verify user identity with native realms, LDAP, Active Directory, SAML, OIDC, PKI, and more.
+title: Authenticate
+link: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/user-authentication
 links:
-  - label: LDAP authentication
-    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/ldap
-  - label: SAML authentication (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-security-saml-authenticate
-  - label: All authentication methods
-    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth
+  - label: User authentication
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/user-authentication
 :::
 
 :::{link-card}
-title: Authorization and RBAC
-link: https://www.elastic.co/docs/deploy-manage/users-roles
-description: Control what users and applications can access using roles, privileges, and field- and document-level security.
+title: Authorize access
+link: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/user-roles
 links:
-  - label: Users and roles overview
-    url: https://www.elastic.co/docs/deploy-manage/users-roles
-  - label: Create or update a role (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-security-put-role
-  - label: Create or update a user (API)
-    url: https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-security-put-user
-:::
-::::
-
-::::{card-group}
-:title: Clients and integrations
-:id: clients
-
-:::{link-card}
-title: Language clients
-link: https://www.elastic.co/docs/reference/elasticsearch/clients
-description: Official Elasticsearch clients for your preferred programming language.
-links:
-  - label: Python
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/python
-  - label: Java
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/java/getting-started
-  - label: Go
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/go/using-the-api/dense-vectors
-  - label: Rust
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/rust
-  - label: PHP
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/php
-  - label: Ruby
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/ruby/api
-  - label: Community clients
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/community
-:::
-
-:::{link-card}
-title: Python DSL and helpers
-link: https://www.elastic.co/docs/reference/elasticsearch/clients/python/elasticsearch-dsl
-description: High-level Python libraries that simplify building queries, mappings, and bulk operations.
-links:
-  - label: Elasticsearch DSL (Python)
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/python/elasticsearch-dsl
-  - label: Java bulk indexing
-    url: https://www.elastic.co/docs/reference/elasticsearch/clients/java/usage/indexing-bulk
-  - label: Troubleshoot clients
-    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clients
+  - label: Users and roles
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/user-roles
 :::
 
 :::{link-card}
-title: Ingest tools
-link: https://www.elastic.co/docs/manage-data/ingest
-description: Get data into Elasticsearch using Fleet, Logstash, Beats, or search connectors.
+title: Audit and configure
+link: https://www.elastic.co/docs/deploy-manage/security/logging-configuration/security-event-audit-logging
 links:
-  - label: Fleet and Elastic Agent
-    url: https://www.elastic.co/docs/reference/fleet
-  - label: Content connectors
-    url: https://www.elastic.co/docs/reference/search-connectors
-  - label: All ingest options
-    url: https://www.elastic.co/docs/manage-data/ingest
+  - label: Audit logging
+    url: https://www.elastic.co/docs/deploy-manage/security/logging-configuration/security-event-audit-logging
+  - label: Security settings
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/configuration-reference/security-settings
 :::
 ::::
 
 ::::{card-group}
-:title: Reference
-:id: ref
+:title: Troubleshoot
+:id: troubleshoot
 
 :::{link-card}
-title: REST APIs
-link: https://www.elastic.co/docs/reference/elasticsearch/rest-apis
-description: Conventions, common options, compatibility guarantees, and the full interactive API specification.
+title: Cluster health and availability
+link: https://www.elastic.co/docs/troubleshoot/elasticsearch/clusters
 links:
-  - label: API conventions
-    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-conventions
-  - label: Common options
-    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/common-options
-  - label: API compatibility
-    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/compatibility
-  - label: Examples and quick start
-    url: https://www.elastic.co/docs/reference/elasticsearch/rest-apis/api-examples
-  - label: Full API reference
-    url: https://www.elastic.co/docs/api/doc/elasticsearch
+  - label: Cluster issues
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clusters
 :::
 
 :::{link-card}
-title: Painless scripting
-link: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
-description: Write custom scripts in Painless for queries, aggregations, ingest processors, and runtime fields.
+title: Indexing and search
+link: https://www.elastic.co/docs/troubleshoot/elasticsearch/troubleshooting-searches
 links:
-  - label: Introduction to Painless
-    url: https://www.elastic.co/docs/explore-analyze/scripting/modules-scripting-painless
-  - label: Language specification
-    url: https://www.elastic.co/docs/reference/scripting-languages/painless/painless-language-specification
-  - label: Use Painless in runtime fields
-    url: https://www.elastic.co/docs/reference/scripting-languages/painless/use-painless-scripts-in-runtime-fields
-  - label: Scripts reference
-    url: https://www.elastic.co/docs/reference/scripting-languages/painless/painless-scripts
+  - label: Troubleshoot search
+    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/troubleshooting-searches
 :::
 
 :::{link-card}
-title: Release notes
-link: https://www.elastic.co/docs/release-notes/elasticsearch
-description: What's new, deprecated, and fixed in each Elasticsearch release.
-links:
-  - label: Elasticsearch
-    url: https://www.elastic.co/docs/release-notes/elasticsearch
-  - label: Breaking changes
-    url: https://www.elastic.co/docs/release-notes/elasticsearch/breaking-changes
-  - label: Deprecations
-    url: https://www.elastic.co/docs/release-notes/elasticsearch/deprecations
-aside:
-  label: Client release notes
-  links:
-    - label: Python
-      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/python
-    - label: Java
-      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/java
-    - label: .NET
-      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/dotnet
-    - label: PHP
-      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/php
-    - label: Ruby
-      url: https://www.elastic.co/docs/release-notes/elasticsearch/clients/ruby
-:::
-
-:::{link-card}
-title: Troubleshooting
-link: https://www.elastic.co/docs/troubleshoot/elasticsearch
-description: Diagnose and fix common Elasticsearch cluster, performance, and operational issues.
+title: Snapshot and restore
+link: https://www.elastic.co/docs/troubleshoot/elasticsearch/snapshot-and-restore
 links:
-  - label: Cluster issues
-    url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clusters
-  - label: Snapshot and restore
+  - label: Snapshot problems
     url: https://www.elastic.co/docs/troubleshoot/elasticsearch/snapshot-and-restore
-  - label: Clients
+:::
+
+:::{link-card}
+title: Clients and diagnostics
+link: https://www.elastic.co/docs/troubleshoot/elasticsearch/clients
+links:
+  - label: Client problems
     url: https://www.elastic.co/docs/troubleshoot/elasticsearch/clients
   - label: Capture diagnostics
     url: https://www.elastic.co/docs/troubleshoot/elasticsearch/diagnostic
 :::
 ::::
+
+::::{card-group}
+:title: Reference
+:id: reference
+
+:::{link-card}
+title: Complete technical reference
+link: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/index
+links:
+  - label: Elasticsearch technical reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/index
+  - label: Configuration reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/configuration-reference/index
+  - label: Mapping reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/mapping-reference/index
+  - label: Aggregations reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/aggregations/index
+:::
+
+:::{link-card}
+title: APIs and query languages
+link: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/rest-apis/index
+links:
+  - label: REST API reference
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/rest-apis/index
+  - label: API conventions
+    url: https://www.elastic.co/docs/reference/elasticsearch/elasticsearch/rest-apis/api-conventions
+  - label: Query DSL
+    url: https://www.elastic.co/docs/reference/elasticsearch/query-languages/query-dsl/full-text-queries
+  - label: ES|QL
+    url: https://www.elastic.co/docs/reference/elasticsearch/query-languages/esql/esql-getting-started
+:::
+::::
+
+:::::
diff --git a/docs/testing/products/kibana/v9.md b/docs/testing/products/kibana/v9.md
index cbd5bb9c60..18fb8ca395 100644
--- a/docs/testing/products/kibana/v9.md
+++ b/docs/testing/products/kibana/v9.md
@@ -4,16 +4,35 @@ layout: hub
 
 :::{hero}
 :icon: kibana
-:title: Kibana
+:title: Kibana documentation hub
 :description: The UI for the Elasticsearch platform. Explore and visualize your data, build dashboards, set up alerts, automate tasks with AI, and use purpose-built solutions for Search, Observability, and Security.
-:releases: Latest&#58; [Stack 9.4.1](/release-notes/kibana) (Mar 28, 2026) · [Serverless deployed](/release-notes/serverless) Apr 1, 2026
+:primary-action: [Get started](#get-started)
+:secondary-action: [What's new](#whats-new)
+:tertiary-action: [Explore Kibana docs](#explore)
 :::
 
-:::{on-this-page}
-:::
-
-:::{intro}
-**New to Kibana?** [Learn data exploration and visualization](https://www.elastic.co/docs/explore-analyze/kibana-data-exploration-learning-tutorial) — a hands-on walk-through of Discover, ES|QL, visualizations, and dashboards.
+:::{get-started}
+title: Get started in 3 steps
+intro: Spin up Elasticsearch and Kibana, connect your data, and start exploring in minutes.
+steps:
+  - title: Run Elasticsearch and Kibana
+    options:
+      - label: Run locally
+        description: Spin up Elasticsearch and Kibana on your machine for development with `start-local`.
+        code: curl -fsSL https://elastic.co/start-local | sh
+        language: sh
+      - label: Try on Cloud
+        description: Start a free Elastic Cloud trial. No local setup needed.
+        url: https://cloud.elastic.co/registration
+        url-label: Start a free trial
+  - title: Ingest your data into Elasticsearch
+    description: Send documents to Elasticsearch using the APIs, ingest pipelines, connectors, or a language client.
+    link: https://www.elastic.co/docs/manage-data/ingest
+    link-label: Ingest your data
+  - title: Explore and visualize
+    description: Open Discover, then build your first chart and dashboard.
+    link: https://www.elastic.co/docs/explore-analyze/kibana-data-exploration-learning-tutorial
+    link-label: Start the tutorial
 :::
 
 :::{whats-new}
@@ -21,153 +40,288 @@ layout: hub
 :::
 
 ::::{card-group}
-:title: Install and administer
-:id: install
+:title: Solutions
+:id: solutions
+:variant: solutions
+:intro: Solutions add purpose-built experiences on top of Kibana for specific use cases. Use one as your starting point, or work with Kibana's features directly.
+
+:::{link-card}
+title: Elasticsearch
+link: https://www.elastic.co/docs/solutions/elasticsearch-solution-project
+icon: elasticsearch
+variant: es
+links:
+  - label: Solution overview
+    url: https://www.elastic.co/docs/solutions/elasticsearch-solution-project
+  - label: Get started
+    url: https://www.elastic.co/docs/solutions/elasticsearch-solution-project/get-started
+  - label: Agent Builder
+    url: https://www.elastic.co/docs/explore-analyze/ai-features/elastic-agent-builder
+aside:
+  label: Key features
+  links:
+    - label: Playground
+      url: https://www.elastic.co/docs/explore-analyze/query-filter/tools/playground
+    - label: Vector search
+      url: https://www.elastic.co/docs/solutions/search/vector
+    - label: Content connectors
+      url: https://www.elastic.co/docs/reference/search-connectors
+    - label: Semantic search
+      url: https://www.elastic.co/docs/solutions/search/semantic-search/semantic-search-elser-ingest-pipelines
+:::
+
+:::{link-card}
+title: Observability
+link: https://www.elastic.co/docs/solutions/observability
+icon: observability
+variant: obs
+links:
+  - label: Solution overview
+    url: https://www.elastic.co/docs/solutions/observability
+  - label: Get started
+    url: https://www.elastic.co/docs/solutions/observability/get-started
+  - label: Agent Builder
+    url: https://www.elastic.co/docs/solutions/observability/ai/agent-builder-observability
+aside:
+  label: Key features
+  links:
+    - label: APM
+      url: https://www.elastic.co/docs/solutions/observability/apm
+    - label: Logs
+      url: https://www.elastic.co/docs/solutions/observability/logs
+    - label: Infrastructure
+      url: https://www.elastic.co/docs/solutions/observability/infra-and-hosts
+    - label: Synthetics
+      url: https://www.elastic.co/docs/solutions/observability/synthetics/get-started
+    - label: SLOs
+      url: https://www.elastic.co/docs/solutions/observability/incident-management/service-level-objectives-slos
+:::
+
+:::{link-card}
+title: Security
+link: https://www.elastic.co/docs/solutions/security
+icon: security
+variant: sec
+links:
+  - label: Solution overview
+    url: https://www.elastic.co/docs/solutions/security
+  - label: Get started
+    url: https://www.elastic.co/docs/solutions/security/get-started
+  - label: Agent Builder
+    url: https://www.elastic.co/docs/solutions/security/ai/agent-builder/agent-builder
+aside:
+  label: Key features
+  links:
+    - label: SIEM
+      url: https://www.elastic.co/docs/solutions/security/get-started/get-started-detect-with-siem
+    - label: Detection rules
+      url: https://www.elastic.co/docs/solutions/security/detect-and-alert/manage-detection-rules
+    - label: Elastic Defend
+      url: https://www.elastic.co/docs/solutions/security/configure-elastic-defend
+    - label: Cloud security
+      url: https://www.elastic.co/docs/solutions/security/cloud
+    - label: Cases
+      url: https://www.elastic.co/docs/solutions/security/investigate/security-cases
+:::
+::::
+
+:::::{explore}
+:id: explore
+:title: Explore Kibana
+:intro: Explore the apps and capabilities that help you understand and act on your data.
+
+::::{card-group}
+:title: Quick links
+:id: quick-links
+
+:::{link-card}
+title: Releases and APIs
+links:
+  - label: Release notes
+    url: https://www.elastic.co/docs/release-notes/kibana
+  - label: Kibana API docs
+    url: https://www.elastic.co/docs/api/doc/kibana
+  - label: Breaking changes
+    url: https://www.elastic.co/docs/release-notes/kibana/breaking-changes
+:::
+
+:::{link-card}
+title: Configuration
+links:
+  - label: Configuration reference
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference
+  - label: Advanced settings
+    url: https://www.elastic.co/docs/reference/kibana/advanced-settings
+  - label: Security settings
+    url: https://www.elastic.co/docs/reference/kibana/configuration-reference/security-settings
+:::
+
+:::{link-card}
+title: Operations
+links:
+  - label: Upgrade Kibana
+    url: https://www.elastic.co/docs/deploy-manage/upgrade/deployment-or-cluster/kibana
+  - label: Run in production
+    url: https://www.elastic.co/docs/deploy-manage/production-guidance/kibana-in-production-environments
+:::
+::::
+
+::::{card-group}
+:title: Deploy and manage
+:id: deploy
 
 :::{link-card}
 title: Self-managed
-link: /deploy-manage/deploy/self-managed/install-kibana
+link: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-kibana
 description: Install and run Kibana on your own infrastructure.
 links:
   - label: Docker
-    url: /deploy-manage/deploy/self-managed/install-kibana-with-docker
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-kibana-with-docker
   - label: Debian / Ubuntu
-    url: /deploy-manage/deploy/self-managed/install-kibana-with-debian-package
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-kibana-with-debian-package
   - label: RPM
-    url: /deploy-manage/deploy/self-managed/install-kibana-with-rpm
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-kibana-with-rpm
   - label: Windows
-    url: /deploy-manage/deploy/self-managed/install-kibana-on-windows
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/install-kibana-on-windows
   - label: Configure (kibana.yml)
-    url: /deploy-manage/deploy/self-managed/configure-kibana
+    url: https://www.elastic.co/docs/deploy-manage/deploy/self-managed/configure-kibana
 :::
 
 :::{link-card}
 title: Managed deployments
-link: /deploy-manage/deploy/elastic-cloud/access-kibana
+link: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud/access-kibana
 description: Run Kibana on Elastic Cloud, Kubernetes, or ECE.
 links:
   - label: Elastic Cloud Hosted
-    url: /deploy-manage/deploy/elastic-cloud/access-kibana
+    url: https://www.elastic.co/docs/deploy-manage/deploy/elastic-cloud/access-kibana
   - label: Elastic Cloud on Kubernetes (ECK)
-    url: /deploy-manage/deploy/cloud-on-k8s/kibana-configuration
+    url: https://www.elastic.co/docs/deploy-manage/deploy/cloud-on-k8s/kibana-configuration
   - label: Elastic Cloud Enterprise
-    url: /deploy-manage/deploy/cloud-enterprise/access-kibana
-:::
-
-:::{link-card}
-title: Configure and secure
-link: /deploy-manage/users-roles/cluster-or-deployment-auth/kibana-authentication
-description: Authentication, roles, spaces, and encryption.
-links:
-  - label: Authentication (SSO, SAML, OIDC...)
-    url: /deploy-manage/users-roles/cluster-or-deployment-auth/kibana-authentication
-  - label: Kibana privileges
-    url: /deploy-manage/users-roles/cluster-or-deployment-auth/kibana-privileges
-  - label: Spaces
-    url: /deploy-manage/manage-spaces
-  - label: Secure saved objects
-    url: /deploy-manage/security/secure-saved-objects
+    url: https://www.elastic.co/docs/deploy-manage/deploy/cloud-enterprise/access-kibana
 :::
 
 :::{link-card}
 title: Maintain and monitor
-link: /deploy-manage/production-guidance/kibana-in-production-environments
-description: Production guidance, upgrades, reporting, monitoring, and logging.
+link: https://www.elastic.co/docs/deploy-manage/production-guidance/kibana-in-production-environments
+description: Production guidance, upgrades, and logging for Kibana itself. Monitor the rest of the stack from the Stack management section.
 links:
   - label: Run in production
-    url: /deploy-manage/production-guidance/kibana-in-production-environments
+    url: https://www.elastic.co/docs/deploy-manage/production-guidance/kibana-in-production-environments
   - label: Upgrade Kibana
-    url: /deploy-manage/upgrade/deployment-or-cluster/kibana
-  - label: Monitoring
-    url: /deploy-manage/monitor/stack-monitoring/kibana-monitoring-data
+    url: https://www.elastic.co/docs/deploy-manage/upgrade/deployment-or-cluster/kibana
   - label: Logging
-    url: /deploy-manage/monitor/logging-configuration/kibana-logging
+    url: https://www.elastic.co/docs/deploy-manage/monitor/logging-configuration/kibana-logging
 :::
 ::::
 
 ::::{card-group}
 :title: Explore, visualize, and analyze
-:id: explore
+:id: visualize
 
 :::{link-card}
 title: Discover
-link: /explore-analyze/discover/discover-get-started
+link: https://www.elastic.co/docs/explore-analyze/discover/discover-get-started
 description: Browse documents, filter, and query your indices in real time.
 links:
   - label: Get started with Discover
-    url: /explore-analyze/discover/discover-get-started
+    url: https://www.elastic.co/docs/explore-analyze/discover/discover-get-started
   - label: Use ES|QL in Kibana
-    url: /explore-analyze/query-filter/languages/esql-kibana
+    url: https://www.elastic.co/docs/explore-analyze/query-filter/languages/esql-kibana
 :::
 
 :::{link-card}
 title: Dashboards
-link: /explore-analyze/dashboards
+link: https://www.elastic.co/docs/explore-analyze/dashboards
 description: Build interactive dashboards that combine visualizations, controls, and context.
 links:
   - label: Create a dashboard
-    url: /explore-analyze/dashboards/create-dashboard
+    url: https://www.elastic.co/docs/explore-analyze/dashboards/create-dashboard
   - label: Build and customize
-    url: /explore-analyze/dashboards/building
+    url: https://www.elastic.co/docs/explore-analyze/dashboards/building
   - label: Organize panels and sections
-    url: /explore-analyze/dashboards/arrange-panels
+    url: https://www.elastic.co/docs/explore-analyze/dashboards/arrange-panels
   - label: Share and export
-    url: /explore-analyze/dashboards/sharing
+    url: https://www.elastic.co/docs/explore-analyze/dashboards/sharing
 aside:
   label: Panel types
   links:
     - label: Visualizations
-      url: /explore-analyze/visualize/lens
+      url: https://www.elastic.co/docs/explore-analyze/visualize/lens
     - label: Maps
-      url: /explore-analyze/visualize/maps
+      url: https://www.elastic.co/docs/explore-analyze/visualize/maps
+    - label: Controls
+      url: https://www.elastic.co/docs/explore-analyze/dashboards/add-controls
     - label: Text
-      url: /explore-analyze/visualize/text-panels
+      url: https://www.elastic.co/docs/explore-analyze/visualize/text-panels
     - label: Images
-      url: /explore-analyze/visualize/image-panels
+      url: https://www.elastic.co/docs/explore-analyze/visualize/image-panels
     - label: Links
-      url: /explore-analyze/visualize/link-panels
+      url: https://www.elastic.co/docs/explore-analyze/visualize/link-panels
+    - label: Sections
+      url: https://www.elastic.co/docs/explore-analyze/dashboards/arrange-panels
     - label: Alerts
-      url: /explore-analyze/visualize/alert-panels
+      url: https://www.elastic.co/docs/explore-analyze/visualize/alert-panels
 :::
 
 :::{link-card}
 title: Build visualizations
-link: /explore-analyze/visualize/lens
+link: https://www.elastic.co/docs/explore-analyze/visualize/lens
 description: Create charts and visual panels using the drag-and-drop editor, query mode (ES|QL), Vega, or Maps.
 links:
   - label: Visualization editor (drag-and-drop)
-    url: /explore-analyze/visualize/lens
+    url: https://www.elastic.co/docs/explore-analyze/visualize/lens
   - label: Query mode (ES|QL)
-    url: /explore-analyze/visualize/esorql
+    url: https://www.elastic.co/docs/explore-analyze/visualize/esorql
   - label: Vega
-    url: /explore-analyze/visualize/custom-visualizations-with-vega
+    url: https://www.elastic.co/docs/explore-analyze/visualize/custom-visualizations-with-vega
   - label: Maps
-    url: /explore-analyze/visualize/maps
+    url: https://www.elastic.co/docs/explore-analyze/visualize/maps
 aside:
   label: Chart types
   links:
     - label: Area
-      url: /explore-analyze/visualize/charts/area-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/area-charts
+    - label: Bar
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/bar-charts
     - label: Line
-      url: /explore-analyze/visualize/charts/line-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/line-charts
     - label: Pie
-      url: /explore-analyze/visualize/charts/pie-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/pie-charts
     - label: Table
-      url: /explore-analyze/visualize/charts/tables
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/tables
     - label: Metric
-      url: /explore-analyze/visualize/charts/metric-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/metric-charts
+    - label: Gauge
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/gauge-charts
     - label: Heat map
-      url: /explore-analyze/visualize/charts/heat-map-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/heat-map-charts
     - label: Treemap
-      url: /explore-analyze/visualize/charts/treemap-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/treemap-charts
     - label: Mosaic
-      url: /explore-analyze/visualize/charts/mosaic-charts
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/mosaic-charts
+    - label: Waffle
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/waffle-charts
+    - label: Tag cloud
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/tag-cloud-charts
+    - label: Region map
+      url: https://www.elastic.co/docs/explore-analyze/visualize/charts/region-map-charts
+:::
+
+:::{link-card}
+title: Reporting and sharing
+link: https://www.elastic.co/docs/deploy-manage/kibana-reporting-configuration
+description: Generate PDF, PNG, and CSV exports. Share dashboards with links or embeds.
+links:
+  - label: Configure reporting
+    url: https://www.elastic.co/docs/deploy-manage/kibana-reporting-configuration
+  - label: Share dashboards
+    url: https://www.elastic.co/docs/explore-analyze/dashboards/sharing
 :::
 ::::
 
 ::::{card-group}
-:title: Track and respond
-:id: track
+:title: Alerting and incident response
+:id: alerting
 
 :::{link-card}
 title: Alerting and rules
@@ -183,37 +337,26 @@ links:
 :::
 
 :::{link-card}
-title: Connectors
-link: https://www.elastic.co/docs/reference/kibana/connectors-kibana
-description: Integrate Kibana with external services for AI, notifications, and case management.
+title: Alerting connectors
+link: https://www.elastic.co/docs/reference/kibana/connectors-kibana/alerting-cases-connectors
+description: Send alerts and case updates to external incident-management tools.
 links:
-  - label: GenAI (OpenAI, Bedrock, Gemini...)
-    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/gen-ai-connectors
-  - label: Alerting & cases (Jira, ServiceNow, PagerDuty...)
-    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/alerting-cases-connectors
-  - label: Elastic Stack
-    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana
-  - label: Data & context sources
-    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana
-:::
-
-:::{link-card}
-title: Reporting and sharing
-link: https://www.elastic.co/docs/deploy-manage/kibana-reporting-configuration
-description: Generate PDF, PNG, and CSV exports. Share dashboards with links or embeds.
-links:
-  - label: Configure reporting
-    url: https://www.elastic.co/docs/deploy-manage/kibana-reporting-configuration
-  - label: Share dashboards
-    url: https://www.elastic.co/docs/explore-analyze/dashboards/sharing
-  - label: Saved objects
-    url: https://www.elastic.co/docs/explore-analyze/find-and-organize/saved-objects
+  - label: Jira
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/jira-action-type
+  - label: ServiceNow ITSM
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/servicenow-action-type
+  - label: PagerDuty
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/pagerduty-action-type
+  - label: Slack
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/slack-action-type
+  - label: Webhook
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/webhook-action-type
 :::
 ::::
 
 ::::{card-group}
 :title: AI and automation
-:id: ai
+:id: ai-automation
 
 :::{link-card}
 title: Agent Builder
@@ -232,6 +375,19 @@ links:
     url: https://www.elastic.co/docs/explore-analyze/ai-features/agent-builder/agent-builder-api-tutorial
 :::
 
+:::{link-card}
+title: Gen-AI connectors
+link: https://www.elastic.co/docs/reference/kibana/connectors-kibana/gen-ai-connectors
+description: Wire Kibana up to LLM providers for use in Agent Builder, alerting summaries, and AI Assistant features.
+links:
+  - label: OpenAI
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/openai-action-type
+  - label: Amazon Bedrock
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/bedrock-action-type
+  - label: Google Gemini
+    url: https://www.elastic.co/docs/reference/kibana/connectors-kibana/gemini-action-type
+:::
+
 :::{link-card}
 title: Workflows
 link: https://www.elastic.co/docs/explore-analyze/workflows
@@ -258,95 +414,8 @@ links:
 ::::
 
 ::::{card-group}
-:title: Solutions
-:id: solutions
-
-:::{link-card}
-title: Elasticsearch
-link: /solutions/elasticsearch-solution-project
-icon: elasticsearch
-variant: es
-description: Build powerful search and RAG applications using vector database, AI toolkit, and advanced retrieval capabilities.
-links:
-  - label: Solution overview
-    url: /solutions/elasticsearch-solution-project
-  - label: Get started
-    url: /solutions/elasticsearch-solution-project/get-started
-  - label: Agent Builder
-    url: /explore-analyze/ai-features/elastic-agent-builder
-aside:
-  label: Key features
-  links:
-    - label: Playground
-      url: /explore-analyze/query-filter/tools/playground
-    - label: Vector search
-      url: /solutions/search/vector
-    - label: Content connectors
-      url: /reference/search-connectors
-    - label: Semantic search
-      url: /solutions/search/semantic-search/semantic-search-elser-ingest-pipelines
-:::
-
-:::{link-card}
-title: Observability
-link: /solutions/observability
-icon: observability
-variant: obs
-description: Resolve problems with open, flexible, and unified observability powered by advanced machine learning and analytics.
-links:
-  - label: Solution overview
-    url: /solutions/observability
-  - label: Get started
-    url: /solutions/observability/get-started
-  - label: Agent Builder
-    url: /solutions/observability/ai/agent-builder-observability
-aside:
-  label: Key features
-  links:
-    - label: APM
-      url: /solutions/observability/apm
-    - label: Logs
-      url: /solutions/observability/logs
-    - label: Infrastructure
-      url: /solutions/observability/infra-and-hosts
-    - label: Synthetics
-      url: /solutions/observability/synthetics/get-started
-    - label: SLOs
-      url: /solutions/observability/incident-management/service-level-objectives-slos
-:::
-
-:::{link-card}
-title: Security
-link: /solutions/security
-icon: security
-variant: sec
-description: Detect, investigate, and respond to threats with AI-driven security analytics to protect your organization.
-links:
-  - label: Solution overview
-    url: /solutions/security
-  - label: Get started
-    url: /solutions/security/get-started
-  - label: Agent Builder
-    url: /solutions/security/ai/agent-builder/agent-builder
-aside:
-  label: Key features
-  links:
-    - label: SIEM
-      url: /solutions/security/get-started/get-started-detect-with-siem
-    - label: Detection rules
-      url: /solutions/security/detect-and-alert/manage-detection-rules
-    - label: Elastic Defend
-      url: /solutions/security/configure-elastic-defend
-    - label: Cloud security
-      url: /solutions/security/cloud
-    - label: Cases
-      url: /solutions/security/investigate/security-cases
-:::
-::::
-
-::::{card-group}
-:title: Management and developer tools
-:id: manage
+:title: Stack management
+:id: stack-management
 
 :::{link-card}
 title: Data and indices
@@ -364,32 +433,147 @@ links:
 
 :::{link-card}
 title: Integrations and Fleet
-description: Deploy and manage Elastic Agents, integrations, and Osquery.
+description: Browse and install integrations, deploy and manage Elastic Agents, and run Osquery, all from Kibana.
 links:
+  - label: Integrations
+    url: https://www.elastic.co/docs/reference/integrations
   - label: Fleet
     url: https://www.elastic.co/docs/reference/fleet
   - label: Manage agents
     url: https://www.elastic.co/docs/reference/fleet/manage-elastic-agents-in-fleet
   - label: Agent policies
     url: https://www.elastic.co/docs/reference/fleet/agent-policy
+  - label: Osquery manager
+    url: https://www.elastic.co/docs/solutions/security/investigate/osquery
+:::
+
+:::{link-card}
+title: Stack Monitoring
+link: https://www.elastic.co/docs/deploy-manage/monitor/stack-monitoring/kibana-monitoring-data
+description: Monitor the health of Elasticsearch, Kibana, Logstash, and Beats from a single Kibana app.
+links:
+  - label: Kibana monitoring data
+    url: https://www.elastic.co/docs/deploy-manage/monitor/stack-monitoring/kibana-monitoring-data
+  - label: Configure Stack Monitoring
+    url: https://www.elastic.co/docs/deploy-manage/monitor/stack-monitoring
+:::
+
+:::{link-card}
+title: Saved objects
+link: https://www.elastic.co/docs/explore-analyze/find-and-organize/saved-objects
+description: Manage dashboards, visualizations, and other Kibana objects, including export, import, and migration across spaces.
+links:
+  - label: Manage saved objects
+    url: https://www.elastic.co/docs/explore-analyze/find-and-organize/saved-objects
+  - label: Tags
+    url: https://www.elastic.co/docs/explore-analyze/find-and-organize/tags
 :::
+::::
+
+::::{card-group}
+:title: Developer tools
+:id: developer-tools
 
 :::{link-card}
-title: Developer tools
-description: Run API requests, profile queries, test grok patterns, and debug Painless scripts.
+title: Console
+link: https://www.elastic.co/docs/reference/cloud/cloud-hosted/ec-api-console
+description: Run Elasticsearch and Kibana API requests interactively, with auto-complete and history.
 links:
-  - label: Console
+  - label: Console overview
     url: https://www.elastic.co/docs/reference/cloud/cloud-hosted/ec-api-console
+:::
+
+:::{link-card}
+title: Query and script tools
+link: https://www.elastic.co/docs/explore-analyze/query-filter/tools/search-profiler
+description: Profile queries, test patterns, and debug scripts.
+links:
   - label: Search Profiler
     url: https://www.elastic.co/docs/explore-analyze/query-filter/tools/search-profiler
   - label: Grok Debugger
     url: https://www.elastic.co/docs/explore-analyze/query-filter/tools/grok-debugger
+  - label: Painless Lab
+    url: https://www.elastic.co/docs/explore-analyze/scripting/painless-lab
+:::
+
+:::{link-card}
+title: APIs and plugins
+link: https://www.elastic.co/docs/api/doc/kibana
+description: REST API, plugins, and CLI commands for extending Kibana.
+links:
+  - label: Kibana REST API
+    url: https://www.elastic.co/docs/api/doc/kibana
+  - label: Kibana serverless API
+    url: https://www.elastic.co/docs/api/doc/serverless-kibana
+  - label: Plugins
+    url: https://www.elastic.co/docs/reference/kibana/kibana-plugins
+  - label: kibana-setup command
+    url: https://www.elastic.co/docs/reference/kibana/commands/kibana-setup
+:::
+::::
+
+::::{card-group}
+:title: Secure Kibana
+:id: security
+
+:::{link-card}
+title: Authenticate users
+links:
+  - label: Kibana authentication (SSO, SAML, OIDC)
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/kibana-authentication
+  - label: User roles
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/user-roles
+:::
+
+:::{link-card}
+title: Authorize access
+links:
+  - label: Kibana privileges
+    url: https://www.elastic.co/docs/deploy-manage/users-roles/cluster-or-deployment-auth/kibana-privileges
+  - label: Spaces
+    url: https://www.elastic.co/docs/deploy-manage/manage-spaces
+:::
+
+:::{link-card}
+title: Protect data and audit
+links:
+  - label: Secure saved objects
+    url: https://www.elastic.co/docs/deploy-manage/security/secure-saved-objects
+  - label: Kibana and Elasticsearch mutual TLS
+    url: https://www.elastic.co/docs/deploy-manage/security/kibana-es-mutual-tls
+  - label: Enable audit logging
+    url: https://www.elastic.co/docs/deploy-manage/security/logging-configuration/enabling-audit-logs
+:::
+::::
+
+::::{card-group}
+:title: Troubleshoot
+:id: troubleshoot
+
+:::{link-card}
+title: Diagnose common issues
+links:
+  - label: Kibana troubleshooting
+    url: https://www.elastic.co/docs/troubleshoot/kibana
+  - label: Alerts
+    url: https://www.elastic.co/docs/troubleshoot/kibana/alerts
+  - label: Maps
+    url: https://www.elastic.co/docs/troubleshoot/kibana/maps
+  - label: Reporting
+    url: https://www.elastic.co/docs/troubleshoot/kibana/reporting
+:::
+
+:::{link-card}
+title: Capture diagnostics
+links:
+  - label: Capture Kibana diagnostics
+    url: https://www.elastic.co/docs/troubleshoot/kibana/capturing-diagnostics
 :::
 ::::
 
 ::::{card-group}
 :title: Reference
-:id: ref
+:id: reference
 
 :::{link-card}
 title: Configuration and settings
@@ -410,21 +594,6 @@ links:
     url: https://www.elastic.co/docs/reference/kibana/advanced-settings
 :::
 
-:::{link-card}
-title: APIs and plugins
-link: https://www.elastic.co/docs/api/doc/kibana
-description: REST API, plugins, and CLI commands.
-links:
-  - label: Kibana REST API
-    url: https://www.elastic.co/docs/api/doc/kibana
-  - label: Kibana serverless API
-    url: https://www.elastic.co/docs/api/doc/serverless-kibana
-  - label: Plugins
-    url: https://www.elastic.co/docs/reference/kibana/kibana-plugins
-  - label: kibana-setup command
-    url: https://www.elastic.co/docs/reference/kibana/commands/kibana-setup
-:::
-
 :::{link-card}
 title: Release notes
 link: https://www.elastic.co/docs/release-notes/kibana
@@ -448,23 +617,8 @@ aside:
     - label: Observability
       url: https://www.elastic.co/docs/release-notes/observability
     - label: Serverless
-      url: https://www.elastic.co/docs/release-notes/serverless
+      url: https://www.elastic.co/docs/release-notes/cloud-serverless
 :::
 
-:::{link-card}
-title: Troubleshooting
-link: https://www.elastic.co/docs/troubleshoot/kibana
-description: Diagnose and fix common Kibana issues.
-links:
-  - label: General
-    url: https://www.elastic.co/docs/troubleshoot/kibana
-  - label: Alerts
-    url: https://www.elastic.co/docs/troubleshoot/kibana/alerts
-  - label: Maps
-    url: https://www.elastic.co/docs/troubleshoot/kibana/maps
-  - label: Reporting
-    url: https://www.elastic.co/docs/troubleshoot/kibana/reporting
-  - label: Capture diagnostics
-    url: https://www.elastic.co/docs/troubleshoot/kibana/capturing-diagnostics
-:::
 ::::
+:::::
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 7a99b8e13f..0d5094b8fc 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -4,9 +4,9 @@
  *
  *   .hub-page         page wrapper (set by Layout/_Layout.cshtml's RenderHub)
  *   .hub-content      article wrapper inside the content column
- *   .hub-hero         hero section (full-bleed dark background)
+ *   .hub-hero         hero section (light, divider below)
  *   .hub-on-this-page inline TOC chip
- *   .hub-intro        getting-started callout panel
+ *   .hub-get-started  onboarding funnel (intro, install, steps)
  *   .hub-whats-new    What's new panel
  *   .hub-zone         section heading
  *   .hub-card-grid    card grid container
@@ -25,10 +25,14 @@
 	}
 
 	/* Hero ------------------------------------------------------------- */
+	/* Light hero on the page background, separated from the body by a rule
+	   (matches the redesign — no dark band). */
 	.hub-hero {
-		background-color: var(--color-ink-navy);
-		color: var(--color-white);
-		padding: 56px 24px 48px;
+		background-color: transparent;
+		color: var(--color-ink-dark);
+		padding: 40px 24px 28px;
+		margin-bottom: 44px;
+		border-bottom: 1px solid var(--color-grey-20);
 	}
 	.hub-hero .hub-hero-inner {
 		@apply mx-auto w-full max-w-5xl;
@@ -38,13 +42,13 @@
 		flex-wrap: wrap;
 		align-items: center;
 		gap: 10px 14px;
-		margin: 0 0 16px;
+		margin: 0 0 20px;
 		font-size: 0.8125rem;
 		letter-spacing: 0.02em;
 	}
 	.hub-hero .hub-hero-eyebrow-label {
 		font-weight: 600;
-		color: rgb(255 255 255 / 0.55);
+		color: var(--color-ink-light);
 	}
 	.hub-hero .hub-hero-eyebrow-link {
 		display: inline-flex;
@@ -52,10 +56,10 @@
 		gap: 6px;
 		padding: 4px 12px;
 		font-weight: 600;
-		color: var(--color-white);
+		color: var(--color-ink-dark);
 		text-decoration: none;
-		background: rgb(255 255 255 / 0.08);
-		border: 1px solid rgb(255 255 255 / 0.2);
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
 		border-radius: 999px;
 		transition:
 			background 0.15s ease,
@@ -63,8 +67,8 @@
 	}
 	.hub-hero .hub-hero-eyebrow-link:hover,
 	.hub-hero .hub-hero-eyebrow-link:focus-visible {
-		background: rgb(255 255 255 / 0.16);
-		border-color: rgb(255 255 255 / 0.4);
+		background: var(--color-grey-10);
+		border-color: var(--color-grey-30);
 	}
 	.hub-hero .hub-hero-eyebrow-arrow {
 		flex-shrink: 0;
@@ -75,69 +79,84 @@
 		transform: translateX(2px);
 	}
 	.hub-hero .hub-hero-top {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		column-gap: 16px;
+		display: flex;
 		align-items: center;
-		margin-bottom: 12px;
-	}
-	.hub-hero .hub-hero-title {
-		display: contents;
-	}
-	.hub-hero .hub-hero-title h1 {
-		grid-column: 2;
-		grid-row: 1;
-	}
-	.hub-hero .hub-hero-title p {
-		grid-column: 1 / -1;
-		grid-row: 2;
-		margin-top: 16px;
+		column-gap: 14px;
+		margin-bottom: 16px;
 	}
 	.hub-hero .hub-hero-icon {
 		@apply inline-flex h-13 w-13 shrink-0 items-center justify-center rounded-xl text-2xl font-bold;
-		width: 52px;
-		height: 52px;
-		background-color: rgb(255 255 255 / 0.08);
-		color: var(--color-white);
+		width: 48px;
+		height: 48px;
+		background-color: var(--color-grey-10);
+		color: var(--color-ink-dark);
 	}
 	.hub-hero .hub-hero-icon-svg {
 		background-color: transparent;
 	}
 	.hub-hero .hub-hero-icon-svg svg {
-		width: 32px;
-		height: 32px;
+		width: 40px;
+		height: 40px;
 	}
-	.hub-hero .hub-hero-title h1 {
-		font-size: 2.571rem;
+	.hub-hero .hub-hero-top h1 {
+		font-size: 2.285rem;
 		font-weight: 700;
 		line-height: 1.2;
 		letter-spacing: -0.5px;
-		color: var(--color-white);
+		color: var(--color-ink-dark);
 		margin: 0;
 	}
-	.hub-hero .hub-hero-title h1 a.headerlink {
-		color: var(--color-white);
+	.hub-hero .hub-hero-top h1 a.headerlink {
+		color: var(--color-ink-dark);
 		text-decoration: none;
 	}
-	.hub-hero .hub-hero-title p {
-		font-size: 1.143rem;
-		color: rgb(255 255 255 / 0.7);
-		max-width: 720px;
+	.hub-hero .hub-hero-desc {
+		font-size: 1.071rem;
+		color: var(--color-ink-light);
+		max-width: 760px;
 		line-height: 1.6;
+		margin: 0;
 	}
 
-	.hub-hero .hub-hero-releases {
-		@apply mt-4;
-		font-size: 12px;
-		color: rgb(255 255 255 / 0.45);
+	.hub-hero .hub-hero-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin-top: 24px;
 	}
-	.hub-hero .hub-hero-releases a {
-		color: rgb(255 255 255 / 0.6);
+	.hub-hero .hub-hero-action {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		padding: 9px 18px;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		border-radius: 8px;
 		text-decoration: none;
+		color: var(--color-ink-dark);
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-30);
+		transition:
+			background 0.15s ease,
+			border-color 0.15s ease,
+			color 0.15s ease;
 	}
-	.hub-hero .hub-hero-releases a:hover {
-		color: rgb(255 255 255 / 0.85);
-		text-decoration: underline;
+	.hub-hero .hub-hero-action svg {
+		flex-shrink: 0;
+		color: var(--color-ink-light);
+	}
+	.hub-hero .hub-hero-action:hover,
+	.hub-hero .hub-hero-action:focus-visible {
+		background: var(--color-grey-10);
+		border-color: var(--color-grey-40);
+	}
+	.hub-hero .hub-hero-action-primary {
+		border-color: var(--color-ink-dark);
+	}
+	.hub-hero .hub-hero-action-primary:hover,
+	.hub-hero .hub-hero-action-primary:focus-visible {
+		border-color: var(--color-ink-dark);
+		background: var(--color-grey-10);
 	}
 
 	/* On this page ----------------------------------------------------- */
@@ -179,121 +198,385 @@
 		font-size: 12px;
 	}
 
-	/* Intro callout ---------------------------------------------------- */
-	.hub-intro {
+	/* Get started ------------------------------------------------------ */
+	.hub-get-started {
 		@apply mx-auto w-full max-w-5xl;
-		margin-bottom: 36px;
-		background: var(--color-white);
-		border: 1px solid var(--color-grey-20);
-		border-left: 3px solid var(--color-teal-40, #66ccc8);
-		border-radius: 16px;
-		padding: 18px 24px;
-		font-size: 14px;
+		margin-bottom: 56px;
+		scroll-margin-top: 96px;
+	}
+	.hub-get-started .hub-get-started-title {
+		margin: 0 0 8px;
+		font-size: 1.375rem;
+		font-weight: 700;
 		color: var(--color-ink);
+	}
+	.hub-get-started .hub-get-started-intro {
+		margin: 0 0 20px;
+		font-size: 0.9375rem;
+		color: var(--color-ink-light, #4c4c4c);
 		line-height: 1.5;
 	}
-	.hub-intro p {
+	.hub-get-started .hub-get-started-actions {
+		@apply flex flex-wrap items-center gap-4;
+		margin-bottom: 28px;
+	}
+	.hub-get-started .hub-get-started-install {
+		position: relative;
+		flex: 1 1 380px;
+		min-width: 0;
+		margin: 0;
+	}
+	.hub-get-started .hub-get-started-install pre {
 		margin: 0;
+		padding: 12px 16px;
+		overflow-x: auto;
+		background: var(--color-ink-navy);
+		border-radius: 10px;
+	}
+	.hub-get-started .hub-get-started-install code {
+		font-family: var(--font-mono, monospace);
+		font-size: 0.8125rem;
+		color: var(--color-white);
+		background: transparent;
 	}
-	.hub-intro a {
+	.hub-get-started .hub-get-started-tutorial {
+		@apply inline-flex items-center gap-2;
+		flex-shrink: 0;
+		padding: 9px 16px;
+		font-size: 0.875rem;
+		font-weight: 600;
 		color: var(--color-blue-elastic-100);
+		text-decoration: none;
+		border: 1px solid var(--color-grey-20);
+		border-radius: 999px;
+		transition:
+			border-color 0.15s ease,
+			background 0.15s ease;
+	}
+	.hub-get-started .hub-get-started-tutorial:hover,
+	.hub-get-started .hub-get-started-tutorial:focus-visible {
+		background: var(--color-grey-10, #f5f7fa);
+		border-color: var(--color-grey-30);
+	}
+
+	.hub-get-started .hub-get-started-steps {
+		@apply grid gap-4;
+		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.hub-get-started .hub-get-started-step {
+		@apply relative flex flex-col;
+		padding: 20px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 14px;
+	}
+	.hub-get-started .hub-get-started-step-head {
+		@apply flex items-center;
+		gap: 12px;
+		margin-bottom: 10px;
+		padding-right: 34px;
+	}
+	.hub-get-started .hub-get-started-step-num {
+		position: absolute;
+		top: 20px;
+		right: 20px;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-grey-70, #98a2b3);
+		letter-spacing: 0.06em;
+	}
+	.hub-get-started .hub-get-started-step-title {
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+	}
+	.hub-get-started .hub-get-started-step-desc {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--color-ink-light, #4c4c4c);
+		line-height: 1.45;
+	}
+
+	/* Step 01 with two equal start options spans the full row. */
+	.hub-get-started .hub-get-started-steps:has(.hub-get-started-step-wide) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.hub-get-started .hub-get-started-step-wide {
+		grid-column: 1 / -1;
+		container-type: inline-size;
+	}
+	.hub-get-started .hub-get-started-options {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		margin-top: 16px;
+		padding-top: 16px;
+		border-top: 1px solid var(--color-grey-20);
+	}
+	.hub-get-started .hub-get-started-option {
+		@apply flex flex-col;
+		gap: 10px;
+		padding-right: 28px;
+	}
+	.hub-get-started .hub-get-started-option + .hub-get-started-option {
+		padding-right: 0;
+		padding-left: 28px;
+		border-left: 1px solid var(--color-grey-20);
+	}
+	.hub-get-started .hub-get-started-option-label {
+		font-size: 0.875rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+	}
+	.hub-get-started .hub-get-started-option-desc {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--color-ink-light, #4c4c4c);
+		line-height: 1.45;
+	}
+	.hub-get-started .hub-get-started-option .hub-get-started-install {
+		flex: none;
+		width: 100%;
+		margin-top: auto;
+	}
+	.hub-get-started .hub-get-started-option-btn {
+		@apply inline-flex items-center justify-center;
+		gap: 8px;
+		width: 100%;
+		min-height: 48px;
+		margin-top: auto;
+		padding: 0 18px;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--color-ink-dark);
+		background: var(--color-white);
+		border: 1px solid var(--color-ink-dark);
+		border-radius: 8px;
+		transition:
+			background 0.15s ease,
+			border-color 0.15s ease;
+	}
+	.hub-get-started .hub-get-started-option-btn:hover,
+	.hub-get-started .hub-get-started-option-btn:focus-visible {
+		background: var(--color-grey-10);
+		border-color: var(--color-ink-dark);
+		color: var(--color-ink-dark);
+	}
+	.hub-get-started .hub-get-started-option-link {
+		@apply inline-flex items-center gap-1;
+		align-self: flex-start;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-blue-elastic-100, #0b64dd);
+	}
+	.hub-get-started .hub-get-started-option-link:hover {
 		text-decoration: underline;
 	}
+	@container (max-width: 560px) {
+		.hub-get-started .hub-get-started-options {
+			grid-template-columns: 1fr;
+		}
+		.hub-get-started .hub-get-started-option {
+			padding-right: 0;
+		}
+		.hub-get-started .hub-get-started-option + .hub-get-started-option {
+			padding-left: 0;
+			padding-top: 16px;
+			margin-top: 4px;
+			border-left: 0;
+			border-top: 1px solid var(--color-grey-20);
+		}
+	}
+
+	/* Steps 02/03 are clickable link cards. */
+	.hub-get-started .hub-get-started-step-link {
+		padding: 0;
+		transition:
+			box-shadow 0.15s,
+			border-color 0.15s;
+	}
+	.hub-get-started .hub-get-started-step-link:hover {
+		border-color: var(--color-blue-elastic);
+		box-shadow: 0 1px 4px rgb(0 0 0 / 0.07);
+	}
+	.hub-get-started .hub-get-started-step-anchor {
+		@apply flex h-full flex-col;
+		padding: 20px;
+		color: inherit;
+		text-decoration: none;
+	}
+	.hub-get-started .hub-get-started-step-arrow {
+		@apply inline-flex items-center gap-1;
+		margin-top: auto;
+		padding-top: 14px;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-blue-elastic-100, #0b64dd);
+	}
 
 	/* What's new ------------------------------------------------------- */
 	.hub-whats-new {
 		@apply mx-auto w-full max-w-5xl;
-		background: var(--color-white);
-		border: 1px solid var(--color-grey-20);
-		border-radius: 16px;
-		padding: 24px 28px;
-		margin-bottom: 36px;
+		margin-bottom: 56px;
 		scroll-margin-top: 120px;
 	}
 	.hub-whats-new .hub-wn-header {
-		@apply mb-4 flex items-center gap-2;
-	}
-	.hub-whats-new .hub-wn-badge {
-		font-size: 12px;
-		font-weight: 700;
-		color: var(--color-white);
-		background: #f04e98;
-		border-radius: 6px;
-		padding: 3px 10px;
-		line-height: 1.3;
+		@apply mb-6 flex flex-wrap items-end justify-between gap-4;
 	}
 	.hub-whats-new .hub-wn-title {
-		font-size: 15px;
+		font-size: 1.571rem;
 		font-weight: 700;
 		color: var(--color-ink-dark);
+		line-height: 1.2;
+		margin: 0;
 	}
-	.hub-whats-new .hub-wn-rn-links {
-		margin-left: auto;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		font-size: 13px;
-		flex-shrink: 0;
+	.hub-whats-new .hub-wn-intro {
 		color: var(--color-ink-light);
+		margin-top: 8px;
+		max-width: 60ch;
 	}
-	.hub-whats-new .hub-wn-rn-label {
+	.hub-whats-new .hub-wn-rn {
+		@apply flex flex-shrink-0 flex-wrap items-center gap-x-2 gap-y-1;
+	}
+	.hub-whats-new .hub-wn-footer {
+		@apply mt-4 flex flex-wrap items-center justify-center gap-x-2 gap-y-1;
+	}
+	.hub-whats-new .hub-wn-footer-text {
+		font-size: 0.875rem;
 		color: var(--color-ink-light);
 	}
-	.hub-whats-new .hub-wn-rn-links a {
-		font-weight: 500;
+	.hub-whats-new .hub-wn-upgrade {
+		@apply inline-flex items-center gap-1.5;
+		font-size: 0.875rem;
+		font-weight: 600;
 		color: var(--color-blue-elastic-100);
 		text-decoration: none;
 	}
-	.hub-whats-new .hub-wn-rn-links a:hover {
+	.hub-whats-new .hub-wn-upgrade:hover {
 		text-decoration: underline;
 	}
-	.hub-whats-new .hub-wn-rn-sep {
-		color: var(--color-grey-30);
+	.hub-whats-new .hub-wn-upgrade svg {
+		flex-shrink: 0;
 	}
-
-	.hub-whats-new .hub-wn-items {
-		@apply m-0 flex list-none flex-col gap-2 p-0;
+	.hub-whats-new .hub-wn-rn-label {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-ink-light);
 	}
-	.hub-whats-new .hub-wn-item {
-		@apply m-0 p-0;
+	.hub-whats-new .hub-wn-rn-list {
+		@apply m-0 flex flex-wrap items-center p-0;
+		list-style: none;
 	}
-	.hub-whats-new .hub-wn-item-link {
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) 130px;
-		align-items: baseline;
-		column-gap: 12px;
-		padding: 10px 14px;
-		border-radius: 10px;
-		background: var(--color-grey-10);
+	.hub-whats-new .hub-wn-rn-list li {
+		@apply inline-flex items-center;
+	}
+	.hub-whats-new .hub-wn-rn-list li:not(:last-child)::after {
+		content: '·';
+		color: var(--color-grey-40);
+		margin: 0 10px;
+		font-weight: 700;
+	}
+	.hub-whats-new .hub-wn-rn-link {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--color-blue-elastic-100);
 		text-decoration: none;
-		font-size: 14px;
-		color: var(--color-body, #515151);
-		line-height: 1.4;
-		border: 1px solid transparent;
-		transition: background 0.12s;
 	}
-	.hub-whats-new a.hub-wn-item-link:hover {
-		background: var(--color-blue-elastic-10);
-		border-color: var(--color-grey-20);
+	.hub-whats-new .hub-wn-rn-link:hover {
+		text-decoration: underline;
+	}
+
+	/* What's new card grid */
+	.hub-whats-new .hub-wn-grid {
+		@apply m-0 grid list-none p-0;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 16px;
+	}
+	.hub-whats-new .hub-wn-card {
+		margin: 0;
+	}
+	.hub-whats-new .hub-wn-card-featured {
+		grid-column: span 2;
+	}
+	.hub-whats-new .hub-wn-card-link {
+		@apply flex h-full flex-col gap-2.5;
+		padding: 18px 20px;
+		background: var(--color-white);
+		border: 1px solid var(--color-grey-20);
+		border-radius: 14px;
 		text-decoration: none;
+		color: inherit;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
 	}
-	.hub-whats-new .hub-wn-item-title {
-		color: var(--color-ink-dark);
-		white-space: nowrap;
+	.hub-whats-new a.hub-wn-card-link:hover {
+		border-color: var(--color-blue-elastic-60, #7db8e8);
+		box-shadow: 0 2px 10px rgb(0 0 0 / 0.06);
+	}
+	.hub-whats-new .hub-wn-card-meta {
+		@apply flex items-center justify-between gap-2;
+		font-size: 0.75rem;
+	}
+	.hub-whats-new .hub-wn-card-meta-left {
+		@apply inline-flex items-center gap-2;
+	}
+	.hub-whats-new .hub-wn-card-badge {
+		font-weight: 700;
+		color: var(--color-white);
+		background: #f04e98;
+		border-radius: 6px;
+		padding: 2px 8px;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
 	}
-	.hub-whats-new .hub-wn-item-desc {
+	.hub-whats-new .hub-wn-card-date {
+		font-weight: 600;
 		color: var(--color-ink-light);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
 	}
-	.hub-whats-new .hub-wn-item-meta {
-		justify-self: end;
-		text-align: right;
-		white-space: nowrap;
-		font-size: 12px;
-		color: var(--color-grey-80);
+	.hub-whats-new .hub-wn-card-tag {
+		color: var(--color-grey-80, #69707d);
 		font-weight: 500;
 	}
-	.hub-whats-new .hub-wn-item-desc {
-		min-width: 0;
+	.hub-whats-new .hub-wn-card-title {
+		font-size: 0.9375rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+		line-height: 1.3;
+		margin: 0;
+	}
+	.hub-whats-new .hub-wn-card-featured .hub-wn-card-title {
+		font-size: 1.125rem;
+	}
+	.hub-whats-new .hub-wn-card-desc {
+		font-size: 0.8125rem;
+		color: var(--color-ink-light);
+		line-height: 1.45;
+		margin: 0;
+	}
+	.hub-whats-new .hub-wn-card-more {
+		@apply mt-auto inline-flex items-center gap-1.5;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-blue-elastic-100);
+	}
+	@media (max-width: 900px) {
+		.hub-whats-new .hub-wn-grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+	@media (max-width: 640px) {
+		.hub-whats-new .hub-wn-grid {
+			grid-template-columns: 1fr;
+		}
+		.hub-whats-new .hub-wn-card-featured {
+			grid-column: span 1;
+		}
 	}
 
 	/* Zone (section heading) ------------------------------------------ */
@@ -326,12 +609,18 @@
 		gap: 24px;
 	}
 
+	/* Solutions variant: lock to a 3-up layout that tolerates a future 4th card
+	   (it wraps to the next row rather than shrinking into a 4th narrow column). */
+	.hub-card-grid-solutions {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
 	/* Card ------------------------------------------------------------- */
 	.hub-card {
 		background: var(--color-white);
 		border: 1px solid var(--color-grey-20);
-		border-radius: 16px;
-		padding: 28px 28px 24px;
+		border-radius: 14px;
+		padding: 22px 22px 20px;
 		transition:
 			box-shadow 0.15s,
 			border-color 0.15s;
@@ -355,7 +644,7 @@
 		display: block;
 	}
 	.hub-card .hub-card-title {
-		font-size: 1.214rem;
+		font-size: 1.0625rem;
 		font-weight: 700;
 		color: var(--color-ink-dark);
 		margin: 0;
@@ -432,28 +721,186 @@
 	.hub-card .hub-card-aside-links a {
 		color: var(--color-blue-elastic-100);
 		font-weight: 500;
-		text-decoration: none;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+		text-decoration-thickness: 1px;
 	}
 	.hub-card .hub-card-aside-links a:hover {
-		text-decoration: underline;
+		color: var(--color-blue-elastic-110);
 	}
 	.hub-card .hub-card-aside-sep {
 		color: var(--color-grey-30);
 		margin: 0 6px;
 	}
 
-	/* Solution accent borders */
-	.hub-card-sol {
-		border-left: 3px solid var(--color-blue-elastic);
+	/* Explore {product} — accordion stack ------------------------------ */
+	.hub-explore {
+		@apply mx-auto w-full max-w-5xl;
+		border-top: 1px solid var(--color-grey-20);
+	}
+
+	.hub-accordion {
+		border-bottom: 1px solid var(--color-grey-20);
+	}
+	.hub-accordion-summary {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 18px 4px;
+		cursor: pointer;
+		list-style: none;
+		user-select: none;
+	}
+	/* Hide the native disclosure triangle across browsers. */
+	.hub-accordion-summary::-webkit-details-marker {
+		display: none;
+	}
+	.hub-accordion-summary::marker {
+		content: "";
+	}
+	.hub-accordion-title {
+		font-size: 1.143rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+		line-height: 1.3;
+	}
+	.hub-accordion-icon {
+		flex: none;
+		color: var(--color-ink-light);
+	}
+	/* Plus when collapsed, minus when open: drop the vertical stroke on [open]. */
+	.hub-accordion-icon-v {
+		transition: opacity 0.15s ease;
+	}
+	.hub-accordion[open] > .hub-accordion-summary .hub-accordion-icon-v {
+		opacity: 0;
+	}
+	.hub-accordion-summary:hover .hub-accordion-title {
+		color: var(--color-blue-elastic);
+	}
+	.hub-accordion-body {
+		padding: 4px 4px 28px;
+		container-type: inline-size;
+	}
+	.hub-accordion-intro {
+		color: var(--color-ink-light);
+		margin: 0 0 20px;
+	}
+
+	/* Columns inside an accordion -------------------------------------- */
+	/* Column count follows the accordion body's own width (container query), not the
+	   viewport — the hub's left nav narrows the body, so a viewport query would
+	   under-count. Targets a 4-up layout like the design when there's room. */
+	.hub-explore-cols {
+		@apply m-0 list-none p-0;
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 28px 24px;
+		align-items: start;
+	}
+	@container (min-width: 420px) {
+		.hub-explore-cols {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+	@container (min-width: 620px) {
+		.hub-explore-cols {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+	@container (min-width: 820px) {
+		.hub-explore-cols {
+			grid-template-columns: repeat(4, minmax(0, 1fr));
+		}
+	}
+	.hub-col {
+		margin: 0;
+		list-style: none;
+		min-width: 0;
+	}
+	.hub-col-title {
+		font-size: 0.929rem;
+		font-weight: 700;
+		color: var(--color-ink-dark);
+		margin: 0 0 4px;
+		line-height: 1.3;
+	}
+	.hub-col-title a {
+		color: var(--color-ink-dark);
+		text-decoration: none;
+	}
+	.hub-col-title a:hover {
+		color: var(--color-blue-elastic);
+		text-decoration: underline;
+	}
+	.hub-col-desc {
+		font-size: 0.786rem;
+		color: var(--color-ink-light);
+		margin: 0 0 10px;
+		line-height: 1.4;
+	}
+	.hub-col-links {
+		@apply m-0 list-none p-0;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+	.hub-col-links li {
+		margin: 0;
+		list-style: none;
+	}
+	.hub-col-links a {
+		font-size: 0.857rem;
+		color: var(--color-ink-dark);
+		text-decoration: none;
+		line-height: 1.35;
+	}
+	.hub-col-links a:hover {
+		color: var(--color-blue-elastic);
+		text-decoration: underline;
+	}
+
+	/* "Even more" badge cluster under a column ------------------------- */
+	.hub-explore-more {
+		margin-top: 14px;
+	}
+	.hub-explore-more-label {
+		font-size: 0.714rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--color-ink-light);
+		margin-bottom: 8px;
+	}
+	.hub-explore-more-badges {
+		@apply m-0 list-none p-0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
 	}
-	.hub-card-sol-es {
-		border-left-color: #fec514;
+	.hub-explore-more-badges li {
+		margin: 0;
+		list-style: none;
 	}
-	.hub-card-sol-obs {
-		border-left-color: #f04e98;
+	.hub-explore-more-badges a {
+		display: inline-block;
+		font-size: 0.75rem;
+		line-height: 1.4;
+		padding: 2px 8px;
+		border-radius: 4px;
+		background: var(--color-grey-10, #f5f7fa);
+		border: 1px solid var(--color-grey-20);
+		color: var(--color-ink-dark);
+		text-decoration: none;
+		transition:
+			background 0.15s,
+			border-color 0.15s;
 	}
-	.hub-card-sol-sec {
-		border-left-color: #00bfb3;
+	.hub-explore-more-badges a:hover {
+		background: var(--color-white);
+		border-color: var(--color-grey-30);
+		color: var(--color-blue-elastic);
 	}
 
 	@media (max-width: 768px) {
@@ -471,4 +918,17 @@
 			padding: 20px;
 		}
 	}
+
+	/* Solutions grid steps down gracefully; declared after the base mobile rule
+	   so it wins over .hub-card-grid on shared elements. */
+	@media (max-width: 980px) {
+		.hub-card-grid-solutions {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+	@media (max-width: 640px) {
+		.hub-card-grid-solutions {
+			grid-template-columns: 1fr;
+		}
+	}
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
index ae7f79e478..fcb38e9bc8 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
@@ -143,6 +143,9 @@ protected override DirectiveBlock CreateFencedBlock(BlockProcessor processor)
 		if (info.IndexOf("{hero}") > 0)
 			return new HeroBlock(this, context);
 
+		if (info.IndexOf("{explore}") > 0)
+			return new ExploreBlock(this, context);
+
 		if (info.IndexOf("{card-group}") > 0)
 			return new CardGroupBlock(this, context);
 
@@ -152,8 +155,8 @@ protected override DirectiveBlock CreateFencedBlock(BlockProcessor processor)
 		if (info.IndexOf("{whats-new}") > 0)
 			return new WhatsNewBlock(this, context);
 
-		if (info.IndexOf("{intro}") > 0)
-			return new IntroBlock(this, context);
+		if (info.IndexOf("{get-started}") > 0)
+			return new GetStartedBlock(this, context);
 
 		if (info.IndexOf("{on-this-page}") > 0)
 			return new OnThisPageBlock(this, context);
@@ -254,6 +257,13 @@ public override BlockState TryContinue(BlockProcessor processor, Block block)
 		if (block is not DirectiveBlock directiveBlock)
 			return base.TryContinue(processor, block);
 
+		// Once a directive has opened a nested directive child (e.g. a {card-group}
+		// inside {explore}), an option line belongs to that inner directive, not this
+		// ancestor. Without this guard the ancestor would swallow every descendant's
+		// `:title:`/`:id:` options (last one wins), corrupting its own.
+		if (directiveBlock.LastChild is DirectiveBlock)
+			return base.TryContinue(processor, block);
+
 		var tokens = line.ToString().Split(':', 2, RemoveEmptyEntries | TrimEntries);
 		if (tokens.Length < 1)
 			return base.TryContinue(processor, block);
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
index 15478503f4..d7fe46e833 100644
--- a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
+++ b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -5,6 +5,7 @@
 using System;
 using System.Diagnostics.CodeAnalysis;
 using Elastic.Documentation.AppliesTo;
+using Elastic.Documentation.Svg;
 using Elastic.Markdown.Diagnostics;
 using Elastic.Markdown.Helpers;
 using Elastic.Markdown.Myst.CodeBlocks;
@@ -131,6 +132,9 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 			case HeroBlock heroBlock:
 				WriteHero(renderer, heroBlock);
 				return;
+			case ExploreBlock exploreBlock:
+				WriteExplore(renderer, exploreBlock);
+				return;
 			case CardGroupBlock cardGroupBlock:
 				WriteCardGroup(renderer, cardGroupBlock);
 				return;
@@ -140,8 +144,8 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 			case WhatsNewBlock whatsNewBlock:
 				WriteWhatsNew(renderer, whatsNewBlock);
 				return;
-			case IntroBlock introBlock:
-				WriteIntro(renderer, introBlock);
+			case GetStartedBlock getStartedBlock:
+				WriteGetStarted(renderer, getStartedBlock);
 				return;
 			case OnThisPageBlock onThisPageBlock:
 				WriteOnThisPage(renderer, onThisPageBlock);
@@ -424,10 +428,6 @@ private static void WriteTabSet(HtmlRenderer renderer, TabSetBlock block)
 
 	private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 	{
-		var releasesHtml = string.IsNullOrWhiteSpace(block.Releases)
-			? null
-			: RenderInlineMarkdown(block.Releases);
-
 		var descriptionHtml = string.IsNullOrWhiteSpace(block.Description)
 			? null
 			: RenderInlineMarkdown(block.Description);
@@ -439,21 +439,44 @@ private static void WriteHero(HtmlRenderer renderer, HeroBlock block)
 			IconSvg = block.IconSvg,
 			Title = block.Title,
 			DescriptionHtml = descriptionHtml,
-			ReleasesHtml = releasesHtml,
+			PrimaryActionLabel = block.PrimaryActionLabel,
+			PrimaryActionUrl = block.PrimaryActionUrl,
+			SecondaryActionLabel = block.SecondaryActionLabel,
+			SecondaryActionUrl = block.SecondaryActionUrl,
+			TertiaryActionLabel = block.TertiaryActionLabel,
+			TertiaryActionUrl = block.TertiaryActionUrl,
 			SitePathPrefix = block.Build.UrlPathPrefix
 		});
 		RenderRazorSlice(slice, renderer);
 	}
 
+	private static void WriteExplore(HtmlRenderer renderer, ExploreBlock block)
+	{
+		var slice = ExploreView.Create(new ExploreViewModel
+		{
+			DirectiveBlock = block,
+			Title = block.Title,
+			Intro = block.Intro,
+			Anchor = block.Anchor
+		});
+		RenderRazorSlice(slice, renderer);
+	}
+
 	private static void WriteCardGroup(HtmlRenderer renderer, CardGroupBlock block)
 	{
+		var explore = HubExplore.FindAncestor(block);
 		var slice = CardGroupView.Create(new CardGroupViewModel
 		{
 			DirectiveBlock = block,
 			Title = block.Title,
 			Intro = block.Intro,
 			Anchor = block.Anchor,
-			Variant = block.Variant
+			Variant = block.Variant,
+			IsAccordion = explore is not null,
+			IsOpen = explore is not null && HubExplore.IsFirstCardGroup(explore, block),
+			AccordionGroup = explore is null
+				? null
+				: string.IsNullOrWhiteSpace(explore.Anchor) ? "hub-explore" : $"hub-explore-{explore.Anchor}"
 		});
 		RenderRazorSlice(slice, renderer);
 	}
@@ -465,7 +488,8 @@ private static void WriteLinkCard(HtmlRenderer renderer, LinkCardBlock block)
 			DirectiveBlock = block,
 			Data = block.Data,
 			IconSvg = ProductIcons.Get(block.Data.Icon),
-			SitePathPrefix = block.Build.UrlPathPrefix
+			SitePathPrefix = block.Build.UrlPathPrefix,
+			IsColumn = HubExplore.FindAncestor(block) is not null
 		});
 		RenderRazorSlice(slice, renderer);
 	}
@@ -481,9 +505,57 @@ private static void WriteWhatsNew(HtmlRenderer renderer, WhatsNewBlock block)
 		RenderRazorSlice(slice, renderer);
 	}
 
-	private static void WriteIntro(HtmlRenderer renderer, IntroBlock block)
+	private static void WriteGetStarted(HtmlRenderer renderer, GetStartedBlock block)
 	{
-		var slice = IntroView.Create(new IntroViewModel { DirectiveBlock = block });
+		var data = block.Data;
+		var steps = new List<GetStartedStepViewModel>(data.Steps.Length);
+		for (var i = 0; i < data.Steps.Length; i++)
+		{
+			var step = data.Steps[i];
+			var options = new List<GetStartedOptionViewModel>(step.Options.Length);
+			foreach (var option in step.Options)
+			{
+				options.Add(new GetStartedOptionViewModel
+				{
+					Label = option.Label,
+					DescriptionHtml = string.IsNullOrWhiteSpace(option.Description)
+						? null
+						: RenderInlineMarkdown(option.Description),
+					Code = option.Code,
+					Language = option.Language,
+					Url = option.Url,
+					UrlLabel = option.UrlLabel
+				});
+			}
+
+			steps.Add(new GetStartedStepViewModel
+			{
+				Number = i + 1,
+				IconSvg = string.IsNullOrWhiteSpace(step.Icon)
+					? null
+					: EuiSvgIcons.GetIcon(step.Icon, "hub-get-started-step-icon-svg"),
+				Title = step.Title,
+				DescriptionHtml = string.IsNullOrWhiteSpace(step.Description)
+					? null
+					: RenderInlineMarkdown(step.Description),
+				Link = step.Link,
+				LinkLabel = step.LinkLabel,
+				Options = options
+			});
+		}
+
+		var slice = GetStartedView.Create(new GetStartedViewModel
+		{
+			DirectiveBlock = block,
+			Title = data.Title,
+			IntroHtml = string.IsNullOrWhiteSpace(data.Intro) ? null : RenderInlineMarkdown(data.Intro),
+			InstallCode = data.Install?.Code,
+			InstallLanguage = data.Install?.Language,
+			TutorialLabel = data.Tutorial?.Label,
+			TutorialUrl = data.Tutorial?.Url,
+			Steps = steps,
+			SitePathPrefix = block.Build.UrlPathPrefix
+		});
 		RenderRazorSlice(slice, renderer);
 	}
 
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
index 28f9d6cc86..44a39ede04 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupView.cshtml
@@ -1,15 +1,39 @@
 @inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.CardGroupViewModel>
 
-@if (!string.IsNullOrWhiteSpace(Model.Title))
+@if (Model.IsAccordion)
 {
-	<div class="hub-zone" id="@Model.Anchor">
-		<h2 class="hub-zone-title">@Model.Title</h2>
-		@if (!string.IsNullOrWhiteSpace(Model.Intro))
-		{
-			<p class="hub-zone-intro">@Model.Intro</p>
-		}
-	</div>
+	<details class="hub-accordion"@(string.IsNullOrWhiteSpace(Model.AccordionGroup) ? "" : $" name={Model.AccordionGroup}")@(string.IsNullOrWhiteSpace(Model.Anchor) ? "" : $" id={Model.Anchor}")@(Model.IsOpen ? " open" : "")>
+		<summary class="hub-accordion-summary">
+			<span class="hub-accordion-title">@Model.Title</span>
+			<svg class="hub-accordion-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path d="M3 8h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+				<path class="hub-accordion-icon-v" d="M8 3v10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+			</svg>
+		</summary>
+		<div class="hub-accordion-body">
+			@if (!string.IsNullOrWhiteSpace(Model.Intro))
+			{
+				<p class="hub-accordion-intro">@Model.Intro</p>
+			}
+			<ul class="hub-explore-cols">
+				@Model.RenderBlock()
+			</ul>
+		</div>
+	</details>
+}
+else
+{
+	@if (!string.IsNullOrWhiteSpace(Model.Title))
+	{
+		<div class="hub-zone" id="@Model.Anchor">
+			<h2 class="hub-zone-title">@Model.Title</h2>
+			@if (!string.IsNullOrWhiteSpace(Model.Intro))
+			{
+				<p class="hub-zone-intro">@Model.Intro</p>
+			}
+		</div>
+	}
+	<ul class="hub-card-grid@(Model.Variant == "solutions" ? " hub-card-grid-solutions" : "")">
+		@Model.RenderBlock()
+	</ul>
 }
-<ul class="hub-card-grid">
-	@Model.RenderBlock()
-</ul>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs
index d75d8716ac..105c82e821 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/CardGroupViewModel.cs
@@ -10,4 +10,16 @@ public class CardGroupViewModel : DirectiveViewModel
 	public required string? Intro { get; init; }
 	public required string? Anchor { get; init; }
 	public required string? Variant { get; init; }
+
+	/// <summary>Rendered as a collapsible accordion group inside an {explore} section.</summary>
+	public bool IsAccordion { get; init; }
+
+	/// <summary>The accordion is expanded by default (the first group in an Explore stack).</summary>
+	public bool IsOpen { get; init; }
+
+	/// <summary>
+	/// Shared &lt;details name&gt; group so the accordions open exclusively: expanding one
+	/// collapses the others in the same Explore section.
+	/// </summary>
+	public string? AccordionGroup { get; init; }
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/ExploreBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/ExploreBlock.cs
new file mode 100644
index 0000000000..781e343107
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/ExploreBlock.cs
@@ -0,0 +1,49 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Elastic.Markdown.Diagnostics;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// The "Explore {product}" hub section: a titled band that houses a stack of
+/// <see cref="CardGroupBlock"/> children rendered as collapsible accordion groups.
+/// Nested card-groups and their link-cards detect this ancestor and switch to
+/// their accordion/column rendering.
+/// </summary>
+/// <example>
+/// <code>
+/// :::::{explore}
+/// :title: Explore Kibana
+/// :intro: Explore the apps and capabilities that help you act on your data.
+///
+/// ::::{card-group}
+/// :title: Install & admin
+/// ... link-cards ...
+/// ::::
+/// :::::
+/// </code>
+/// </example>
+public class ExploreBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "explore";
+
+	public string? Title { get; private set; }
+	public string? Intro { get; private set; }
+	public string? Anchor { get; private set; }
+
+	public override void FinalizeAndValidate(ParserContext context)
+	{
+		Title = Prop("title");
+		Intro = Prop("intro");
+		Anchor = Prop("id");
+
+		if (string.IsNullOrWhiteSpace(Title))
+			this.EmitError("{explore} requires a `:title:` option.");
+	}
+
+	public override IEnumerable<string> GeneratedAnchors =>
+		string.IsNullOrWhiteSpace(Anchor) ? [] : [Anchor];
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/ExploreView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/ExploreView.cshtml
new file mode 100644
index 0000000000..799ac3141f
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/ExploreView.cshtml
@@ -0,0 +1,12 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.ExploreViewModel>
+
+<div class="hub-zone" @(string.IsNullOrWhiteSpace(Model.Anchor) ? "" : $"id={Model.Anchor}")>
+	<h2 class="hub-zone-title">@Model.Title</h2>
+	@if (!string.IsNullOrWhiteSpace(Model.Intro))
+	{
+		<p class="hub-zone-intro">@Model.Intro</p>
+	}
+</div>
+<div class="hub-explore">
+	@Model.RenderBlock()
+</div>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/ExploreViewModel.cs
similarity index 56%
rename from src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs
rename to src/Elastic.Markdown/Myst/Directives/Hub/ExploreViewModel.cs
index f639218cea..77415c609f 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/IntroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/ExploreViewModel.cs
@@ -4,4 +4,9 @@
 
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
-public class IntroViewModel : DirectiveViewModel;
+public class ExploreViewModel : DirectiveViewModel
+{
+	public required string? Title { get; init; }
+	public required string? Intro { get; init; }
+	public required string? Anchor { get; init; }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedBlock.cs
new file mode 100644
index 0000000000..17daa09835
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedBlock.cs
@@ -0,0 +1,162 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Elastic.Markdown.Diagnostics;
+using YamlDotNet.Core;
+using YamlDotNet.Serialization;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// The first hub-body section: a short onboarding funnel with an intro line, an
+/// optional install snippet, an optional tutorial link, and a set of numbered
+/// steps. The schema is YAML-formatted in the directive body for predictable
+/// structure.
+/// </summary>
+/// <example>
+/// <code>
+/// :::{get-started}
+/// title: Get started in 3 steps
+/// intro: Spin up Kibana, connect your data, and start exploring in minutes.
+/// install:
+///   code: curl -fsSL https://elastic.co/start-local | sh
+///   language: sh
+/// tutorial:
+///   label: Tutorial
+///   url: /deploy-manage/deploy/self-managed
+/// steps:
+///   - icon: launch
+///     title: Run Kibana
+///     description: Start locally, run in Docker, or open a free Cloud trial.
+/// :::
+/// </code>
+/// </example>
+public class GetStartedBlock(DirectiveBlockParser parser, ParserContext context)
+	: DirectiveBlock(parser, context)
+{
+	public override string Directive => "get-started";
+
+	public GetStartedData Data { get; private set; } = GetStartedData.Empty;
+
+	public override void FinalizeAndValidate(ParserContext context)
+	{
+		var yaml = HubYamlBody.Extract(this, new BuildContextFileReader(Build.ReadFileSystem));
+		if (yaml is null)
+		{
+			this.EmitError("{get-started} requires a YAML body. See the get-started directive docs.");
+			return;
+		}
+
+		try
+		{
+			Data = YamlSerialization.Deserialize<GetStartedData>(yaml, Build.ProductsConfiguration) ?? GetStartedData.Empty;
+		}
+		catch (YamlException ex)
+		{
+			this.EmitError($"{{get-started}} YAML parse error: {ex.Message}");
+			return;
+		}
+
+		if (string.IsNullOrWhiteSpace(Data.Title))
+			this.EmitError("{get-started} requires a `title` field in its YAML body.");
+
+		if (Data.Tutorial is { } tutorial)
+			tutorial.Url = HubLinkValidator.ValidateAndResolve(tutorial.Url, this, context);
+
+		foreach (var step in Data.Steps)
+		{
+			if (!string.IsNullOrWhiteSpace(step.Link))
+				step.Link = HubLinkValidator.ValidateAndResolve(step.Link, this, context);
+			foreach (var option in step.Options)
+				option.Url = HubLinkValidator.ValidateAndResolve(option.Url, this, context);
+		}
+	}
+}
+
+[YamlSerializable]
+public record GetStartedData
+{
+	[YamlMember(Alias = "title")]
+	public string? Title { get; set; }
+
+	[YamlMember(Alias = "intro")]
+	public string? Intro { get; set; }
+
+	[YamlMember(Alias = "install")]
+	public GetStartedInstall? Install { get; set; }
+
+	[YamlMember(Alias = "tutorial")]
+	public GetStartedTutorial? Tutorial { get; set; }
+
+	[YamlMember(Alias = "steps")]
+	public GetStartedStep[] Steps { get; set; } = [];
+
+	public static GetStartedData Empty { get; } = new();
+}
+
+[YamlSerializable]
+public record GetStartedInstall
+{
+	[YamlMember(Alias = "code")]
+	public string? Code { get; set; }
+
+	[YamlMember(Alias = "language")]
+	public string? Language { get; set; }
+}
+
+[YamlSerializable]
+public record GetStartedTutorial
+{
+	[YamlMember(Alias = "label")]
+	public string? Label { get; set; }
+
+	[YamlMember(Alias = "url")]
+	public string? Url { get; set; }
+}
+
+[YamlSerializable]
+public record GetStartedStep
+{
+	[YamlMember(Alias = "icon")]
+	public string? Icon { get; set; }
+
+	[YamlMember(Alias = "title")]
+	public string? Title { get; set; }
+
+	[YamlMember(Alias = "description")]
+	public string? Description { get; set; }
+
+	/// <summary>When set, the whole step card links here.</summary>
+	[YamlMember(Alias = "link")]
+	public string? Link { get; set; }
+
+	[YamlMember(Alias = "link-label")]
+	public string? LinkLabel { get; set; }
+
+	/// <summary>Two-or-more equally-weighted start options rendered side by side.</summary>
+	[YamlMember(Alias = "options")]
+	public GetStartedStepOption[] Options { get; set; } = [];
+}
+
+[YamlSerializable]
+public record GetStartedStepOption
+{
+	[YamlMember(Alias = "label")]
+	public string? Label { get; set; }
+
+	[YamlMember(Alias = "description")]
+	public string? Description { get; set; }
+
+	[YamlMember(Alias = "code")]
+	public string? Code { get; set; }
+
+	[YamlMember(Alias = "language")]
+	public string? Language { get; set; }
+
+	[YamlMember(Alias = "url")]
+	public string? Url { get; set; }
+
+	[YamlMember(Alias = "url-label")]
+	public string? UrlLabel { get; set; }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedView.cshtml
new file mode 100644
index 0000000000..ef84708220
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedView.cshtml
@@ -0,0 +1,136 @@
+@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.GetStartedViewModel>
+
+<section class="hub-get-started" id="get-started">
+	<div class="hub-get-started-lead">
+		@if (!string.IsNullOrWhiteSpace(Model.Title))
+		{
+			<h2 class="hub-get-started-title">@Model.Title</h2>
+		}
+		@if (!string.IsNullOrWhiteSpace(Model.IntroHtml))
+		{
+			<p class="hub-get-started-intro">@(new HtmlString(Model.IntroHtml))</p>
+		}
+		@if (!string.IsNullOrWhiteSpace(Model.InstallCode) || !string.IsNullOrWhiteSpace(Model.TutorialUrl))
+		{
+			<div class="hub-get-started-actions">
+				@if (!string.IsNullOrWhiteSpace(Model.InstallCode))
+				{
+					<div class="hub-get-started-install highlight">
+						<pre><code class="language-@(Model.InstallLanguage ?? "text")">@Model.InstallCode</code></pre>
+					</div>
+				}
+				@if (!string.IsNullOrWhiteSpace(Model.TutorialUrl))
+				{
+					<a class="hub-get-started-tutorial" href="@Model.PrefixUrl(Model.TutorialUrl)" hx-boost="false">
+						<span>@(string.IsNullOrWhiteSpace(Model.TutorialLabel) ? "Tutorial" : Model.TutorialLabel)</span>
+						<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+							<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+						</svg>
+					</a>
+				}
+			</div>
+		}
+	</div>
+
+	@if (Model.Steps.Count > 0)
+	{
+		<ol class="hub-get-started-steps">
+			@foreach (var step in Model.Steps)
+			{
+				@if (step.Options.Count > 0)
+				{
+					<li class="hub-get-started-step hub-get-started-step-wide">
+						<div class="hub-get-started-step-head">
+							<span class="hub-get-started-step-num" aria-hidden="true">@step.Number.ToString("D2")</span>
+							@if (!string.IsNullOrWhiteSpace(step.Title))
+							{
+								<h3 class="hub-get-started-step-title">@step.Title</h3>
+							}
+						</div>
+						@if (!string.IsNullOrWhiteSpace(step.DescriptionHtml))
+						{
+							<p class="hub-get-started-step-desc">@(new HtmlString(step.DescriptionHtml))</p>
+						}
+						<div class="hub-get-started-options">
+							@foreach (var option in step.Options)
+							{
+								<div class="hub-get-started-option">
+									@if (!string.IsNullOrWhiteSpace(option.Label))
+									{
+										<span class="hub-get-started-option-label">@option.Label</span>
+									}
+									@if (!string.IsNullOrWhiteSpace(option.DescriptionHtml))
+									{
+										<p class="hub-get-started-option-desc">@(new HtmlString(option.DescriptionHtml))</p>
+									}
+									@if (!string.IsNullOrWhiteSpace(option.Code))
+									{
+										<div class="hub-get-started-install highlight">
+											<pre><code class="language-@(option.Language ?? "text")">@option.Code</code></pre>
+										</div>
+									}
+									@if (!string.IsNullOrWhiteSpace(option.Url))
+									{
+										@if (!string.IsNullOrWhiteSpace(option.Code))
+										{
+											<a class="hub-get-started-option-link" href="@Model.PrefixUrl(option.Url)" hx-boost="false">
+												<span>@(string.IsNullOrWhiteSpace(option.UrlLabel) ? "Learn more" : option.UrlLabel)</span>
+												<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+													<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+												</svg>
+											</a>
+										}
+										else
+										{
+											<a class="hub-get-started-option-btn" href="@Model.PrefixUrl(option.Url)" hx-boost="false">@(string.IsNullOrWhiteSpace(option.UrlLabel) ? "Get started" : option.UrlLabel)</a>
+										}
+									}
+								</div>
+							}
+						</div>
+					</li>
+				}
+				else if (!string.IsNullOrWhiteSpace(step.Link))
+				{
+					<li class="hub-get-started-step hub-get-started-step-link">
+						<a class="hub-get-started-step-anchor" href="@Model.PrefixUrl(step.Link)" hx-boost="false">
+							<div class="hub-get-started-step-head">
+								<span class="hub-get-started-step-num" aria-hidden="true">@step.Number.ToString("D2")</span>
+								@if (!string.IsNullOrWhiteSpace(step.Title))
+								{
+									<h3 class="hub-get-started-step-title">@step.Title</h3>
+								}
+							</div>
+							@if (!string.IsNullOrWhiteSpace(step.DescriptionHtml))
+							{
+								<p class="hub-get-started-step-desc">@(new HtmlString(step.DescriptionHtml))</p>
+							}
+							<span class="hub-get-started-step-arrow" aria-hidden="true">
+								<span>@(string.IsNullOrWhiteSpace(step.LinkLabel) ? "Open" : step.LinkLabel)</span>
+								<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+									<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+								</svg>
+							</span>
+						</a>
+					</li>
+				}
+				else
+				{
+					<li class="hub-get-started-step">
+						<div class="hub-get-started-step-head">
+							<span class="hub-get-started-step-num" aria-hidden="true">@step.Number.ToString("D2")</span>
+							@if (!string.IsNullOrWhiteSpace(step.Title))
+							{
+								<h3 class="hub-get-started-step-title">@step.Title</h3>
+							}
+						</div>
+						@if (!string.IsNullOrWhiteSpace(step.DescriptionHtml))
+						{
+							<p class="hub-get-started-step-desc">@(new HtmlString(step.DescriptionHtml))</p>
+						}
+					</li>
+				}
+			}
+		</ol>
+	}
+</section>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedViewModel.cs
new file mode 100644
index 0000000000..cbd175c111
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/GetStartedViewModel.cs
@@ -0,0 +1,39 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+public class GetStartedViewModel : DirectiveViewModel
+{
+	public required string? Title { get; init; }
+	public required string? IntroHtml { get; init; }
+	public required string? InstallCode { get; init; }
+	public required string? InstallLanguage { get; init; }
+	public required string? TutorialLabel { get; init; }
+	public required string? TutorialUrl { get; init; }
+	public required IReadOnlyList<GetStartedStepViewModel> Steps { get; init; }
+	public required string? SitePathPrefix { get; init; }
+	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
+}
+
+public sealed record GetStartedStepViewModel
+{
+	public required int Number { get; init; }
+	public required string? IconSvg { get; init; }
+	public required string? Title { get; init; }
+	public required string? DescriptionHtml { get; init; }
+	public required string? Link { get; init; }
+	public required string? LinkLabel { get; init; }
+	public required IReadOnlyList<GetStartedOptionViewModel> Options { get; init; }
+}
+
+public sealed record GetStartedOptionViewModel
+{
+	public required string? Label { get; init; }
+	public required string? DescriptionHtml { get; init; }
+	public required string? Code { get; init; }
+	public required string? Language { get; init; }
+	public required string? Url { get; init; }
+	public required string? UrlLabel { get; init; }
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
index afc69e08ae..582a85a930 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroBlock.cs
@@ -2,26 +2,29 @@
 // Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
 // See the LICENSE file in the project root for more information
 
+using System.Text.RegularExpressions;
 using Elastic.Markdown.Diagnostics;
 
 namespace Elastic.Markdown.Myst.Directives.Hub;
 
 /// <summary>
-/// Renders a full-bleed page hero with product icon, title, description, and an
-/// optional release-status line. All content is supplied via options -- the body
-/// is unused.
+/// Renders a full-bleed page hero with a product icon, title, description, and
+/// up to three call-to-action buttons. All content is supplied via options -- the
+/// body is unused. Release cadence lives in {whats-new}.
 /// </summary>
 /// <example>
 /// <code>
 /// :::{hero}
 /// :icon: kibana
-/// :title: Kibana
+/// :title: Kibana documentation hub
 /// :description: The UI for the Elasticsearch platform.
-/// :releases: Latest&#58; [Stack 9.4.1](/rn) (Mar 28, 2026)
+/// :primary-action: [Get started](#get-started)
+/// :secondary-action: [What's new](#whats-new)
+/// :tertiary-action: [Explore Kibana docs](#explore)
 /// :::
 /// </code>
 /// </example>
-public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
+public partial class HeroBlock(DirectiveBlockParser parser, ParserContext context)
 	: DirectiveBlock(parser, context)
 {
 	public override string Directive => "hero";
@@ -30,7 +33,12 @@ public class HeroBlock(DirectiveBlockParser parser, ParserContext context)
 	public string? IconSvg { get; private set; }
 	public string? Title { get; private set; }
 	public string? Description { get; private set; }
-	public string? Releases { get; private set; }
+	public string? PrimaryActionLabel { get; private set; }
+	public string? PrimaryActionUrl { get; private set; }
+	public string? SecondaryActionLabel { get; private set; }
+	public string? SecondaryActionUrl { get; private set; }
+	public string? TertiaryActionLabel { get; private set; }
+	public string? TertiaryActionUrl { get; private set; }
 
 	public override void FinalizeAndValidate(ParserContext context)
 	{
@@ -38,9 +46,24 @@ public override void FinalizeAndValidate(ParserContext context)
 		IconSvg = ProductIcons.Get(Icon);
 		Title = Prop("title");
 		Description = Prop("description");
-		Releases = Prop("releases");
+		(PrimaryActionLabel, PrimaryActionUrl) = ParseAction(Prop("primary-action"));
+		(SecondaryActionLabel, SecondaryActionUrl) = ParseAction(Prop("secondary-action"));
+		(TertiaryActionLabel, TertiaryActionUrl) = ParseAction(Prop("tertiary-action"));
 
 		if (string.IsNullOrWhiteSpace(Title))
 			this.EmitError("{hero} requires a `:title:` option.");
 	}
+
+	private static (string? Label, string? Url) ParseAction(string? value)
+	{
+		if (string.IsNullOrWhiteSpace(value))
+			return (null, null);
+		var match = MarkdownLink().Match(value.Trim());
+		return match.Success
+			? (match.Groups["label"].Value.Trim(), match.Groups["url"].Value.Trim())
+			: (null, null);
+	}
+
+	[GeneratedRegex(@"^\[(?<label>[^\]]+)\]\((?<url>[^)]+)\)$")]
+	private static partial Regex MarkdownLink();
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
index 9e49b87a07..3b99f94178 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroView.cshtml
@@ -2,18 +2,14 @@
 
 <section class="hub-hero">
 	<div class="hub-hero-inner">
-		@if (!string.IsNullOrWhiteSpace(Model.Title))
-		{
-			<div class="hub-hero-eyebrow">
-				<span class="hub-hero-eyebrow-label">Find all docs about @Model.Title</span>
-				<a class="hub-hero-eyebrow-link" href="@Model.PrefixUrl("/")" hx-boost="false">
-					<span>Browse all Elastic docs</span>
-					<svg class="hub-hero-eyebrow-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-						<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-					</svg>
-				</a>
-			</div>
-		}
+		<div class="hub-hero-eyebrow">
+			<a class="hub-hero-eyebrow-link" href="@Model.PrefixUrl("/")" hx-boost="false">
+				<span>Browse all Elastic docs</span>
+				<svg class="hub-hero-eyebrow-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</a>
+		</div>
 		<div class="hub-hero-top">
 			@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
 			{
@@ -25,18 +21,30 @@
 			{
 				<span class="hub-hero-icon" aria-hidden="true">@Elastic.Markdown.Myst.Directives.Hub.ProductIcons.Initials(Model.IconKey)</span>
 			}
-			<div class="hub-hero-title">
-				<h1>@Model.Title</h1>
-				@if (!string.IsNullOrWhiteSpace(Model.DescriptionHtml))
-				{
-					<p>@(new HtmlString(Model.DescriptionHtml))</p>
-				}
-			</div>
+			<h1>@Model.Title</h1>
 		</div>
 
-		@if (!string.IsNullOrWhiteSpace(Model.ReleasesHtml))
+		@if (!string.IsNullOrWhiteSpace(Model.DescriptionHtml))
 		{
-			<p class="hub-hero-releases">@(new HtmlString(Model.ReleasesHtml))</p>
+			<p class="hub-hero-desc">@(new HtmlString(Model.DescriptionHtml))</p>
+		}
+
+		@if (Model.Actions.Count > 0)
+		{
+			<div class="hub-hero-actions">
+				@foreach (var action in Model.Actions)
+				{
+					<a class="hub-hero-action @(action.IsPrimary ? "hub-hero-action-primary" : "hub-hero-action-secondary")" href="@Model.PrefixUrl(action.Url)" hx-boost="false">
+						<span>@action.Label</span>
+						@if (action.IsAnchor)
+						{
+							<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+								<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+							</svg>
+						}
+					</a>
+				}
+			</div>
 		}
 	</div>
 </section>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
index 800422b73d..9b36060e3c 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HeroViewModel.cs
@@ -10,7 +10,32 @@ public class HeroViewModel : DirectiveViewModel
 	public required string? IconSvg { get; init; }
 	public required string? Title { get; init; }
 	public required string? DescriptionHtml { get; init; }
-	public required string? ReleasesHtml { get; init; }
+	public required string? PrimaryActionLabel { get; init; }
+	public required string? PrimaryActionUrl { get; init; }
+	public required string? SecondaryActionLabel { get; init; }
+	public required string? SecondaryActionUrl { get; init; }
+	public required string? TertiaryActionLabel { get; init; }
+	public required string? TertiaryActionUrl { get; init; }
 	public required string? SitePathPrefix { get; init; }
 	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
+
+	public IReadOnlyList<HeroAction> Actions
+	{
+		get
+		{
+			var actions = new List<HeroAction>(3);
+			Add(actions, PrimaryActionLabel, PrimaryActionUrl, isPrimary: true);
+			Add(actions, SecondaryActionLabel, SecondaryActionUrl, isPrimary: false);
+			Add(actions, TertiaryActionLabel, TertiaryActionUrl, isPrimary: false);
+			return actions;
+		}
+	}
+
+	private static void Add(List<HeroAction> actions, string? label, string? url, bool isPrimary)
+	{
+		if (!string.IsNullOrWhiteSpace(label) && !string.IsNullOrWhiteSpace(url))
+			actions.Add(new HeroAction(label, url, isPrimary, url[0] == '#'));
+	}
 }
+
+public sealed record HeroAction(string Label, string Url, bool IsPrimary, bool IsAnchor);
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/HubExplore.cs b/src/Elastic.Markdown/Myst/Directives/Hub/HubExplore.cs
new file mode 100644
index 0000000000..602a759bd8
--- /dev/null
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/HubExplore.cs
@@ -0,0 +1,36 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Markdig.Syntax;
+
+namespace Elastic.Markdown.Myst.Directives.Hub;
+
+/// <summary>
+/// Helpers for the "Explore {product}" section. Nested card-groups and link-cards
+/// switch to their accordion/column rendering when they sit inside an
+/// <see cref="ExploreBlock"/>, detected by walking the Markdig parent chain.
+/// </summary>
+internal static class HubExplore
+{
+	public static ExploreBlock? FindAncestor(Block? block)
+	{
+		for (var parent = block?.Parent; parent is not null; parent = parent.Parent)
+		{
+			if (parent is ExploreBlock explore)
+				return explore;
+		}
+		return null;
+	}
+
+	/// <summary>The first accordion in an Explore stack is expanded by default.</summary>
+	public static bool IsFirstCardGroup(ExploreBlock explore, CardGroupBlock card)
+	{
+		foreach (var child in explore)
+		{
+			if (child is CardGroupBlock candidate)
+				return ReferenceEquals(candidate, card);
+		}
+		return false;
+	}
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs
deleted file mode 100644
index e6f350dfd6..0000000000
--- a/src/Elastic.Markdown/Myst/Directives/Hub/IntroBlock.cs
+++ /dev/null
@@ -1,26 +0,0 @@
-// Licensed to Elasticsearch B.V under one or more agreements.
-// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
-// See the LICENSE file in the project root for more information
-
-namespace Elastic.Markdown.Myst.Directives.Hub;
-
-/// <summary>
-/// A small "getting started" callout panel shown between the hero and the first
-/// section. The body is rendered as inline markdown so authors can use bold,
-/// links, and emphasis. Visually a white rounded panel with a teal accent bar.
-/// </summary>
-/// <example>
-/// <code>
-/// :::{intro}
-/// **New to Kibana?** [Learn data exploration and visualization](/learn), a hands-on
-/// walk-through of Discover, ES|QL, visualizations, and dashboards.
-/// :::
-/// </code>
-/// </example>
-public class IntroBlock(DirectiveBlockParser parser, ParserContext context)
-	: DirectiveBlock(parser, context)
-{
-	public override string Directive => "intro";
-
-	public override void FinalizeAndValidate(ParserContext context) { }
-}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml
deleted file mode 100644
index 8f47ae9ee9..0000000000
--- a/src/Elastic.Markdown/Myst/Directives/Hub/IntroView.cshtml
+++ /dev/null
@@ -1,5 +0,0 @@
-@inherits RazorSlice<Elastic.Markdown.Myst.Directives.Hub.IntroViewModel>
-
-<aside class="hub-intro">
-	@Model.RenderBlock()
-</aside>
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
index 2ff734685b..e1b54bdfa9 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardView.cshtml
@@ -2,18 +2,12 @@
 
 @{
 	var d = Model.Data;
-	var classes = "hub-card";
-	if (!string.IsNullOrWhiteSpace(d.Variant))
-		classes += " hub-card-sol hub-card-sol-" + d.Variant;
 }
 
-<li class="@classes">
-	<div class="hub-card-head">
-		@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
-		{
-			<span class="hub-card-icon">@(new HtmlString(Model.IconSvg))</span>
-		}
-		<h3 class="hub-card-title">
+@if (Model.IsColumn)
+{
+	<li class="hub-col">
+		<h3 class="hub-col-title">
 			@if (!string.IsNullOrWhiteSpace(d.Link))
 			{
 				<a href="@Model.PrefixUrl(d.Link)" hx-boost="false">@d.Title</a>
@@ -23,45 +17,100 @@
 				@d.Title
 			}
 		</h3>
-	</div>
 
-	@if (!string.IsNullOrWhiteSpace(d.Description))
-	{
-		<p class="hub-card-desc">@d.Description</p>
-	}
+		@if (d.Links.Length > 0)
+		{
+			<ul class="hub-col-links">
+				@foreach (var link in d.Links)
+				{
+					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+						continue;
+					<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
+				}
+			</ul>
+		}
 
-	@if (d.Links.Length > 0)
-	{
-		<ul class="hub-card-links">
-			@foreach (var link in d.Links)
-			{
-				if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
-					continue;
-				<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
-			}
-		</ul>
-	}
+		@if (d.Aside is { } aside && aside.Links.Length > 0)
+		{
+			<div class="hub-explore-more">
+				@if (!string.IsNullOrWhiteSpace(aside.Label))
+				{
+					<div class="hub-explore-more-label">@aside.Label</div>
+				}
+				<ul class="hub-explore-more-badges">
+					@foreach (var link in aside.Links)
+					{
+						if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+							continue;
+						<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
+					}
+				</ul>
+			</div>
+		}
+	</li>
+}
+else
+{
+	var classes = "hub-card";
+	if (!string.IsNullOrWhiteSpace(d.Variant))
+		classes += " hub-card-sol hub-card-sol-" + d.Variant;
 
-	@if (d.Aside is { } aside && aside.Links.Length > 0)
-	{
-		<div class="hub-card-aside">
-			@if (!string.IsNullOrWhiteSpace(aside.Label))
+	<li class="@classes">
+		<div class="hub-card-head">
+			@if (!string.IsNullOrWhiteSpace(Model.IconSvg))
 			{
-				<div class="hub-card-aside-label">@aside.Label</div>
+				<span class="hub-card-icon">@(new HtmlString(Model.IconSvg))</span>
 			}
-			<div class="hub-card-aside-links">
-				@for (var i = 0; i < aside.Links.Length; i++)
+			<h3 class="hub-card-title">
+				@if (!string.IsNullOrWhiteSpace(d.Link))
+				{
+					<a href="@Model.PrefixUrl(d.Link)" hx-boost="false">@d.Title</a>
+				}
+				else
+				{
+					@d.Title
+				}
+			</h3>
+		</div>
+
+		@if (!string.IsNullOrWhiteSpace(d.Description))
+		{
+			<p class="hub-card-desc">@d.Description</p>
+		}
+
+		@if (d.Links.Length > 0)
+		{
+			<ul class="hub-card-links">
+				@foreach (var link in d.Links)
 				{
-					var link = aside.Links[i];
 					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
 						continue;
-					<a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a>
-					@if (i < aside.Links.Length - 1)
+					<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a></li>
+				}
+			</ul>
+		}
+
+		@if (d.Aside is { } aside && aside.Links.Length > 0)
+		{
+			<div class="hub-card-aside">
+				@if (!string.IsNullOrWhiteSpace(aside.Label))
+				{
+					<div class="hub-card-aside-label">@aside.Label</div>
+				}
+				<div class="hub-card-aside-links">
+					@for (var i = 0; i < aside.Links.Length; i++)
 					{
-						<span class="hub-card-aside-sep" aria-hidden="true">·</span>
+						var link = aside.Links[i];
+						if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+							continue;
+						<a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a>
+						@if (i < aside.Links.Length - 1)
+						{
+							<span class="hub-card-aside-sep" aria-hidden="true">·</span>
+						}
 					}
-				}
+				</div>
 			</div>
-		</div>
-	}
-</li>
+		}
+	</li>
+}
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
index 1ceea4bc45..78431f4190 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/LinkCardViewModel.cs
@@ -9,5 +9,9 @@ public class LinkCardViewModel : DirectiveViewModel
 	public required LinkCardData Data { get; init; }
 	public required string? IconSvg { get; init; }
 	public required string? SitePathPrefix { get; init; }
+
+	/// <summary>Rendered as a titled link column inside an {explore} accordion.</summary>
+	public bool IsColumn { get; init; }
+
 	public string? PrefixUrl(string? url) => HubUrl.Prefix(url, SitePathPrefix);
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
index cf271a5ba8..5e4eb13ddd 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewBlock.cs
@@ -77,6 +77,8 @@ private void ValidateLinks(ParserContext context)
 	{
 		foreach (var link in Data.ReleaseLinks)
 			link.Url = HubLinkValidator.ValidateAndResolve(link.Url, this, context);
+		if (Data.UpgradeLink is { } upgrade)
+			upgrade.Url = HubLinkValidator.ValidateAndResolve(upgrade.Url, this, context);
 		foreach (var item in Data.Items)
 			item.Link = HubLinkValidator.ValidateAndResolve(item.Link, this, context);
 	}
@@ -125,12 +127,18 @@ public record WhatsNewData
 	[YamlMember(Alias = "id")]
 	public string? Id { get; set; }
 
+	[YamlMember(Alias = "intro")]
+	public string? Intro { get; set; }
+
 	[YamlMember(Alias = "badge")]
 	public string? Badge { get; set; } = "New";
 
 	[YamlMember(Alias = "release-links")]
 	public LinkCardLink[] ReleaseLinks { get; set; } = [];
 
+	[YamlMember(Alias = "upgrade-link")]
+	public LinkCardLink? UpgradeLink { get; set; }
+
 	[YamlMember(Alias = "items")]
 	public WhatsNewItem[] Items { get; set; } = [];
 
@@ -151,4 +159,16 @@ public record WhatsNewItem
 
 	[YamlMember(Alias = "meta")]
 	public string? Meta { get; set; }
+
+	[YamlMember(Alias = "date")]
+	public string? Date { get; set; }
+
+	[YamlMember(Alias = "tag")]
+	public string? Tag { get; set; }
+
+	[YamlMember(Alias = "badge")]
+	public string? Badge { get; set; }
+
+	[YamlMember(Alias = "featured")]
+	public bool Featured { get; set; }
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
index b5b1dcef23..07ac230fe2 100644
--- a/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
+++ b/src/Elastic.Markdown/Myst/Directives/Hub/WhatsNewView.cshtml
@@ -2,69 +2,106 @@
 
 @{
 	var d = Model.Data;
+	var upgrade = d.UpgradeLink;
+	var hasUpgrade = upgrade is not null && !string.IsNullOrWhiteSpace(upgrade.Url) && !string.IsNullOrWhiteSpace(upgrade.Label);
 }
 
 <section class="hub-whats-new" id="@d.Id">
 	<header class="hub-wn-header">
-		@if (!string.IsNullOrWhiteSpace(d.Badge))
-		{
-			<span class="hub-wn-badge">@d.Badge</span>
-		}
-		@if (!string.IsNullOrWhiteSpace(d.Title))
-		{
-			<span class="hub-wn-title">@d.Title</span>
-		}
+		<div class="hub-wn-heading">
+			@if (!string.IsNullOrWhiteSpace(d.Title))
+			{
+				<h2 class="hub-wn-title">@d.Title</h2>
+			}
+			@if (!string.IsNullOrWhiteSpace(d.Intro))
+			{
+				<p class="hub-wn-intro">@d.Intro</p>
+			}
+		</div>
 		@if (d.ReleaseLinks.Length > 0)
 		{
-			<span class="hub-wn-rn-links">
-				<span class="hub-wn-rn-label">Release notes:</span>
-				@for (var i = 0; i < d.ReleaseLinks.Length; i++)
-				{
-					var link = d.ReleaseLinks[i];
-					if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
-						continue;
-					<a href="@Model.PrefixUrl(link.Url)" hx-boost="false">@link.Label</a>
-					@if (i < d.ReleaseLinks.Length - 1)
+			<div class="hub-wn-rn">
+				<span class="hub-wn-rn-label">Latest release notes:</span>
+				<ul class="hub-wn-rn-list">
+					@foreach (var link in d.ReleaseLinks)
 					{
-						<span class="hub-wn-rn-sep" aria-hidden="true">·</span>
+						if (string.IsNullOrWhiteSpace(link.Url) || string.IsNullOrWhiteSpace(link.Label))
+						{
+							continue;
+						}
+						<li><a href="@Model.PrefixUrl(link.Url)" hx-boost="false" class="hub-wn-rn-link">@link.Label</a></li>
 					}
-				}
-			</span>
+				</ul>
+			</div>
 		}
 	</header>
+
 	@if (d.Items.Length > 0)
 	{
-		<ul class="hub-wn-items">
+		<ul class="hub-wn-grid">
 			@foreach (var item in d.Items)
 			{
 				if (string.IsNullOrWhiteSpace(item.Title))
+				{
 					continue;
-				<li class="hub-wn-item">
+				}
+				var cardClass = item.Featured ? "hub-wn-card hub-wn-card-featured" : "hub-wn-card";
+				<li class="@cardClass">
 					@if (!string.IsNullOrWhiteSpace(item.Link))
 					{
-						<a href="@Model.PrefixUrl(item.Link)" hx-boost="false" class="hub-wn-item-link">
-							<strong class="hub-wn-item-title">@item.Title</strong>
+						<a href="@Model.PrefixUrl(item.Link)" hx-boost="false" class="hub-wn-card-link">
+							<div class="hub-wn-card-meta">
+								<span class="hub-wn-card-meta-left">
+									@if (!string.IsNullOrWhiteSpace(item.Badge))
+									{
+										<span class="hub-wn-card-badge">@item.Badge</span>
+									}
+									@if (!string.IsNullOrWhiteSpace(item.Date))
+									{
+										<span class="hub-wn-card-date">@item.Date</span>
+									}
+								</span>
+								@if (!string.IsNullOrWhiteSpace(item.Tag))
+								{
+									<span class="hub-wn-card-tag">@item.Tag</span>
+								}
+							</div>
+							<h3 class="hub-wn-card-title">@item.Title</h3>
 							@if (!string.IsNullOrWhiteSpace(item.Description))
 							{
-								<span class="hub-wn-item-desc">@item.Description</span>
-							}
-							@if (!string.IsNullOrWhiteSpace(item.Meta))
-							{
-								<span class="hub-wn-item-meta">@item.Meta</span>
+								<p class="hub-wn-card-desc">@item.Description</p>
 							}
+							<span class="hub-wn-card-more">
+								<span>Read more</span>
+								<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+									<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+								</svg>
+							</span>
 						</a>
 					}
 					else
 					{
-						<div class="hub-wn-item-link">
-							<strong class="hub-wn-item-title">@item.Title</strong>
+						<div class="hub-wn-card-link">
+							<div class="hub-wn-card-meta">
+								<span class="hub-wn-card-meta-left">
+									@if (!string.IsNullOrWhiteSpace(item.Badge))
+									{
+										<span class="hub-wn-card-badge">@item.Badge</span>
+									}
+									@if (!string.IsNullOrWhiteSpace(item.Date))
+									{
+										<span class="hub-wn-card-date">@item.Date</span>
+									}
+								</span>
+								@if (!string.IsNullOrWhiteSpace(item.Tag))
+								{
+									<span class="hub-wn-card-tag">@item.Tag</span>
+								}
+							</div>
+							<h3 class="hub-wn-card-title">@item.Title</h3>
 							@if (!string.IsNullOrWhiteSpace(item.Description))
 							{
-								<span class="hub-wn-item-desc">@item.Description</span>
-							}
-							@if (!string.IsNullOrWhiteSpace(item.Meta))
-							{
-								<span class="hub-wn-item-meta">@item.Meta</span>
+								<p class="hub-wn-card-desc">@item.Description</p>
 							}
 						</div>
 					}
@@ -72,4 +109,17 @@
 			}
 		</ul>
 	}
+
+	@if (hasUpgrade)
+	{
+		<div class="hub-wn-footer">
+			<span class="hub-wn-footer-text">Ready to move to the latest version?</span>
+			<a href="@Model.PrefixUrl(upgrade!.Url)" hx-boost="false" class="hub-wn-upgrade">
+				<span>@upgrade.Label</span>
+				<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</a>
+		</div>
+	}
 </section>
diff --git a/src/Elastic.Markdown/Myst/YamlSerialization.cs b/src/Elastic.Markdown/Myst/YamlSerialization.cs
index 16ac8d5a1b..bf68795d04 100644
--- a/src/Elastic.Markdown/Myst/YamlSerialization.cs
+++ b/src/Elastic.Markdown/Myst/YamlSerialization.cs
@@ -44,6 +44,11 @@ public static T Deserialize<T>(string yaml, ProductsConfiguration products)
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardData))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardLink))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.LinkCardAside))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.GetStartedData))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.GetStartedInstall))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.GetStartedTutorial))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.GetStartedStep))]
+[YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.GetStartedStepOption))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewData))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewItem))]
 [YamlSerializable(typeof(Elastic.Markdown.Myst.Directives.Hub.WhatsNewConfig))]

From e3342d84ba80e8b0b8b8bcb6a069ecea87fe3a90 Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Mon, 6 Jul 2026 13:25:58 +0200
Subject: [PATCH 54/56] Bump Microsoft.OpenApi to 3.5.4 to fix NU1903 audit
 failure

GHSA-v5pm-xwqc-g5wc flags Microsoft.OpenApi <= 3.5.3 for a high
severity circular schema reference issue, surfacing as NU1903 and
failing CI restore under TreatWarningsAsErrors. 3.5.4 is the first
patched version and matches the bump already on main.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 Directory.Packages.props | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Directory.Packages.props b/Directory.Packages.props
index 67661a36f1..3c4ddafe3c 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -56,7 +56,7 @@
     <PackageVersion Include="InMemoryLogger" Version="1.0.66" />
     <PackageVersion Include="MartinCostello.Logging.XUnit.v3" Version="0.7.1" />
     <PackageVersion Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="10.0.8" />
-    <PackageVersion Include="Microsoft.OpenApi" Version="3.1.1" />
+    <PackageVersion Include="Microsoft.OpenApi" Version="3.5.4" />
     <PackageVersion Include="Tomlyn" Version="2.3.2" />
     <PackageVersion Include="TUnit" Version="0.25.21" />
     <PackageVersion Include="xunit.v3.extensibility.core" Version="2.0.2" />

From fa6182fda8e626ddfa16afecb6175d3fa12c6c08 Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Mon, 6 Jul 2026 15:17:44 +0200
Subject: [PATCH 55/56] Fix Prettier formatting in hub.css

Use single quotes for the accordion marker content to satisfy the
prettier --check step in the npm CI job.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/Elastic.Documentation.Site/Assets/markdown/hub.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hub.css b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
index 0d5094b8fc..d483cc1205 100644
--- a/src/Elastic.Documentation.Site/Assets/markdown/hub.css
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hub.css
@@ -757,7 +757,7 @@
 		display: none;
 	}
 	.hub-accordion-summary::marker {
-		content: "";
+		content: '';
 	}
 	.hub-accordion-title {
 		font-size: 1.143rem;

From d84fa3f465cbb2a703bef18651018c0f3f62dabc Mon Sep 17 00:00:00 2001
From: Florent LB <florent.leborgne@elastic.co>
Date: Mon, 6 Jul 2026 17:33:19 +0200
Subject: [PATCH 56/56] Set required Cta on placeholder page view model

The cta feature merged from main made MarkdownLayoutViewModel.Cta a
required member. PlaceholderPageWriter builds that view model directly
and must set it; use the built-in default, matching pages with no cta
config.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Building/PlaceholderPageWriter.cs                         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/services/Elastic.Documentation.Assembler/Building/PlaceholderPageWriter.cs b/src/services/Elastic.Documentation.Assembler/Building/PlaceholderPageWriter.cs
index 116266a1b2..ca6d9c2255 100644
--- a/src/services/Elastic.Documentation.Assembler/Building/PlaceholderPageWriter.cs
+++ b/src/services/Elastic.Documentation.Assembler/Building/PlaceholderPageWriter.cs
@@ -7,6 +7,7 @@
 using Elastic.Documentation.Configuration;
 using Elastic.Documentation.Configuration.Assembler;
 using Elastic.Documentation.Configuration.Builder;
+using Elastic.Documentation.Configuration.Toc;
 using Elastic.Documentation.Configuration.Versions;
 using Elastic.Documentation.Extensions;
 using Elastic.Documentation.Navigation;
@@ -165,7 +166,8 @@ NavigationRenderResult renderResult
 			VersioningSystem = context.VersionsConfiguration.GetVersioningSystem(VersioningSystemId.All),
 			VersionDropdownSerializedModel = null,
 			CurrentVersion = null,
-			AllVersionsUrl = null
+			AllVersionsUrl = null,
+			Cta = Cta.Default
 		};
 	}
 }