Skip to content

Docs/hero design guidelines - #5080

Open
lboehling wants to merge 11 commits into
patternfly:mainfrom
lboehling:docs/hero-design-guidelines
Open

Docs/hero design guidelines#5080
lboehling wants to merge 11 commits into
patternfly:mainfrom
lboehling:docs/hero-design-guidelines

Conversation

@lboehling

Copy link
Copy Markdown

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.

lboehling and others added 6 commits July 21, 2026 17:19
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>
@patternfly-build

patternfly-build commented Jul 21, 2026

Copy link
Copy Markdown
Collaborator

Preview: https://pf-org--pr-5080-site.surge.sh

@lboehling
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 mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM just a few comments 👍

Comment thread packages/documentation-site/patternfly-docs/content/components/hero/hero.md Outdated
Comment thread packages/documentation-site/patternfly-docs/content/components/hero/hero.md Outdated
Comment thread packages/documentation-site/patternfly-docs/content/components/hero/hero.md Outdated
lboehling and others added 3 commits July 22, 2026 16:56
…/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>
@lboehling
lboehling requested a review from mcoker July 27, 2026 21:03

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spotted a few more things.

Comment thread packages/documentation-site/patternfly-docs/content/components/hero/hero.md Outdated
Comment thread packages/documentation-site/patternfly-docs/content/components/hero/hero.md Outdated

@thatblindgeye thatblindgeye left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 kaylachumley left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
@lboehling

Copy link
Copy Markdown
Author

Looks good! one nit thing: do we wanna add a visual example of "do" and "do not" side by side?

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create final version of design guidelines for hero component

5 participants