About this block

Photo Quote Cards is a hero that lets the work speak first. Under a transparent navbar, a two line headline and a one line lede sit on the left, and a muted text link to a free trial sits on the lede's last line at the right. Below, three cards share the column: a black and white still life of a steel bottle carrying a post's result, a creator filming with a camera held to her face, and a short customer quote.

The quote card sits on the primary surface, so it inverts with the mode: light on a dark page, dark on a light one. The photos are self hosted and cropped with object position, so each card keeps its framing as the row narrows, and the cards stack below md.

When to use

Use it for a content, social or creative tool where the output is the pitch: a scheduler, a design tool, a video editor. One stat, one person and one quote cover result, craft and trust in a single row, without a dashboard in sight.

A natural flow around it on a Modern SaaS page:

Before

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

After

• Feature Sections to show the calendar and the publishing flow
• Testimonials to give the quote card's founder a full story

What you can customize

• Photos. Replace the two images in the block's folder under public/blocks, and adjust each object-position so the subject holds its frame. Shoot or pick them as a pair so they share a grade.
• The stat and the quote. Change the result over the still life, and the quote and attribution on the primary card. Keep the quote to two lines so it leaves the card's air intact.
• Copy and actions. Rewrite the headline and lede, and point the link and the navbar pill at your trial flow.

Tip: put the stat over the darkest part of its photo. White type on a dark field needs no scrim and reads in both modes.