Docs/hero design guidelines - #5080
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>
mcoker
left a comment
mcoker
left a comment
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
left a comment
mcoker
left a comment
There was a problem hiding this comment.
Spotted a few more things.
| - Pages focused on content discovery, data management, or dense workflows (use a standard page header instead). | ||
| - Detail views, settings pages, or views where the user's primary task is utility- or task-driven rather than conversion-oriented. | ||
|
|
||
| For in-page promotional content that is not at the top of the view, use a [hint](/components/hint/design-guidelines) or horizontal split card instead. |
There was a problem hiding this comment.
You probably know but there is a demo for the horizontal split card if you want to link to it.
| For in-page promotional content that is not at the top of the view, use a [hint](/components/hint/design-guidelines) or horizontal split card instead. | |
| For in-page promotional content that is not at the top of the view, use a [hint](/components/hint/design-guidelines) or [horizontal split card](/components/card/react-demos#horizontal-split) instead. |
|
|
||
| - Place the hero at the top of the page content area, spanning the full content width. | ||
| - Do not place a hero in the middle or bottom of a page. | ||
| - In Compass or layered layouts, place a Glass hero directly over the page background—not inside a [Panel](/components/panel) (`.pf-v6-c-panel`), or within `.pf-v6-c-compass__main-header` or `.pf-v6-c-compass__content`. |
There was a problem hiding this comment.
Doesn't look like glass is capitalized anywhere else unless it is the first word in a sentence. Maybe you wanted to link it to the glass section in this doc? I'm not sure what the case would be if so, but FYI the link would be [glass](#glass)
| - In Compass or layered layouts, place a Glass hero directly over the page background—not inside a [Panel](/components/panel) (`.pf-v6-c-panel`), or within `.pf-v6-c-compass__main-header` or `.pf-v6-c-compass__content`. | |
| - In Compass or layered layouts, place a glass hero directly over the page background—not inside a [Panel](/components/panel) (`.pf-v6-c-panel`), or within `.pf-v6-c-compass__main-header` or `.pf-v6-c-compass__content`. |
|
|
||
| Glass styling requires **both**: | ||
|
|
||
| - The glass theme (`.pf-v6-theme-glass`), and |
There was a problem hiding this comment.
IMO you don't need "and". But I wonder if we should also say the glass theme class goes on the html element? In case there is confusion about thinking it goes on the hero component? Maybe that isn't necessary because it's obvious where the theme class goes?
| - The glass theme (`.pf-v6-theme-glass`), and | |
| - The glass theme (`.pf-v6-theme-glass`) |
There was a problem hiding this comment.
Id be in favor of mentioning the HTML element for this bullet, and specifically the hero component for the next bullet, just since this doc is specifically about Hero i could see it being inferred that these classes both need to go on Hero.
thatblindgeye
left a comment
thatblindgeye
left a comment
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
left a comment
kaylachumley
left a comment
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?
5 participants
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.