Hub pages 2/4: {card-group}, {link-card}, and {explore}

[florent-leborgne]

Part 2 of 4, based on #3825. Implements elastic/docs-content-internal#1384 ({card-group}), #1385 ({link-card}) and #1549 ({explore}).

Demo: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/3826/examples/products/docs-builder

The three ship together because {explore} is what switches the other two into their second rendering mode. Split apart, this would add a mode switch nothing can trigger.

The mode switch

Nesting decides it. There is no option.

Directive	Standalone	Inside {explore}
{card-group}	Heading and an auto-filling card grid	One collapsible accordion in a stack
{link-card}	Bordered card with description and inline aside	Titled link column, description dropped, aside as a badge cluster

Driving this from the ancestor rather than a per-directive option means every card grid elsewhere on the site keeps working unchanged. An author wraps existing groups in {explore} and the rendering follows.

The first accordion in a stack is expanded and the rest are collapsed. Toggling uses native <details> and <summary>, so it works without JavaScript.

Implementation choices

HubDirectiveViewModel. Hub links come from directive options and YAML bodies, so they never reach Markdig's link renderer. {link-card} alone has six anchors, and each view was repeating the external, anchor and preload rules by hand. This centralises them into one LinkAttributes call. {hero} moves onto it too.

Heading levels. An accordion title renders as <h3> and a column title as <h4>, so an Explore stack keeps a complete outline: section h2, accordion h3, column h4. A <span> would leave the accordion group missing from the page outline.

Machine-readable output. The LLM export keeps the whole structure, because the curated grouping of links is what a hub page is for. The search body deliberately gets nothing from these three: section, card and link titles are the tokens that would let a hub outrank the pages it links to.

From the designs

• Column links take the site's standard link affordance: blue, underlined, and bulleted. The prototype styled them as a quiet dark index.
• The aside label keeps the casing the writer chose, for example "Card directives". The prototype forced uppercase.

Example page

docs/examples/products/docs-builder.md grows from a hero into a full hub, exercising every mode: a standalone highlight grid, a :variant: solutions grid with icons and accent variants, and a three-accordion {explore} stack with four columns, inline asides and badge clusters.

Its solution cards use docs-content:// cross-links to the published Elastic documentation, which also covers the cross-link form.

Testing

./build.sh unit-test passes. dotnet format and npm run fmt:check are clean. A full docs build reports 0 errors and 0 warnings.

tests/authoring/Blocks/Hub/CardsAndExplore.fs covers both rendering modes, the solutions variant, the first-accordion-open rule, the dropped description, the aside label, the heading levels, icon and variant accents, and four failure paths.

Screenshots to add or update

None attached. The accordion stack and the two card layouts are worth checking on the preview.