Hub pages
A hub page is a product-scoped landing page. It gives a reader one 360° view of a product across versions, deployment types, and surfaces.
Hub pages are composed entirely from directives. There is no free-form body content. That constraint is deliberate. It lets every link validate at build time, and it keeps every hub structurally consistent whoever authors it.
See the docs-builder documentation hub for a complete page.
Set layout: hub in the page frontmatter:
---
layout: hub
---
A page with layout: hub must contain a {hero} directive. The build fails without one, because the layout removes the page H1 and leaves the page with no title.
The hub layout differs from the default page layout in three ways:
- The right-rail table of contents is removed. The version dropdown lives in that rail, so a hub page does not show it.
- The previous and next page navigation is removed.
- The body owns the full width of the content column, so directives can render full-bleed sections.
The left sidebar stays. A reader can move between sibling hubs from there.
A hub page has no authored H1. The page title comes from the first {hero} directive's :title: option.
Title detection tries three sources in order:
- A top-level H1 in the body.
- An H1 nested inside a directive.
- The
:title:option of the first{hero}.
One field therefore drives both the on-page heading and the browser tab title.
A hub page exists to answer generic queries such as "Elasticsearch docs". Two fields carry that:
- The
{hero}:title:option, which becomes the indexed page title. - The frontmatter
description, which becomes the indexed description.
Write both deliberately. The search body indexes the hero title and description only. Section and card titles stay out, so a hub does not compete with the pages it links to on specific queries.
| Directive | Purpose |
|---|---|
{hero} |
Identity band. Carries the product icon, the page title, a description, and up to three actions. |
{card-group} |
Section heading and card grid. Renders as an accordion inside {explore}. |
{link-card} |
One card: title, description, link list, optional aside. Renders as a link column inside {explore}. |
{get-started} |
Onboarding funnel. An install command, a tutorial link, and numbered steps. |
{whats-new} |
Recency panel. Dated highlight cards, authored once in hub-whats-new.yml. |
{explore} |
The browse-everything section. A stack of collapsible accordions. |
---
layout: hub
---
:::{hero}
:icon: elasticsearch
:title: Elasticsearch documentation hub
:description: The distributed search and analytics engine at the heart of the Elastic platform.
:::