# Team cards (`team-cards`) "Ask for Maria" staff cards: portrait under one shared brand tint (so mismatched phone photos read as a set), role, a one-line quote from a real review, and Book with Maria. | | | |---|---| | Tag | Showcase | | Size | 1.1 KB gzipped own code (JS 0.0 KB + CSS 1.1 KB; 2.3 KB raw) | | Dependency | none (vanilla + native APIs) | | Best for | Salons, barbers, med spa, tattoo, physio and chiro, small trades crews with named techs | | Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/team-cards/) | ## What it does Pure CSS. Portraits go grayscale + a multiply layer in the accent colour at 42%; on desktop hover or keyboard focus the real photo fades back. On phones the cards are a swipe row (78% wide, next one peeks); from 760 px a grid. --fp sets each face's focal point. ## When to use - Reviews name staff ("ask for Dre"): Mobbin upgrade #8. - Owner-operators: one card can become the About section. - The "face on every site" rule: a real staff face beats an empty room. ## Don't - Quotes that aren't in their reviews, or staff who have left. - Stock portraits presented as staff (never). - A different tint per person (the point is one shared treatment). ## Reduced motion, no JS, accessibility - No JS needed. - Reduced motion: the tint swaps without a fade, no zoom. - Alt text names the person; quote source in <cite>; Book links are 44 px tall. ## Notes - Tint strength: --tc-tint-amt (0.3-0.5). For dark brands set --tc-tint to the deep band colour instead. ## Relation to the effects libraries New. ## Use it Copy this folder to the site as `/wbl/team-cards/` (keep `vendor/` if there is one), then: ```html
``` 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.