Skip to content

role presentation

Skeleton draft v0.1.0

A placeholder shape that stands in for content while it loads.

A skeleton draws the outline of content that is not there yet: a line of text, an avatar, a card. Several skeletons laid out like the content they stand for tell people what is coming and where, with less jump than a spinner followed by the real content. A skeleton is invisible to assistive technology; the region that loads says so itself.

States matrix

Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.

By shape

Shape default
text
circle
rectangle