section-001

Image-led Hero

Name: Image-led Hero
Brand: GSAP Vault

Included in the VaultGet the Vault

A composed editorial hero that lets one strong photograph carry the setting, while a large crossing headline, practical stay details and a direct booking action give it purpose.

beginner

4 more details

image-led-layoutscoped-introcontainer-queriesresponsive-typography

Image-led Hero - website section preview

This section reads better at your own screen size than in the frame below:

Open the section in a new tab

About this section

A broad, image-led hero for places and practices that can make one photograph do real work. On wide screens, an oat-coloured information rail meets a full-height image and the oversized serif promise crosses their boundary. The supporting copy, stay facts and circular action give the composition enough substance to serve as a complete opening section rather than a decorative image reveal.

Read the full section overview

Below 760px the same content moves into a deliberate image-first reading order, with the headline and facts on a calm ground and the action widening for touch. GSAP adds one restrained, root-scoped entrance and a small arrow response; the final still remains complete with JavaScript unavailable or reduced motion enabled.

What's included

8 items

One art-directed local photograph with a desktop and mobile crop
Editorial split composition with a headline that crosses the image boundary
Semantic stay details and a clear native-link booking action
Container-aware mobile composition for narrow host columns
Root-scoped colour, type, spacing, split, crop and motion controls
Independent multi-instance mounting with public mount and teardown methods
Visible keyboard focus and a comfortable full-width mobile action
Complete no-JavaScript, missing-dependency and reduced-motion presentation

Perfect for

4 use cases

Independent hotels, cabins and outdoor retreats
Destination restaurants with a strong sense of place
Architecture and interiors studios opening with one completed project
Cultural residencies and rural event venues

How it works

1 section

The section uses one container-query-aware CSS grid: on wide hosts the photograph occupies the right two-thirds while the content grid remains in normal flow above it; on narrow hosts the photograph becomes the first block and the text follows. GSAP scopes a short image settle, two-line title entrance and supporting-copy stagger to each root. `window.ImageLedHero.mount(root)` mounts an inserted instance, and the returned `destroy()` reverts only that root's animations and listeners.

Difficulty Beginner

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this website section's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Included in the Vault

Get the Vault to use this section.

The Vault includes Image-led Hero, the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Sections are available only in the Vault for now while the collection is small.

Get the Vault

Documentation

Quick start

Load assets/style.css, GSAP 3.12+ and assets/script.js, then copy the single <section data-image-hero> from index.html. Keep the data-* hooks or update them in the script as well. The surrounding <main> and the body background are demo furniture.

Code snippet omitted: it ships with the download.

Make it yours

Edit the eyebrow, two headline spans, paragraph, definition-list facts, link label and href directly in the HTML. Replace the image src, dimensions and alt text together. Keep the subject left of centre for the shipped desktop crop, or change object-position on .ilh-hero__image img for your photograph.

Brand controls are grouped on .ilh-hero: --ilh-ground, --ilh-ink, --ilh-accent, --ilh-photo-ink, the two font roles, --ilh-content, --ilh-gutter, --ilh-split and --ilh-corner. The shipped accent #bd472b supports small cream text at 5.04:1; keep replacement accent/text pairs at 4.5:1 or above. For example, an architecture studio can use a pale blue ground, navy ink, a completed-building photograph and a headline such as “Space for new rituals” without touching the layout or timeline.

The Google Fonts link in index.html loads Cormorant Garamond and Instrument Sans. Replace or self-host those faces when required by your privacy and performance policy.

Behaviour

Every root mounts independently on DOM ready. For content inserted later:

Code snippet omitted: it ships with the download.

window.ImageLedHero.destroyAll() tears down every mounted instance. Adjust --ilh-intro-duration and --ilh-image-scale on the root; the script reads them when mounting.

Accessibility and integration

The demo uses an h1 because this is a primary hero. Change it to the appropriate heading level in an existing page without changing its class or data hook. The action is a native link with a visible focus style, and the facts use a definition list. Add meaningful alt text for content photography; use an empty alt only when the same information is fully duplicated in nearby text.

The section has no pinning, smooth scrolling or host-page scroll changes. It responds to its own container below 760px. Reduced-motion users and pages without JavaScript or GSAP see the finished composition immediately.

Dependencies and image credit

GSAP 3.12+ core only. The demo is pinned to GSAP 3.15.0.
Photograph by Amar Preciado on Pexels, supplied as an optimised local WebP under the Pexels licence. Check that licence for your intended use and attribution requirements.

The bundled image is 1920 × 1280. Replace it in assets/img/, or update assets/img-manifest.json and run the repository image-bake workflow if working inside GSAP Vault.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.