Live demo — this example is server-driven; run the showcase locally for the interactive version.

Hero

A prominent page-level banner for landing and overview pages — title, supporting copy, and calls to action in one region.

Examples

Title, copy, and a call to action in the hero body.

A prominent banner region for landing pages — title, supporting copy, and a call to action.

glass=true renders a translucent panel over the page background.

The body sits on a translucent glass panel over the page background.

* required
Name	Type	Description
`id`	String	DOM id on the root.
`glass`	Boolean	`pf-m-glass` translucent backdrop.
`attrs`	String (raw)	Raw attribute passthrough on the root.
`main block`	Qute block	Hero content — any markup, rendered inside `__body`.

Use one hero per page, at the top. For in-flow banners use Banner; for empty areas use Empty state.