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 👍
| --- | ||
| import '../components.css'; | ||
|
|
||
| Use a hero at the top of a homepage or landing page to introduce a clear value proposition and primary call to action. |
There was a problem hiding this comment.
TIL there is a grammar table on org, but looks like it prefers "home page" as two words https://www.patternfly.org/content-design/grammar/terminology#glossary
FWIW there is an instance in the masthead design docs we may want to update, too
|
|
||
| Use a hero at the top of a homepage or landing page to introduce a clear value proposition and primary call to action. | ||
|
|
||
| Hero is currently a [beta component](/get-started/about-PatternFly#beta-components). These guidelines reflect what is implemented today and may evolve as the component matures. |
There was a problem hiding this comment.
URL isn't working, but it does work if you make "PatternFly" lowercase - https://www.patternfly.org/get-started/about-patternfly/#beta-components
Though the anchor doesn't exist, looks like maybe it should be pointing to https://www.patternfly.org/get-started/about-patternfly/#beta-features? FWIW that URL doesn't seem to work on the preview URL and I'm not sure why - https://pf-org--pr-5080-site.surge.sh/get-started/about-patternfly/#beta-features
I couldn't find this page browsing org, either, but that's probably a me problem.
| Hero is currently a [beta component](/get-started/about-PatternFly#beta-components). These guidelines reflect what is implemented today and may evolve as the component matures. | |
| Hero is currently a [beta component](/get-started/about-patternfly/#beta-features). These guidelines reflect what is implemented today and may evolve as the component matures. |
| | **Default background** | Tertiary fill | `--pf-t--global--background--color--tertiary--default` | | ||
| | **Glass background** | Glass primary | `--pf-t--global--background--color--glass--primary--default` | | ||
| | **Glass shadow** | Glass default | `--pf-t--global--box-shadow--glass--default` | |
There was a problem hiding this comment.
Not sure if you wanted to fill in the values for the background/shadows?
…/hero/hero.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
3 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.