Placeholders
Drop these wherever real content will go: images, video, maps, charts, avatars. Size with an inline height or aspect-ratio. Each variant self-labels through its icon, so the wireframe reads even at a glance.
All three share the same diagonal stripe and the same border treatment. They only differ in the icon and the dark/light contrast. Override the icon by changing the <i> child; the placeholder still reads correctly.
.ph.dark uses #1d2027 as the background and a white-tinted stripe; great for hero blocks where the real layout will sit on a dark surface. .bg-stripe is the same diagonal pattern stripped down to just the background. Drop it on any element to mark it as a placeholder without the standard chrome.
.body.Device frames are illustration primitives. They look like a browser or a phone, but they aren't responsive previews. For the side-column mobile review panel used on every wireframe, use .phone (defined in wireframe.css), not .device-phone.
A small CSS icon + a two-word name. Use these inside dark footers, press-logo strips, or "as seen in" rows where the wireframe should hint at a brand mark without committing to one. Mix shape variants to get visual variety from a single primitive.