Watch this to build a hero banner where the headline sits exactly where you want it over the image, chosen from a select list instead of hand-written CSS.
What the Hero bundle holds
Five content fields: a Content Title, a Content Body, an Image taken from the media library, a Link, and a Link Title Attribute for the anchor's title text. The image becomes the backdrop and the title and body are rendered as a floating block on top of it inside a display container.
Nine positions, no custom CSS
The Display Classes select is what makes this bundle worth using. It offers nine placements for the text block: top left, top middle, top right, middle left, dead centre, middle right, bottom left, bottom middle and bottom right. Changing the banner from a centred headline to a bottom-left caption is one select, saved with the content, with no theme override and nothing to deploy.
Hero and Hero Full Width are different modules
This is the relationship people miss. The plain Hero sub-module depends only on the parent. Hero Full Width is a separate sub-module that additionally requires the Responsive Image bundle and the W3CSS Paragraphs Content Type sub-module, because it is designed to break out of the page container. Enabling one does not give you the other.
The W3CSS Paragraphs module page shows how both sit in the suite.
Versions and the Views alternative
The project supports Drupal 10, 11 and 12. Where the banner should instead be rendered from a View — a promoted node, say — Views Hero does that, but it needs Drupal 11.3 or newer. If you are choosing a front end to go with either, the Solo theme is the current one from the same maintainer.
If this is one piece of a bigger build, Drupal architecture services is where that conversation starts — or get in touch.
