VignetteBar
Filler in a staged product shot: the words a shot doesn't need, drawn as a quiet bar, so the screen stays whole while only its subject has words.
In a row
Wrap it in the text size it replaces: it stands in that line box, so a row of bars keeps the real row's pitch. Label and value match — both words or both bars.
- Usual
- Lash fill, every 3 weeks
import { VignetteBar } from "@/components/shared/vignette-bar";
<div className="flex justify-between gap-3 text-sm">
<dt className="text-ink/60">Usual</dt>
<dd>Lash fill, every 3 weeks</dd>
</div>
<div className="flex justify-between gap-3 text-sm">
<VignetteBar width={14} />
<VignetteBar width={28} />
</div>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| width | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | — | On the spacing scale (w-8 to w-44), about as wide as the words it stands for. Vary it row to row. |
Guidelines
- Three to seven real strings a shot; the rest are bars. Bars sit at the edges, never where the eye lands.
- Still, never a shimmer: nothing is on its way. A loading state is SkeletonLine.