Hero

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 on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

Basic hero content

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-hero
<div>
Initiates the hero. Required
.pf-v6-c-hero__body
<div>
Initiates the hero body.
.pf-m-no-glass
.pf-v6-c-hero
Modifies the hero to remove glass styling when using glass theme.

CSS variables

Expand or collapse columnSelectorVariableValue