feat(Hero): added component #12131

thatblindgeye · 2025-11-10T14:50:04Z

What: Closes #12103

Additional issues:

patternfly-build · 2025-11-10T14:54:27Z

Preview: https://pf-react-pr-12131.surge.sh

A11y report: https://pf-react-pr-12131-a11y.surge.sh

nicolethoen · 2025-11-10T18:30:00Z

packages/react-core/src/components/Hero/examples/Hero.md

@@ -0,0 +1,19 @@
+---
+id: Hero
+section: components


Can this be placed under the Patternfly AI / Generative UI section for now instead of Components?

@nicolethoen would we want it to live there in Core as well (assuming that will require a little lift since that section doesn't render in Core docs build currently)?

Wouldn't this living in Components make more sense if the intent here is to abstract it to be something that is usable in non-compass layouts?

I'm team Components personally

edonehoo

feel free to tweak! I'm not super familiar with the component yet, so may have misspoken

edonehoo · 2025-11-10T20:24:14Z

packages/react-core/src/components/Hero/examples/Hero.md

+## Examples
+
+### Basic
+


Suggested change

A hero can be used to welcome users to a page, with flexibility to support background images for added visual emphasis.

Winging this - I'm sure you could say this more accurately - but could we add some sort of brief context for what the component is? I suppose this could also be on the design guidelines tab if we plan to add one, but should work just fine here for now either way

Ah yeah was going to say/ask whether this would more be something that appears at the top of the component page like other components:

That could live in Org, which I imagine I may end up putting a PR up there to tweak some Compass demos that live there anyway. Would you still wwant some verbiage here for now?

oh yes, exactly! I was looking at other components pages via this pr's link and was getting so confused that I didn't see those descriptions. But I'm now realizing that's just because they live in org (I assume). Feel free to leave off this sentence here, then!

edonehoo · 2025-11-10T20:28:34Z

packages/react-core/src/components/Hero/examples/Hero.md

+
+### Basic
+
+When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.


Suggested change

When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.

To ensure readability and prevent text from overlapping with the background image, use the `<HeroBody>` component. The `<HeroBody>` is optional and can be omitted if there's no background image or if you'd like finer control over text placement.

When using `gradientLight` or `gradientDark`, regardless of the presence of a `<HeroBody>`, check the color contrast to ensure proper accessibility.

edonehoo · 2025-11-10T20:28:48Z

packages/react-core/src/components/Hero/examples/Hero.md

+
+When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.
+
+You can omit the `<HeroBody>` for finer control over the text placement, or if no background image is applied to the `<Hero>`.


Suggested change

You can omit the `<HeroBody>` for finer control over the text placement, or if no background image is applied to the `<Hero>`.

I brought it up in my previous comment

edonehoo · 2025-11-10T20:29:36Z

packages/react-core/src/components/Hero/Hero.tsx

+import heroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_dark';
+import heroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_dark';
+
+/** The main Hero component that allowws adjusting of its background images and gradients in different color modes (such as light and dark). */


Suggested change

/** The main Hero component that allowws adjusting of its background images and gradients in different color modes (such as light and dark). */

/** The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark). */

just noticed a small typo

I really need to fix my w key or get a new keyboard 😭

packages/react-core/src/components/Hero/Hero.tsx

wise-king-sullyman · 2025-11-10T21:42:59Z

packages/react-core/src/components/Hero/HeroBody.tsx

+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+import { css } from '@patternfly/react-styles';
+
+/** An optional wrapper component for the body content of a Hero that can be used to help control any text content from overlapping a Hero background image. */
+
+export interface HeroBodyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+  /** Content of the hero */
+  children?: React.ReactNode;
+  /** Additional classes added to the hero */
+  className?: string;
+}
+
+export const HeroBody: React.FunctionComponent<HeroBodyProps> = ({ className, children, ...props }) => (
+  <div className={css(styles.heroBody, className)} {...props}>
+    {children}
+  </div>
+);
+
+HeroBody.displayName = 'HeroBody';


I wonder if it really makes sense for this to be a standalone component instead of just part of Hero.

In what scenarios would a consumer need to omit this component?

