Docs/hero design guidelines - #5080
Open
lboehling wants to merge 11 commits into
Open
Conversation
Add a Design guidelines tab for the beta Hero component covering elements, usage, Default/Glass variants, content, and spacing aligned to PatternFly 6.6 implementation. Includes placeholder images to be replaced with final Figma exports. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Clarify that Glass heroes sit over the page background, not inside Panel or the Compass main-header/content regions. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Revert the broader parentheses cleanup and only remove parenthetical text from the Hero container and Recommended composition headings. Co-authored-by: Cursor <cursoragent@cursor.com>
Collaborator
lboehling
requested review from
a team,
andrew-ronaldson,
bekah-stephens,
kaylachumley,
kmcfaul,
mcoker,
phcox and
thatblindgeye
and removed request for
a team and
phcox
July 21, 2026 22:25
mcoker
reviewed
Jul 22, 2026
mcoker
left a comment
Contributor
There was a problem hiding this comment.
LGTM just a few comments 👍
…/hero/hero.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Replace the manual beta notice with frontmatter beta: true so the design guidelines tab shows the same beta alert as HTML/React. Co-authored-by: Cursor <cursoragent@cursor.com>
Align Hero and Masthead design guideline terminology with the PatternFly content-design glossary. Co-authored-by: Cursor <cursoragent@cursor.com>
mcoker
reviewed
Jul 27, 2026
mcoker
left a comment
Contributor
There was a problem hiding this comment.
Spotted a few more things.
thatblindgeye
approved these changes
Jul 28, 2026
thatblindgeye
left a comment
Contributor
There was a problem hiding this comment.
LGTM, just one question: for the image showing the Hero at large and mobile viewports, would it be worth having both sides include a secondary CTA to show the buttons wrapping to a second row on the mobile side?
kaylachumley
approved these changes
Jul 28, 2026
kaylachumley
left a comment
Collaborator
There was a problem hiding this comment.
Looks good! one nit thing: do we wanna add a visual example of "do" and "do not" side by side?
Note that glass theme belongs on html and the glass variant on the hero, and link the horizontal split card alternative. Co-authored-by: Cursor <cursoragent@cursor.com>
Author
ty! It seems like a lot of content to put into a simple/digestible image so i'd probably in favor of holding off for now? |
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
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.
Closes #5069
Adds design guidelines and images for Hero component.
note -- does not include content for proposed expandable, dismissable & compact variants. A draft for those variants has been made for future reference.