Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-mock
Placeholder media via data attributes. Add data-mock to img, video, iframe, or canvas for instant placeholder boxes with X-pattern, presets, and photo service integration.
Overview
The data-mock attribute turns native media elements into placeholder boxes. CSS renders the visual (gray box, X-pattern) and JS generates a valid src to keep the element well-formed. Moving to production means replacing src and removing data-mock — no HTML restructuring.
Basic placeholder image
<img data-mock width="400" height="300" alt="Hero banner">How It Works
- CSS applies a gray background, dashed border, and diagonal X-pattern via gradients
- JS generates an inline SVG data URI as
src(for<img>),poster(for<video>),srcdoc(for<iframe>), or draws on<canvas> - The label text comes from the
altattribute (images),title(iframes), oraria-label(canvas) - Named presets set aspect ratio and default dimensions via CSS — no
width/heightattributes needed
Attributes
| Attribute | Type | Description |
|---|---|---|
data-mock |
string | Preset name (hero, card, avatar, etc.) or empty for generic placeholder. Special values: photo (picsum), placehold (placehold.co). |
data-seed |
string | Reproducible seed for photo (picsum) and portrait/avatar/headshot presets. Same seed always returns the same image. |
data-mock-init |
boolean | Set automatically to prevent double-binding. Do not set manually. |
Presets
Named presets set aspect-ratio and a default inline-size via CSS. Explicit width/height attributes override the JS dimensions used for SVG generation.
| Preset | Aspect Ratio | Default Width | Use Case |
|---|---|---|---|
hero | 3:1 | 100% | Hero banners |
card | 16:9 | 400px | Blog/article cards |
avatar | 1:1 | 48px | User avatars — uses portrait photo |
portrait | 1:1 | 128px | Person portrait photo |
profile | 1:1 | 128px | Profile photo (alias for portrait) |
headshot | 1:1 | 256px | Larger portrait for bios, team pages |
product | 1:1 | 400px | Product images |
thumbnail | 1:1 | 150px | Grid thumbnails |
logo | 4:1 | 200px | Brand logos |
og | 1200:630 | 100% | Open Graph images |
banner | 728:90 | 100% | Ad banners |
Preset examples
<img data-mock="hero" alt="Hero banner"><img data-mock="card" alt="Featured article"><img data-mock="avatar" alt="User photo"><img data-mock="product" alt="Product image"><img data-mock="thumbnail" alt="Gallery thumb"><img data-mock="logo" alt="Company logo">Photo Service
Use data-mock="photo" for realistic placeholder photos from picsum.photos. The image dimensions come from width and height attributes.
Add data-seed for reproducible results — the same seed always returns the same photo.
Photo from picsum
<img data-mock="photo" width="400" height="300" alt="Product shot"> <!-- Reproducible with data-seed --><img data-mock="photo" width="400" height="300" data-seed="42" alt="Consistent photo">Placehold.co
Use data-mock="placehold" for labeled placeholder images from placehold.co. The alt text is used as the label.
Placehold.co integration
<img data-mock="placehold" width="400" height="300" alt="Labeled placeholder">Person Portraits
The portrait, avatar, profile, and headshot presets generate realistic AI-generated face photos from the faker-js portrait CDN (CC0 licensed). The face is deterministic — the same data-seed or alt text always produces the same person.
Portrait presets
<!-- Small avatar (48px) --><img data-mock="avatar" alt="Alice Morgan"> <!-- Standard portrait (128px) --><img data-mock="portrait" alt="Ben Torres"> <!-- Large headshot (256px) --><img data-mock="headshot" alt="Chloe Park"> <!-- Deterministic via data-seed --><img data-mock="portrait" data-seed="user-42">Programmatic API
Use the VanillaBreeze.mock.portraitUrl() function for dynamic scenarios.
Portrait URL utility
<section> <h2>Video, Iframe, and Canvas</h2> <p><code>data-mock</code> works on all media elements.</p> <h3>Video</h3> <p>Gets a <code>poster</code> attribute with an SVG placeholder showing a play icon and label. Defaults to 16:9 aspect ratio.</p> <code-block language="html" show-lines label="Video placeholder" data-escape><video data-mock width="800" height="450" alt="Product demo"></video>Iframe
Gets a srcdoc with a minimal HTML page showing a centered label. Defaults to 16:9 with min-height 300px.
Iframe placeholder
<iframe data-mock width="600" height="400" title="Embedded map"></iframe>Canvas
Draws the X-pattern and label directly on the canvas context. Defaults to 4:3 aspect ratio.
Canvas placeholder
<canvas data-mock width="400" height="300" aria-label="Chart area"></canvas>Inside Figure
Works inside <figure> and <picture> with no structural changes needed.
Figure with mock image
<figure> <img data-mock="card" alt="Team photo"> <figcaption>Our engineering team</figcaption></figure>Production Transition
Moving to production requires no HTML restructuring. Replace src and remove data-mock.
Prototype to production
<!-- Prototype --><img data-mock width="400" height="300" alt="Hero banner"> <!-- Production: replace src, remove data-mock --><img src="/images/hero.webp" width="400" height="300" alt="Hero banner">Styling
The placeholder colors use design tokens (--color-gray-200, --color-gray-400). Override them with element-scoped CSS.
Custom placeholder colors
/* Override placeholder colors */img[data-mock] { background-color: oklch(95% 0.02 250); border-color: oklch(80% 0.02 250);}Wireframe Integration
When inside a [data-wireframe] container, mock media automatically adapts to wireframe tokens (--wireframe-fill, --wireframe-stroke, --wireframe-border). No extra configuration needed.
Dynamic Elements
Elements added to the DOM after page load are automatically enhanced via a MutationObserver.
Dynamic mock elements
<section> <h2>Accessibility</h2> <ul> <li>Always include <code>alt</code> text on images — it doubles as the placeholder label</li> <li>Use <code>title</code> on iframes and <code>aria-label</code> on canvas for labeling</li> <li>The generated SVG includes <code>role="img"</code> and <code>aria-label</code></li> <li>Placeholder images get <code>loading="lazy"</code> for photo/placehold variants</li> </ul></section>