Skeleton

Placeholders in the shape of the content while it loads.

CSS only components/skeleton.css

Loading placeholder

<div class="dsgn-card" aria-busy="true" style="max-inline-size: 24rem"><span class="dsgn-visually-hidden">Loading invoice…</span>
  <div class="dsgn-cluster" data-nowrap><div class="dsgn-skeleton" data-kind="avatar"></div><div class="dsgn-stack" data-gap="xs" style="flex:1"><div class="dsgn-skeleton" data-kind="text" style="inline-size:40%"></div><div class="dsgn-skeleton" data-kind="text" style="inline-size:70%"></div></div></div>
  <div class="dsgn-skeleton" data-kind="control" style="inline-size:8rem"></div>
</div>

Usage

Placeholder with the exact size of what will load, so nothing jumps when it arrives.

Always aria-hidden by nature (no content); announce loading on the container. Pulses gently; still under prefers-reduced-motion.

Attributes

Attribute	Values and notes
`data-kind`	text one line of the surrounding text (bar = 0.75 em, centred in 1 line-height) control a Button / Input: control height, radius-m avatar a square of control height, radius-m (like Avatar) block any size you give it (image, chart), radius-l

Details

Classes: .dsgn-skeleton .dsgn-visually-hidden
Tokens used: --dsgn-control-height --dsgn-ease --dsgn-neutral-subtle --dsgn-radius-l --dsgn-radius-m --dsgn-radius-s
In Figma: Skeleton
Import alone: dsgn.systems/components/skeleton.css