About this block

Full Bleed Photo is a hero built on one big photograph: a player sliding into a cloud of clay court dust, in black and white, as a dark exposure in dark mode and a high key one in light. The navbar, a two line headline, a lede and two pills sit on the left over the empty side of the frame, and the photo fades into the page at the foot of the hero, ready for the next section.

Scrims of the background token sit between the photo and the copy, so the muted lede keeps AA contrast over the brightest dust in either mode. From lg the side scrim is measured against the content column rather than the window, so the copy keeps the same cover on any screen. Below lg the copy needs the whole width, so the photo follows it instead, faded into the page at both ends.

When to use

Use it for a product with a strong physical world behind it, such as sports science, field work, logistics or events, where a photograph of the moment says more than a screenshot. One frame carries the whole hero, so the copy can stay short.

A natural flow around it on a Modern SaaS page:

Before

• Nothing. It carries its own navbar, so it opens the page.

After

• Logo Clouds to name the teams that already train with it
• Feature Sections to show the data behind the photograph

What you can customize

• The photo. Replace the light and dark images in the block's folder under public/blocks. Pick a frame with its subject on the right and open space on the left, then tune object-position for small screens.
• Scrims. The side scrim's stops are percentages of background over the photo. If your photo is brighter where the copy sits, raise them until the lede passes AA.
• Copy and actions. Rewrite the headline and lede, and point the pills and the navbar action at your demo and tour flows.

Tip: shoot or generate the dark and light versions from one frame. When the subject sits in the same place in both, the hero keeps its composition as the mode changes.