Skeleton

Text

Passing lines greater than 1 wraps the run in .ws-skeleton-text and shortens the last line, mimicking a ragged paragraph edge.

<?= ws_skeleton(['variant' => 'text']) ?>
<?= ws_skeleton(['variant' => 'text', 'lines' => 3]) ?>

Avatar

<?= ws_skeleton(['variant' => 'avatar', 'size' => 'lg']) ?>

Button

<?= ws_skeleton(['variant' => 'button', 'size' => 'md']) ?>

Input

<?= ws_skeleton(['variant' => 'input', 'size' => 'md']) ?>

Image

<?= ws_skeleton(['variant' => 'image']) ?>

Card (composite)

Emits image + title + two body lines in one call. lines, width, and height are ignored — the composite owns its own proportions.

<?= ws_skeleton(['variant' => 'card']) ?>

Custom dimensions

Reach for this only when no variant fits. width and height are emitted as inline styles, so they bypass the token scale — prefer a named variant where one exists.

<?= ws_skeleton(['width' => '100px', 'height' => '100px', 'rounded' => true]) ?>
<?= ws_skeleton(['width' => '60px', 'height' => '60px', 'circle' => true]) ?>

Workshop card — the three app homes

The placeholder Planner, Facilitator, and Synthesize show while the plan list loads. It mirrors the saved-workshop card exactly — name, meta row, lifecycle strip, footer action — so nothing shifts when the real cards arrive. count emits sibling cards that drop straight into the app's own grid; grid adds the component's own responsive wrapper for pages that don't have one.

<?php // inside an app's own grid:
echo ws_skeleton(['variant' => 'workshop', 'count' => 3]);

// standalone, with the component's grid:
echo ws_skeleton(['variant' => 'workshop', 'count' => 3, 'grid' => true, 'id' => 'fachLoading']); ?>

Composed user card

Primitives compose. Build the placeholder from the same box model as the real component rather than reaching for a custom width and height.

<?= ws_skeleton(['variant' => 'avatar', 'size' => 'md']) ?>
<?= ws_skeleton(['variant' => 'text', 'width' => '80%']) ?>
<?= ws_skeleton(['variant' => 'text', 'lines' => 2]) ?>
<?= ws_skeleton(['variant' => 'button', 'size' => 'md']) ?>