Repository navigation
Render hub get-started steps as chevrons - #4247
Merged
Merged
Conversation
A card grid made the forked first step look like another box, and a lone step stretched across the row. Chevrons keep the sequence readable, keep the trial action a button, and center a step that sits alone. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
Docs preview (local build)Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4247/ Sample changed pages: |
An option command stays a code block, so highlighting and the copy button remain. The chip now hugs the command and shares the button height, and the step title steps up one size on the type scale. Co-authored-by: Cursor <cursoragent@cursor.com>
florent-leborgne
added
redesign
Below 720px each step is a plain block. The badge, text, links, button, and command now sit in the horizontal center of that block. Co-authored-by: Cursor <cursoragent@cursor.com>
florent-leborgne
marked this pull request as ready for review
September 29, 2026 20:01
florent-leborgne
requested review from
Mpdreamz,
bmorelli25,
georgewallace and
itsalexcm
September 29, 2026 20:01
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Requesting changes based on the blocking issues documented in the inline comments.
What is this? | From workflow: PR Review
Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.
A screen reader was restarting at 1 on each row, because the badge is hidden and each row was its own list. The fork grid now applies only when a step has two options. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
There was a problem hiding this comment.
Approved.
What is this? | From workflow: PR Review
Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.
georgewallace
approved these changes
Oct 6, 2026
georgewallace
left a comment
georgewallace
left a comment
Contributor
There was a problem hiding this comment.
I like the new look
theletterf
approved these changes
Oct 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The
{get-started}section draws its steps as chevrons, so a hub's onboarding reads as one numbered path.Affects: Site UI
Prompt summary: Implement the light chevron layout for the hub get-started section, as a draft pull request on this repository. Keep the command a code block with a copy button, take type from the site scale, and keep the hub arrow. Bring the command chip and the step title closer to that layout.
Why
This change is an attempt to give some more visual substance to the get started sections of hub pages. The current look has too many lines and degrades the readability of the page.
What
Before
After
This layout is responsive:
I ran some contrast tests to ensure this works well too. But design refinements more than welcome, I dislike the current more than i like this new proposal, so, happy to get better ideas and input, I just feel we need to change the current :)
On the authoring side, this shouldn't impact the content that has to be added using the directive.
Chevron rows
Each step is a chevron filled with
blue-elastic-10and outlined with agrey-70hairline, numbered from 1. Steps after a fork share the row, three across when the count divides by three and two when it is even. A step alone on its row stays one cell wide and is centered. Each row continues the list count, and a line joins one row to the next.Two choices in one step
A step with two options takes the full row as one chevron. The choices sit side by side, split by "or". A URL with no command renders as a button. A command that also has a URL, and a step
link, stay text links with the hub arrow. The chevron itself is not the link. That fork layout is used only when the step has exactly two options.Command chip
An option command stays a standard code block, so highlighting and the copy button remain. The box hugs the command and matches the button in height and corner radius. The command uses
--text-xsand the step title uses--text-lg. Option names, descriptions, and text links stay on--text-base, and the button stays on--text-sm.Narrow width
The section queries its own width, because the sidebar narrows the body. Below 720px the steps stack to full width and the chevron shape drops. The content in each step is centered. The joining line is hidden at that width.
Authoring contract
The YAML schema is unchanged. The syntax page at
docs/syntax/get-started.mddescribes the chevron rows, the centered lone step, the centered stacked content, and the text link.Verify
dotnet test tests/Elastic.Authoring.Tests/Open the docs-builder hub example. Check a forked first step, a row of three, a lone centered step, and the column below 720px. Confirm the command chip matches the option button and that the other links still use the hub arrow.