Added example description

Author: thatblindgeye

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

@@ -9,12 +9,6 @@ import heroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_hero_grad
 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';
 
-export interface GradientStops {
-  stop1?: string;
-  stop2?: string;
-  stop3?: string;
-}
-
 /** The main Hero component that allowws adjusting of its background images and gradients in different color modes (such as light and dark). */
 
 export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {

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

@@ -10,7 +10,9 @@ propComponents: ['Hero', 'HeroBody']
 
 ### Basic
 
-When
+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>`.
 
 ```ts file="HeroBasic.tsx"
 

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

@@ -1,7 +1,7 @@
 import { Hero, HeroBody } from '@patternfly/react-core';
 
 export const HeroBasic: React.FunctionComponent = () => (
-  <Hero gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}>
-    <HeroBody>The (super)hero content.</HeroBody>
+  <Hero>
+    <HeroBody>Basic hero content</HeroBody>
   </Hero>
 );