Skeleton
Placeholder shapes while content loads. Skeletons are decorative: hide them from assistive technology with aria-hidden="true" and mark the waiting container with aria-busy="true". Replace them with real content; do not leave them in the DOM.
<div class="iv-grid iv-u-gap-4 iv-u-grid-cols-1 iv-u-md-grid-cols-2" aria-busy="true">
<span class="iv-u-sr-only">Loading the release summary</span>
<article class="iv-card">
<div class="iv-skeleton iv-skeleton--rect" aria-hidden="true"></div>
<div class="iv-card__body iv-stack iv-u-gap-3">
<div class="iv-skeleton iv-skeleton--title" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true" style="inline-size: 80%"></div>
</div>
</article>
<article class="iv-card">
<div class="iv-card__body iv-stack iv-u-gap-3">
<div class="iv-cluster iv-u-gap-3 iv-u-items-center">
<div class="iv-skeleton iv-skeleton--circle" aria-hidden="true"></div>
<div class="iv-stack iv-u-gap-2" style="flex: 1">
<div class="iv-skeleton iv-skeleton--title" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true" style="inline-size: 45%"></div>
</div>
</div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true" style="inline-size: 60%"></div>
</div>
</article>
</div>Modifiers
--text, --title, --circle, --rect. The shimmer uses @keyframes iv-shimmer and is static under prefers-reduced-motion.
Class index
Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.
| Class | What it does |
|---|---|
iv-skeleton--text | Line of text: one line height with the text radius. |
iv-skeleton--title | Taller, shorter line, for a heading. |
iv-skeleton--rect | Rectangular block: an image, a card. |
iv-skeleton--circle | Circle, for an avatar. |