Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
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.
Basic hero content
Props
Hero
| Name | Type | Default | Description |
|---|---|---|---|
| backgroundSrcDark | string | Dark theme background image path of the hero | |
| backgroundSrcLight | string | Light theme background image path of the hero | |
| bodyMaxWidth | string | Modifies the max-width of the hero body. | |
| bodyWidth | string | Modifies the width of the hero body. | |
| children | React.ReactNode | Content of the hero | |
| className | string | Additional classes added to the hero | |
| gradientDark | { stop1?: string; stop2?: string; stop3?: string; } | Dark theme gradient of the hero, taking any valid CSS color values for each stop property. | |
| gradientLight | { stop1?: string; stop2?: string; stop3?: string; } | Light theme gradient of the hero, taking any valid CSS color values for each stop property. | |
| isGlass Beta | boolean | false | Flag indicating the hero has glass styling when glass theme is applied. |
