[leemthompo]

A {get-started} option can now list several labeled commands, each with its own code block and copy button. Long commands in the legacy hub layout now wrap instead of being clipped.

Affects: Authoring, Site UI

Prompt summary: The Elasticsearch hub needs to offer two start-local commands side by side: one for Elasticsearch only, and one for Elasticsearch and Kibana. The ask is a clean way to show both, in both the legacy and the design-system hub layouts, at every page width.

Why

An option takes one code string, so two commands have to share one block. The copy button then copies both commands, plus any comment lines between them. Separately, the legacy command chip has a fixed height and does not wrap. On the live hubs (e.g. Elasticsearch hub), the chip cuts off | sh, so readers see an incomplete command.

What

Labeled commands

An option accepts commands: as an alternative to code:. Each entry has a label: and a code:, and all entries use the option's language:. Both hub views render every command in its own block with its own copy button. An option that sets both code: and commands: fails the build with an error. The LLM export lists each command under its label.

Wrapping commands in the legacy layout

The legacy chip now grows with its content instead of scrolling sideways, so a long command wraps onto more lines. A one-line command keeps its 37px height, which matches the option button next to it. The design-system view already wrapped commands.

Layout beside a command stack

A stack of commands is taller than a button. When one option has a stack, the button in the other option stays under its own text instead of dropping to the bottom of the row. Chips in a stack share one width, so their edges line up when the options stack on narrow screens.

Verify

dotnet test tests/Elastic.Authoring.Tests/
# GetStartedWithLabeledCommands, GetStartedWithCodeAndCommands — legacy view and validation
# GetStartedLabeledCommandsComponent — design-system view

Serve a hub that uses commands: with the flag off and on:

dotnet run --project src/tooling/docs-builder -- serve -p ../docs-content --port 3001
FEATURE_NAVIGATION_PREVIEW=true dotnet run --project src/tooling/docs-builder -- serve -p ../docs-content --port 3002

Check on the preview

• Elasticsearch hub — the start-local command in Run locally wraps and shows the final | sh.
• Logstash hub — control page: no command chip, layout unchanged.

No page on the preview uses commands: yet. The screenshots below show it.

Out of scope: Two layout bugs already exist on hubs that do not use commands:. With NAVIGATION_PREVIEW on at 768px, the design-system layout keeps three columns and squeezes each command into a narrow strip. With the flag off at 375px, the step box runs past the right edge of the page. Both show on the Kibana hub today.

Related: #4623 carries the wrapping fix on its own, so it can ship first. This PR includes the same change.

Companion PR: elastic/docs-content#9073 changes the Elasticsearch hub. It can switch to commands: once this ships.

Screenshots

The Run Elasticsearch step on the Elasticsearch hub, using commands:, at five widths. Click a title to expand it.

With NAVIGATION_PREVIEW off

375px, mobile (existing step box overflow bug, also on the Kibana hub)

768px, tablet

1024px, small laptop

1280px, laptop

1440px, desktop

With NAVIGATION_PREVIEW on

375px, mobile

768px, tablet (existing narrow-column squeeze bug, also on the Kibana hub)

1024px, small laptop

1280px, laptop

1440px, desktop

🤖 Generated with Claude Code

[github-actions]

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4622/

Sample changed pages:

• docs/syntax/get-started.md