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 a description and a link list	Titled link column, description dropped

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

• Card links and column links share one treatment: bulleted, blue, underlined. The prototype styled columns as a quiet dark index.
• The prototype's aside, a second list of links inside a card, is dropped. A card held two kinds of link, which meant two treatments for the same thing in one card. A second group of links is now a second card. elastic/docs-content-internal#1385 and Clarify mandatory link text #1549 are updated.
• Only a card that carries its own link lifts on hover, and that card is clickable across its whole surface.
• Accordions open independently. Expanding one does not collapse the others.

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 of link columns.

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 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.