---
id: Hero
section: components
cssPrefix: pf-v6-c-hero
beta: true
propComponents: ['Hero']
---

## Examples

### Basic

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.

```ts file="HeroBasic.tsx"

```