About this block

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.

When to use

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

• A plain nav is already included in the block, so no separate navbar is needed above this hero.

After

• A logo cloud to add quick credibility below the fold
• A feature section to explain the product after the opener lands
• A CTA at the close to capture the click

What you can customize

Swap any of these three parts without touching the rest of the layout:

• The backdrop images. Drop in your own light and dark photos. Keep the center of each image calm so the headline and CTAs stay readable over it.
• The copy. Headline, lede, and both CTAs are plain text; retune the pitch for your product without touching the layout.
• The navbar. The oval navbar is the shared navbars block, so edits there flow through to every hero that uses it.

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.