Skeleton

Loading placeholder: a sunken rounded rect with a shimmering gradient sweep, standing in for content that is still arriving. Shape variants mimic text lines, headings, avatars, and issue cards; compose several inside the region that is loading.

Root: .skeleton on <div>, <span>

Examples

Example 1
<div class="skeleton skeleton-text" aria-hidden="true"></div>
Example 2
<span class="skeleton skeleton-avatar skeleton-avatar-lg" aria-hidden="true"></span>
Example 3
<div class="skeleton skeleton-card" aria-hidden="true"></div>

Contract

Variants & modifiers

ClassAxisRules
skeleton-textshapeoptional · exclusive
skeleton-headingshapeoptional · exclusive
skeleton-avatarshapeoptional · exclusive
skeleton-cardshapeoptional · exclusive
skeleton-avatar-xsmodifieroptional
skeleton-avatar-smmodifieroptional
skeleton-avatar-mdmodifieroptional
skeleton-avatar-lgmodifieroptional
skeleton-avatar-xlmodifieroptional

Accessibility

OnAttributeLevelWhen
.skeletonaria-hiddenrequired

Skeletons are decorative — every .skeleton must carry aria-hidden="true" so screen readers skip them, and the container being loaded should carry aria-busy="true" (assistive tech then treats the region as changing). Never put text content inside a skeleton. The shimmer animation is already collapsed to a static block by the framework-wide prefers-reduced-motion rule; no per-component opt-out is needed.

Nesting

Allowed in:

  • any region whose real content is loading (give that region aria-busy="true")
  • .skeleton-paragraph
  • .board-column-cards
  • .card-body
  • .drawer-body

Never inside (or containing):

  • .skeleton

Subcomponents

Skeleton-paragraph

Vertical stack of .skeleton-text lines with prose-like rhythm: 8px row gap, and the final line stops at 60% width so the block reads as a paragraph rather than a box.

Root: .skeleton-paragraph on <div>

Example

Example
<div class="skeleton-paragraph"><div class="skeleton skeleton-text" aria-hidden="true"></div><div class="skeleton skeleton-text" aria-hidden="true"></div><div class="skeleton skeleton-text" aria-hidden="true"></div></div>

Structure

SelectorRequiredDescription
.skeleton-textrequiredThe stacked line placeholders; the last one is automatically shortened to 60% width.

Accessibility

The wrapper itself is layout-only; the child .skeleton-text elements each carry aria-hidden="true" per the skeleton contract.

Nesting

Allowed in:

  • any loading region (aria-busy="true")
  • .card-body
  • .drawer-body

Never inside (or containing):

  • .skeleton-paragraph