Views Hero (VVJH) turns any Drupal Views listing into a full-width hero banner — or a grid of "Hero Cards" — using pure vanilla JavaScript, with no jQuery and no page-builder involved. It requires Drupal 11.3 or 12, and it is free on drupal.org.
What a hero banner needs, and why Views does not give it to you
A hero section is a specific layout problem: one large background image, a block of overlay text positioned somewhere on top of it, an entrance animation, and a guarantee that the whole thing still works on a phone. Views can output a list of rows. It has no concept of "the first field is the background, everything else is the caption," and no built-in way to animate an overlay into position. Building that by hand means a custom template, a chunk of CSS for the overlay positions, and enough JavaScript to handle the animation and the responsive collapse — for every view that needs one.
VVJH is that work, done once. It adds Vanilla JavaScript Hero as a Views style plugin — a display format you select in the Format section like any other — and it turns the row-style output into a hero section or a grid of Hero Cards without you writing a template or a line of CSS.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3+ |
| Core modules | Views, Filter |
| Required contrib module | VVJ Core (vvj_core) — not optional |
VVJH will not enable without VVJ Core on the module list. VVJ Core is the shared foundation the whole VVJ pattern family runs on — the abstract style plugin base class, the token resolver, the accessibility helpers, and the JavaScript custom-element base every pattern module attaches to. Composer pulls it in for you:
composer require drupal/vvjh:^2.0A manual tarball install does not resolve that dependency automatically — download vvj_core alongside vvjh and enable both.
If you are still on Drupal 10, this module is not for you. Version 2 of every VVJ pattern module, VVJH included, targets Drupal 11.3+ and 12 only and is built on the current Views #[ViewsStyle] attribute plugin system rather than the annotation discovery Drupal 12 removed. If a Drupal 10 to 11 upgrade is what is standing between you and this module, that upgrade is work I do.
What you build with it
Two shapes: full-width hero, or a grid of Hero Cards
The Hero Card Width setting decides which one you get. Set it to 0 and each row expands to the view's full available width — a stacked list of full-width hero sections, the classic landing-page banner. Give it a value in px, vw, vh, em or rem and rows lay out as fixed-width cards instead — a grid of visually rich "Hero Cards" that combine a background image with structured overlay content, useful for feature sections and category highlights below the main banner.
Overlay position, animation, and speed
The overlay — everything after the first field — can be positioned at nine points across the hero (middle, the four edges, the four corners) and animated in with fade, zoom, or a directional slide, at a speed and easing you choose. Not every combination reads well: a corner-positioned overlay animated with Zoom looks lopsided, and a Slide From Top overlay placed at Left or Right slides from an unexpected direction. The module does not block a bad combination — pick position and animation together, and preview it.
Responsive by construction
Configurable breakpoints collapse the hero into a regular stacked card on small screens, and the module works natively with Drupal's responsive image styles — set a responsive image field as the first field and the hero's background scales correctly across device sizes without extra configuration.
Building the view
| Requirement | Detail |
|---|---|
| Format | Row style, with at least two fields |
| First field | Must be an image field — Image or Responsive image formatter. Not a URL-to-image formatter. It can be clickable. |
| Remaining fields | Grouped together as the hero overlay content |
| CSS class | vvj-hero, added alongside Views' own js-view-dom-id class on every view using this plugin |
| Not supported | Views' "Grouping Field" option — the current implementation does not work with it; leave it off |
Custom tokens for Views header and footer
Views' own "Use replacement tokens from the first row" option, available on a Global: Text area or Global: Unfiltered text field in a header or footer, does not work against this style plugin's output — the default {{ title }}-style tokens resolve to nothing. VVJH ships its own token set instead:
[vvjh:title]- Replaces the default
{{ title }}token. [vvjh:field_image]- Replaces the default
{{ field_image }}token, and the same pattern applies to any other field. [vvjh:title:plain]- Append
:plainto any field token to strip HTML from the output.
These tokens pull data straight from the rendered view fields, so a field using a complex rewrite (Global: Custom text with its own {{ tokens }}) is not supported — use the individual field token instead. Under the hood, token resolution runs through the shared vvj_core.token_resolver service, but the [vvjh:field] syntax itself is unchanged from the 1.x branch.
Installation
composer require drupal/vvjh:^2.0
drush en vvjh -y
drush crComposer resolves and installs vvj_core automatically. After enabling, edit or create a view, and in the Format section choose Vanilla JavaScript Hero from the display style options.
Common questions
Does Views Hero work without Views UI enabled?
You need Views UI (core, not required to stay enabled permanently) to select the display style through the admin interface, or you can define the style in a view's exported configuration directly, as the module's own vvjh_example config in the codebase does.
Can I use a plain image URL field as the hero background?
No. The first field must be rendered through an Image or Responsive Image formatter, not a URL-to-image formatter. This is what lets the module read the actual image markup and apply responsive behaviour to it.
Does the hero section work with Drupal's Grouping Field option in Views?
No — this is a stated limitation of the current implementation. Leave the Grouping Field setting off for any view using this style.
What happens on a Drupal 10 site?
VVJH 2.x does not install — its core_version_requirement is ^11.3 || ^12. Stay on the 1.x branch, or plan the Drupal 11 upgrade first.
Do I need to write CSS to use this?
No. The module ships its own stylesheet, toggled with the Enable default CSS styling setting, and the responsive breakpoint stylesheets load automatically. You can still target .vvj-hero yourself if you want a different look.
Related VVJ display formats
Hero handles the top-of-page banner. For a similar full-width treatment with a scroll-driven background, see Views Parallax. For presenting a Views row set as a modal image gallery instead of a banner, see Views Lightbox. If your components live in Paragraphs rather than Views, Paragraphs Bundles ships a hero paragraph type built the same way.
If you want a hero section built and tuned for a specific site rather than configured yourself, or a Drupal 10 to 11/12 upgrade that clears the way for VVJH's requirements, see my Drupal services or get in touch.
