# Photo review cards (`review-photos`) Reviews as photo + quote cards on a native swipe track: the next card peeks, buttons and a "2 / 6" counter on the side, the rating with count on top. Never autoplays. | | | |---|---| | Tag | Showcase | | Size | 2.0 KB gzipped own code (JS 1.0 KB + CSS 1.0 KB; 4.6 KB raw) | | Dependency | none (vanilla + native APIs) | | Best for | Salons, barbers, nails, med spa, detailers, cake shops: anywhere the result is visual | | Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/review-photos/) | ## What it does A CSS scroll-snap track (so swipe, trackpad and keyboard scrolling are the browser's own, with no jank) of cards with a 4:3 photo, stars, the quote and a byline ("Maya R. · client since 2019"). JS only adds prev/next buttons, the visible-range counter, arrow keys, and hides off-screen cards from screen readers and Tab. ## When to use - After one big pull-quote (skill rule: pull-quote + short cards + count), when there are 4+ good reviews with matching photos. - Mobbin upgrade #5: photo-backed quote, "client since" only when the review says it. ## Don't - Autoplay (never). - A stock photo implying it is the reviewer's result: use their own work photos. - Trim quotes mid-sentence or rewrite them; bylines are "First L." only. ## Reduced motion, no JS, accessibility - Reduced motion: buttons jump instead of gliding. - No JS: a swipeable row of cards (no buttons). - Track is a focusable labelled list; ←/→ move one card; off-screen cards are inert; stars have an aria-label. ## Notes - 3 cards across on desktop, 2.15 on tablets, 1 + peek on phones. ## Relation to the effects libraries Batch 1's review-carousel is text cards; this adds the photo, the rating header and visible-range counter. ## Use it Copy this folder to the site as `/wbl/review-photos/` (keep `vendor/` if there is one), then: ```html

4.9
212 Google reviews

★★★★★
“I asked for a red that wouldn’t fade orange in a month. Six weeks later it’s still this colour.”
Maya R. · client since 2019
★★★★★
“Dee listened, then talked me out of the thing I’d have hated. Best cut I’ve had in LA.”
Jordan P.
★★★★★
“They did a strand test first and told me exactly what it would cost. No surprises.”
Lina K.
★★★★★
“Fixed my box-dye disaster in one visit and taught me how to keep it.”
Sam T. · Google review, Sept 2026
★★★★★
“Quiet, unhurried, and on time. I walk out looking like me, only better.”
Ana G.
★★★★★
“First salon where nobody pushed me to cover the gray. Maria blended it instead.”
Ruth L. · client since 2021

``` Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`, `--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the one-line bridge to the preview builder's `--a / --ink / --bg …`). ## License Our code: WBL-owned, original. No third-party code.