Hero

45 templates in this category. Each page has the screenshots, the structure, what to change and the CSS variables.

Hero · Accordion — A full-bleed hero split into photo panels: one open (number, title, text, button), the others folded into narrow strips with their number and a vertical name.
Hero · Accordion (cards) — Photo cards side by side in the page width: the folded ones show their name in a white pill, the open one its text in a light box at its foot.
Hero · Accordion (labels) — A full-bleed hero split into photo panels with thin lines between them: the folded strips show their name upright at the top, the open panel its text at the bottom end.
Hero · Animated grid — Four photos in two columns and a light panel with the text.
Hero · App — A centered intro (H1, lead, two buttons), a strip of tags running from edge to edge, and a framed screenshot of the product sitting on the change from gray to white, with its caption.
Hero · Columns — A hero split into full-bleed columns, each with a title, one line and a button over the hero's photo, with the H1 over them at the top.
Hero · Cube — A centered intro (H1, lead) over a see-through 3D cube that tumbles slowly, one photo per face cut into 3×3 pieces; the button sits on the cube, and hovering it spreads the pieces apart.
Hero · Dashboard — Intro (H1, lead, two buttons) beside a product screenshot in a browser window, with three figure cards floating over its edges that drift gently with the mouse.
Hero · Feature tabs — A full-screen hero over a darkened photo: the open card's text (H1, lead, button) and a row of three cards at the bottom.
Hero · Floating people — Intro (H1, lead, button) beside three round photos of people, each with a small floating bubble: what they offer and their name.
Hero · Form — A dark box over a photo with the H1, a lead and two buttons; beside it, climbing over its edge, a white card with a short form (name, phone, email) and two quick contacts: call and WhatsApp.
Hero · Fragment — A hero whose photo comes in through eight vertical strips on load and stays cut by thin lines; the intro and a row of figures sit on it.
Hero · Gallery — Three columns at the same height: two stacked photos, the H1 on top with the lead and button at the bottom, and a mosaic of four photos in two rows.
Hero · Image text — A huge word filled with a photo on a light background; its letters grow until they fill the screen, cutting the photo open, then the photo darkens and the intro (H1, lead, button) rises over it.
Hero · Lights — A dark hero with thin vertical lines and small lights running down them; the intro on the left and three columns of photos moving up and down at different speeds on the right.
Hero · Link backgrounds — A centered hero over a photo with a bar of links: hovering or focusing a link fades the hero's photo to its own, and a colored pill slides under it.
Hero · Logos band — A centered hero that fills the screen: eyebrow, a large H1, the lead and two buttons; at its foot a fine line from edge to edge with a short line of text set into it, and an endless strip of client logos.
Hero · Marquee band — The H1 on top, a dark band of words running from screen edge to screen edge under it, then the lead and the button; a photo beside them, crossed by the band.
Hero · Marquee split — A photo fills the right half of the section; on the left a very large H1 with plenty of room under it, then a straight dark band runs from screen edge to screen edge with short phrases, and the lead and the button under it.
Hero · Minimal — A centered hero on a light background: a very large H1 with one outlined phrase, a lead and two buttons.
Hero · Mosaic — A mosaic of four photos in two offset columns beside the intro (H1, lead, two buttons).
Hero · Orbit — A centered intro over a huge circle of photos that turns slowly; only its top arc shows.
Hero · Orbit (ellipse) — The intro beside a circle of photos laid down in 3D: they turn in an ellipse, always facing you, and grow as they pass in front.
Hero · Perspective — A split intro (H1 on the left, lead and buttons on the right) over a strip of photos turned in 3D that runs from edge to edge, without end.
Hero · Perspective (side) — The intro on the left and, on the right, a strip of tall screenshots turned in 3D that runs to the screen edge, without end.
Hero · Photo — A cut-out subject (a pet in the demo) stepping out of a rounded panel with a brand gradient and large blurred lights drifting inside it; the intro (H1, lead, two buttons) beside it.
Hero · Room — A centered intro (H1, lead, two buttons) inside a room drawn in 3D: four walls with lines running towards you and photos going away into the room, each on its own lane (as the original).
Hero · Room (together) — A centered intro (H1, lead, two buttons) inside a room drawn in 3D: four walls with lines running towards you and photos riding them, each on its own lane.
Hero · Search — A shop hero over a darkened photo with the H1, a white search bar that searches the products, a line of popular searches (a click writes the term in the bar and searches) and a row of benefits with icons.
Hero · Slideshow (double) — A full-screen hero with a centered intro over photos that take turns in two columns going opposite ways, under a dark layer, with no script.
Hero · Slideshow (photo columns) — A full-screen hero over three columns of photos taking turns: in each, the top photo folds up to show the next while they drift sideways.
Hero · Slideshow (sideways) — A full-screen hero with a centered intro over photos that slide in from the side one after another, under a dark layer, with no script.
Hero · Slideshow (slide up) — A full-screen hero with a centered intro over photos that slide up one after another, under a dark layer, with no script.
Hero · Sphere — A centered intro riding over the top of one photo cut into pieces on a slowly turning sphere (hover it, or the button, to see the photo whole), and under it a row with the figures on both sides and the button in the middle.
Hero · Sphere (helix) — The intro on the left, one photo cut into strips on a turning helix in the middle and three numbered points on the right.
Hero · Split media — Intro (H1, lead, two buttons) beside a media panel.
Hero · Split video — The intro (H1, lead, two buttons) beside a looping video in the viewfinder corners, with a white label, a sound button (it starts muted) and the common pause button, whose ring follows the video.
Hero · Split word — Intro (H1, lead, button) beside a full-height photo that runs to the screen edge, with a rounded bottom corner; one huge word crosses both halves at the bottom, dark on the page and in negative over the photo.
Hero · Stats collage — Intro (H1, lead, two buttons) beside a photo with two figure cards set into its opposite corners.
Hero · Sync slider — A full-bleed fade slider (photo, title that slides in behind an accent line, text and button) with a row of three white cards at the bottom right that works as its navigation: the active card gets a brand-colored border and a thin accent line on top.
Hero · Text layer — A huge name runs across the screen and through a central photo: solid outside the photo, outlined over it.
Hero · Thumbnails — Intro (H1, lead, button) beside a large photo that moves up to the next one on its own, with its text in a light box, and a column of thumbnails that picks the photo.
Hero · Typewriter — A centered hero over a darkened photo: the last words of the H1 type themselves one after another.
Hero · Video columns — Three full-height columns, each with its photo, a background video and a large name, a line and an arrow at the bottom.
Hero · Word card — Over a darkened full-bleed photo: the H1 and lead on the left, and on the right a tall white card with a label, huge words that run into a sentence and a brand-colored diagonal fill that slides away on hover.