Back to the library
Free

Hero Banner

A two-band hero: an avatar proof group beside a headline that types itself in character by character, then a tall intro card next to a large image with a floating badge over it.

Open full screen

About this template

The hero is built as two bands so each one can hold its own measure. The top band runs on a 1290px container: a narrow column of stacked avatars and a proof line on the left, a display headline taking seventy-one percent of the width on the right. The bottom band widens to 1820px, which is what makes the image below feel bigger than the headline above it rather than a repeat of the same box.

The headline enters one character at a time. Each character starts fifty pixels to the left of where it belongs and fully transparent, then slides into place as it fades in, with twenty milliseconds between one character and the next. That gap is what turns a hundred separate movements into a single wave crossing the sentence. The sequence waits four tenths of a second after its trigger, which is the moment the section enters the screen, so at the top of a page it plays as the page settles and further down a page it waits until you scroll it into view. It runs once and never reverses. Delay, duration, stagger and the starting offset are data attributes on the section, so you can retune it without touching the code.

The left card and the image sit in one row that never wraps until the layout has genuinely run out of width. The card sets the height, the image stretches to match it, and from 1440px down the image takes over with a minimum height of its own. A translucent badge floats over the top left of the image, an icon chip beside two lines of text.

The layout is pure CSS and travels inside the copied JSON, so it styles itself the moment you paste it. Only the headline animation needs the free companion plugin, which loads GSAP, ScrollTrigger and SplitText. Without it the section still renders exactly as designed and the headline is simply there, static. The same is true for a reader who has asked their system for reduced motion. Colours read from the Bricks variables where you have them and fall back to a hardcoded value where you do not.

The decorative line pattern behind the headline is a real image element, not a CSS background, so you can swap it or delete it in the builder without opening the class. Below 576px the proof group and headline stack, then the card and the image stack under them.

Copy this template

Free templates are open to any account. Create one and this unlocks straight away.

Create a free account

Details

Category
Framework
Access

This template animates with GSAP core, ScrollTrigger, SplitText. Install the free Bricksify Companion plugin and it loads on its own, or load the library yourself. Without it the section still renders, just without the motion.