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-clip
Responsive shape masking for images and figures using CSS shape() — hexagon, arch, swoosh, leaf, diagonal-frame, torn.
Overview
Apply data-clip to <img> or <figure> elements to mask them into responsive shapes. All shapes use percentage-based coordinates, so they scale with the element size. object-fit: cover is automatically enforced on clipped images.
Variants
| Value | Shape | Best For |
|---|---|---|
hexagon |
Six-sided polygon | Avatars, profile photos, tech aesthetics |
arch |
Rounded arch top, flat bottom | Architectural photos, elegant presentations |
swoosh |
Flat top, curved bottom-right | Hero images, marketing banners |
leaf |
Four-curve organic leaf | Nature themes, organic aesthetics |
diagonal-frame |
Parallelogram tilt | Dynamic layouts, action/sports imagery |
torn |
Jagged torn bottom edge | Vintage, scrapbook, casual aesthetics |
Usage
On <img> directly
Direct image clipping
<img data-clip="hexagon" src="avatar.jpg" alt="Profile photo" width="300" height="300"> <img data-clip="arch" src="building.jpg" alt="Cathedral entrance" width="400" height="400"> <img data-clip="torn" src="vintage.jpg" alt="Old photograph" width="640" height="400">On <figure> container
When applied to <figure>, the clip targets the <img> inside, preserving the <figcaption> below the clipped image.
Figure container clipping
<figure data-clip="hexagon"> <img src="avatar.jpg" alt="Profile photo" width="300" height="300"> <figcaption>Team member</figcaption></figure>