Centered With Backdrop
A minimal centered hero, headline, lede, and two CTAs, set over a full bleed backdrop with matching light and dark images and a sticky oval navbar.
A minimal centered hero, headline, lede, and two CTAs, set over a full bleed backdrop with matching light and dark images and a sticky oval navbar.
Search blocks by description or jump to a page.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Centered With Backdrop is the simplest possible hero, dressed up by a full bleed backdrop. A sticky oval navbar floats at the top, then a centered headline, a one line lede, and two CTAs sit in the open middle of the image. There is no mockup and no decoration to distract from the pitch; the photo does the heavy lifting.
The backdrop ships as two images, a bright one for light mode and a dark one for dark mode. They are swapped automatically, so only the visible image is fetched and the switch happens with no hydration flash. A soft radial scrim sits behind the copy to keep it legible however the photo crops, and every line of copy uses theme tokens so the text inverts with the backdrop: dark text on the light image, light text on the dark one.
Reach for this when you want a hero that leans on a strong image. It suits a product with a distinct visual world, a launch moment, or a brand that wants atmosphere rather than a screenshot. For a healthcare scheduling product, a calming clinical environment photo paired with a clear CTA ("Book your first appointment") converts well without crowding the fold with features. Because the copy is just a headline, a lede, and two CTAs, it stays out of the image's way and keeps focus on the click.
A natural flow around it on a Modern SaaS page:
Before
After
Swap any of these three parts without touching the rest of the layout:
Tip: pick a light and dark image with the same composition so the hero feels like one design in both themes, busy in the corners, quiet in the middle.