Search blocks by description or jump to a page.
A hero with a rotating image carousel next to a headline and CTA. Shows several product shots or screens at the top of a landing page in turn.
Image Carousel Hero fills the full viewport with a rotating full-bleed photo. Three images cycle automatically every five seconds, each dimmed by a dark overlay so the foreground copy stays legible. Centered over that backdrop sits a small frosted pill badge, a large headline, a supporting paragraph, and a single call-to-action button. Left and right arrow buttons appear on wider screens so visitors can step through the images manually, and a row of dot indicators at the bottom edge shows which slide is active and lets users jump directly to any image.
Every text element, the badge label, headline, body copy, and button are independent strings you can rewrite freely. The image array holds three entries by default, but you can add or remove slides and the arrows and indicators update automatically. The CTA renders as a single button; a second button can be added to the flex row without layout changes.
Reach for this block when the visual story of a space or environment matters as much as the headline. It suits a real estate marketplace landing page where cycling through lifestyle photography of properties or neighborhoods does more persuasion than a single static shot. Compared to a split layout that pins one image beside the text, the full-bleed carousel commands the whole viewport and gives the content room to breathe.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The carousel, copy, and call to action are each independently adjustable without touching the others:
src and an alt string so
accessibility is maintained per image.Tip: use photos with a clear subject near the center so the dark overlay and centered text do not compete with busy edges.