<div class="card" style="max-width:24rem">
  <div style="display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)">
    <span style="width:2.75rem;height:2.75rem;border-radius:var(--radius-pill);background:var(--bg-muted)"></span>
    <span style="flex:1;display:flex;flex-direction:column;gap:var(--space-2)">
      <span style="height:var(--space-3);width:60%;border-radius:var(--radius-sm);background:var(--bg-muted)"></span>
      <span style="height:var(--space-3);width:35%;border-radius:var(--radius-sm);background:var(--bg-subtle)"></span>
    </span>
  </div>
  <span style="display:block;height:var(--space-3);border-radius:var(--radius-sm);background:var(--bg-muted);margin-bottom:var(--space-2)"></span>
  <span style="display:block;height:var(--space-3);width:85%;border-radius:var(--radius-sm);background:var(--bg-muted);margin-bottom:var(--space-2)"></span>
  <span style="display:block;height:var(--space-3);width:70%;border-radius:var(--radius-sm);background:var(--bg-subtle)"></span>
</div>

Usage

Skeletons are static grey blocks from the neutral tokens: no shimmer, no pulse. Decorative animation is banned; a calm placeholder is the Novus loading state.
Match the skeleton's shape to the content that will replace it (rows for a table, a card for a card), so nothing jumps on arrival.
Show a skeleton only for loads long enough to notice; flashing one for a fast response is worse than nothing.
Mark the loading region with aria-busy="true" until the real content lands.

‹ Slide-over Empty state ›