SkeletonCard
Card content placeholders for media, headings, text, and actions.
Props
SkeletonCard extends HTMLAttributes<HTMLDivElement> and renders placeholder content. Wrap it in Card to add the card border and radius.
| Prop | Type | Default | Description |
|---|---|---|---|
media | boolean | number | — | Media placeholder above text. True uses the default height; a number specifies pixels. |
header | boolean | true | Title line plus a shorter subtitle, above the body. |
lines | number | 3 | Body text lines. 0 draws none. |
actions | number | 0 | How many button-shaped blocks to put at the foot. |
animation | SkeletonAnimation | "shimmer" | "shimmer" | "pulse" | "none". |
Examples
Inside a card
With media
A grid of them
Draw as many as the real grid will hold, and switch to pulse: several shimmer sweeps running out of phase add up to a lot of motion.
import { SkeletonCard } from "@solarius/onset";
{
loading ? (
<SkeletonCard media lines={2} actions={1} />
) : (
<ProjectCard project={project} />
);
}See Skeleton for the primitive block and SkeletonList for rows.