Hero supports a background image that by default is on the right side of the box. HeroBody is just a div that supports customizations for width and max-width to keep the text from extending over the background image.

If you didn't provide a background image and wanted your text to span the width of the hero box, you could just omit it. We have a similar model in other components. Usually what a [Component]Body element does is provide padding/spacing, and if you omit it, whatever you put in the component spans the full width/height.

width and maxWidth should probably be props that set --pf-v6-c-hero__body--Width and --pf-v6-c-hero__body--MaxWidth though.

If the width and maxWidth are customizable could a consumer not using a background image not just set them to 100%?

thatblindgeye · 2025-11-11T17:00:13Z

packages/react-core/src/components/Hero/examples/Hero.md

+The `bodyWidth` and `bodyMaxWidth` properties can be used for finer control over the placement of text content within the `<Hero>`, such as if you omit a background image. Be mindful of adjusting these properties when a background image is still present, as you may need to ensure the contrast of text is sufficient should it overlap the image.
+
+When using `gradientLight` or `gradientDark`, check the color contrast to ensure proper accessibility.


@edonehoo with an update that removed the HeroBody component (we're just baking it into Hero now), I changed the example verbiage a bit, could you give another quick look?

yep! just left a suggestion. Debating on if we should say more about the gradient props or not - like how people should define the stops and colors? unless our plan is to ship pre-made gradient options

I don't think we plan on shipping any gradients or images for the time being. We can ask that in tomorrow's working session though.

mcoker

Looks like the demo is failing because it's still importing HeroBody

mcoker · 2025-11-11T17:23:29Z

packages/react-core/src/components/Compass/examples/CompassDemo.tsx

  CompassPanel,
  CompassMessageBar,
+  Hero,
+  HeroBody,


Suggested change

HeroBody,

mcoker · 2025-11-11T17:23:40Z

packages/react-core/src/components/Compass/examples/CompassDemo.tsx

-        <div>Hero</div>
+      <CompassHero>
+        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
+          <HeroBody>Hero</HeroBody>


Suggested change

<HeroBody>Hero</HeroBody>

Hero

kmcfaul

LGTM after the two minor references to the removed HeroBody component that Michael already pointed out are cleaned up, and one verification question I had re: the custom styles for hero body.

kmcfaul · 2025-11-11T17:43:59Z

packages/react-core/src/components/Hero/Hero.tsx

+  return (
+    <div
+      className={css(styles.hero, hasNoGlass && styles.modifiers.noGlass, className)}
+      style={{ ...props.style, ...customStyles }}


cc @mcoker Do we need to set the two hero body widths on the hero body element or is it fine to set them all on the hero element? Just wanted to check.

Either way. I would probably put them on the hero wrapper since that's where we suggest consumers put their customizations^*.

^* To expand on that, this is the hero component CSS var block. It renders this in the CSS:

The way we want consumers to customize components is the same way. In their CSS that loads after patternfly CSS (after so that it overrides ours), they should write something like:

.pf-v6-c-hero { --pf-v6-c-hero--BackgroundColor: lemonchiffon; --pf-v6-c-hero--BorderStyle: dotted; --pf-v6-c-hero__body--MaxWidth: 42 parsecs; ... and so on }

So when we have a component prop that customizes some CSS var for that component, we're effectively just doing that customization for them, so you'd do it the same way.

You don't have to though if it's difficult - like a nested thing where it isn't easy to pass a style object back up to a parent wrapper. Another good use case for adding the vars directly to a hero body would be - if we went back to having a HeroBody component and we supported multiple HeroBodys inside of Hero, then we/users would set the --Width/MaxWidth vars on each HeroBody to customize them individually. If you wanted them all to be the same, you'd put the customization at the component wrapper level.

edonehoo · 2025-11-11T18:55:51Z

packages/react-core/src/components/Hero/examples/Hero.md

+The `bodyWidth` and `bodyMaxWidth` properties can be used for finer control over the placement of text content within the `<Hero>`, such as if you omit a background image. Be mindful of adjusting these properties when a background image is still present, as you may need to ensure the contrast of text is sufficient should it overlap the image.
+
+When using `gradientLight` or `gradientDark`, check the color contrast to ensure proper accessibility.


Suggested change

The `bodyWidth` and `bodyMaxWidth` properties can be used for finer control over the placement of text content within the `<Hero>`, such as if you omit a background image. Be mindful of adjusting these properties when a background image is still present, as you may need to ensure the contrast of text is sufficient should it overlap the image.

When using `gradientLight` or `gradientDark`, check the color contrast to ensure proper accessibility.

If you need finer control over the placement of text content within the `<Hero>`, such as when you omit a background image, adjust the `bodyWidth` and `bodyMaxWidth` properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.

When using `gradientLight` or `gradientDark` to apply gradient backgrounds, check the color contrast to ensure proper accessibility.

mcoker

patternfly-build · 2025-11-12T17:18:21Z

Your changes have been released in:

@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]

Thanks for your contribution! 🎉

thatblindgeye requested review from edonehoo, kmcfaul and mcoker November 10, 2025 14:50

nicolethoen reviewed Nov 10, 2025

View reviewed changes

edonehoo reviewed Nov 10, 2025

View reviewed changes

wise-king-sullyman reviewed Nov 10, 2025

View reviewed changes

thatblindgeye mentioned this pull request Nov 11, 2025

feat(Compass): updated mainheader structure to be composable #12135

Merged

thatblindgeye added 4 commits November 11, 2025 09:17

feat(Hero): added component

4ba98fd

Added example description

7d570bc

Added snapshots

13e7033

Austin and Erin feedback

213f6be

edonehoo approved these changes Nov 11, 2025

View reviewed changes

thatblindgeye force-pushed the iss12103 branch from a968162 to 213f6be Compare November 11, 2025 16:00

Updated to bake-in HeroBody in main Hero component

5ffe512

thatblindgeye requested review from nicolethoen and wise-king-sullyman November 11, 2025 16:58

thatblindgeye commented Nov 11, 2025

View reviewed changes

mcoker requested changes Nov 11, 2025

View reviewed changes

kmcfaul reviewed Nov 11, 2025

View reviewed changes

edonehoo reviewed Nov 11, 2025

View reviewed changes

Removed HeroBody instances, example verbiage updated

af884b4

thatblindgeye requested review from edonehoo, kmcfaul and mcoker November 12, 2025 13:16

wise-king-sullyman approved these changes Nov 12, 2025

View reviewed changes

kmcfaul approved these changes Nov 12, 2025

View reviewed changes

edonehoo approved these changes Nov 12, 2025

View reviewed changes

Exported all compass interfaces

d281ae6

kmcfaul approved these changes Nov 12, 2025

View reviewed changes

mcoker approved these changes Nov 12, 2025

View reviewed changes

kmcfaul merged commit 8da87a2 into patternfly:main Nov 12, 2025
13 checks passed


	A hero can be used to welcome users to a page, with flexibility to support background images for added visual emphasis.


		### Basic

		When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.

-When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.
+To ensure readability and prevent text from overlapping with the background image, use the `<HeroBody>` component. The `<HeroBody>` is optional and can be omitted if there's no background image or if you'd like finer control over text placement.
+When using `gradientLight` or `gradientDark`, regardless of the presence of a `<HeroBody>`, check the color contrast to ensure proper accessibility.


		When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.

		You can omit the `<HeroBody>` for finer control over the text placement, or if no background image is applied to the `<Hero>`.

	/** The main Hero component that allowws adjusting of its background images and gradients in different color modes (such as light and dark). */
	/** The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark). */

		The `bodyWidth` and `bodyMaxWidth` properties can be used for finer control over the placement of text content within the `<Hero>`, such as if you omit a background image. Be mindful of adjusting these properties when a background image is still present, as you may need to ensure the contrast of text is sufficient should it overlap the image.

		When using `gradientLight` or `gradientDark`, check the color contrast to ensure proper accessibility.

feat(Hero): added component #12131

feat(Hero): added component #12131

Uh oh!

Conversation

thatblindgeye commented Nov 10, 2025

Uh oh!

patternfly-build commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edonehoo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kmcfaul left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Nov 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

patternfly-build commented Nov 10, 2025 •

edited

Loading

edonehoo left a comment •

edited

Loading

kmcfaul left a comment •

edited

Loading