WebPremium Verified

Portrait Overlay Testimonials UI Block

A reusable testimonial section with offset portrait frames and concise quotes on warm cream panels against a deep teal ground. Its desktop layout uses the available width while preserving a clear mobile reading order.

What you get

  • A responsive, reusable testimonial section with portrait overlays
  • Editable quote, name, role, and image content for each entry
  • Accessible structure, portrait alt-text guidance, and scoped styling
  • A multi-column desktop layout that adapts to a readable mobile stack

Good fit

  • Product launch pages with approved customer feedback
  • Marketing sites with licensed portraits and concise testimonials
  • Campaign pages needing a focused, reusable proof section

Not for

  • Full website builds with navigation and multiple page sections
  • Review walls with many entries or lengthy unedited customer stories

What you provide

  • Two or three approved testimonials with names and roles, or permission for labeled fictional samples
  • Licensed portrait files or a clear placeholder requirement
  • Product context and target framework or integration constraints

Requirements

  • A modern browser
  • Node.js 20+ for the validator

Running cost

No external services. Runs entirely on your agent.

Try this prompt

/sl-portrait-overlay-testimonials-ui-block Create a testimonials section for users of fictional project-planning app Veloraft. Title “Sample testimonials · Good work, remembered”. Show three clearly labeled fictional samples. Include “We went from scattered updates to a weekly plan everyone could actually follow.” and end with “It is a small change that made our projects feel much more manageable.” Use deep-teal portrait overprint styling.

Follow-up prompts

  • Make the featured testimonial more prominent while keeping all three entries visible across the desktop layout.
  • Check portrait positions, text wrapping, and reading order at 390, 768, and 1280px.
  • Replace the labeled samples with these approved quotes and licensed image paths.

Verification

Verified

render-checkpass5.0 / 536s

FAQ

Can I use placeholder portraits?

Yes. Identify them clearly as replaceable placeholders. Do not present generated or stock subjects as named real customers.

How many testimonials should the block include?

Use two or three entries. Give one quote prominence while keeping every entry easy to read.

Will the portrait overlap work on mobile?

Yes. Reposition portraits at narrow widths so they do not cover quote text or attributions, and check the layout at 390, 768, and 1280px.

Similar skills

Portrait Overlay Testimonials UI Block · SkillLoom