Skeleton

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<div style="display: grid; grid-template-columns: auto 1fr; gap: var(--aparte-space-3); align-items: start" aria-busy="true">
  <span class="aparte-skeleton aparte-skeleton--circle" aria-hidden="true"></span>
  <div>
    <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
    <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
    <span class="aparte-skeleton aparte-skeleton--text" style="max-inline-size: 60%" aria-hidden="true"></span>
  </div>
  <span class="aparte-skeleton aparte-skeleton--rect" style="grid-column: 2" aria-hidden="true"></span>
</div>

A loading placeholder

Decorative: give the element aria-hidden=“true” (or wrap the group behind a single aria-busy region) so a screen reader does not read out an empty box. A skeleton is a block with no margin of its own: the recipe spaces consecutive text lines and nothing else, so a GROUP is laid out by its container — a grid with a gap, the way the real card it stands in for is. Four lines glued edge to edge is what the example used to show.

The last line is shorter because the last line of a paragraph is, and the block sits in the text column, under the lines it stands for — not across the avatar’s. The rect’s height is the family’s token (--aparte-skeleton-rect-height), not an inline value that contradicts it.

Classes

.aparte-skeleton · .aparte-skeleton--circle · .aparte-skeleton--rect · .aparte-skeleton--text

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.