Skeleton

Shimmer placeholders for content that is loading. Uses the primary color at low opacity for an on-theme shimmer effect.

Text

TEXT LINES

<span class="nf-skeleton nf-skeleton-text"></span>
<span class="nf-skeleton nf-skeleton-text"></span>
<span class="nf-skeleton nf-skeleton-text nf-skeleton-text-short"></span>

Heading

HEADING

<span class="nf-skeleton nf-skeleton-heading"></span>

Avatar

AVATAR

<span class="nf-skeleton nf-skeleton-avatar"></span>

Button

BUTTON

<span class="nf-skeleton nf-skeleton-button"></span>

Card

CARD

<span class="nf-skeleton nf-skeleton-card"></span>

Image

16:9 IMAGE

<span class="nf-skeleton nf-skeleton-image"></span>

Composed example

CARD SKELETON

<div class="nf-card" style="max-width: 20rem;">
<div class="nf-card-body" style="display: flex; gap: var(--nf-space-4); align-items: flex-start;">
  <span class="nf-skeleton nf-skeleton-avatar"></span>
  <div style="flex: 1;">
    <span class="nf-skeleton nf-skeleton-heading" style="width: 60%; margin-bottom: var(--nf-space-3);"></span>
    <span class="nf-skeleton nf-skeleton-text"></span>
    <span class="nf-skeleton nf-skeleton-text nf-skeleton-text-short"></span>
  </div>
</div>
</div>

Class reference

Class	Description
`nf-skeleton`	Base — shimmer animation, must be combined with a shape
`nf-skeleton-text`	Full-width text line, 0.875rem tall
`nf-skeleton-text-short`	Shortens `.nf-skeleton-text` to 60% width
`nf-skeleton-heading`	1.5rem tall heading placeholder
`nf-skeleton-avatar`	2.5rem square avatar placeholder
`nf-skeleton-button`	2.5rem × 8rem button placeholder
`nf-skeleton-card`	Full-width, 10rem tall card placeholder
`nf-skeleton-image`	Full-width 16:9 image placeholder