A placeholder shown while the real content loads: lines of text, a title, a label, an icon, an avatar, a badge, a button, an input, a media box, a list item, a card or a table row, or the shape of any component it wraps.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
shapesmbk-skeleton--shape-<value> | texttitlelabelparagraphiconavatarbadgebuttoninputmedialist-itemcardtable-rowcomponent | text | Figma's thirteen shapes, for content that is not a component; component, not in Figma, for anything else: the skeleton wraps the real component, which keeps its size, place and corners and draws the skeleton instead of itself until it has loaded. |
sizesmbk-skeleton--size-<value> | smmdlg | md | The size of the content it stands in for: the text styles a step smaller or larger, and the icon, avatar, badge, button, input and table row at their small, medium or large size. The media shape and a wrapped component take their size from what they stand for. |
loadedsmbk-skeleton--loaded | On or off | Off | The wrapped component has loaded and shows as itself. Only the component shape has something to show. |
Examples
Usage
A title and a paragraph of three lines while content loads.
Shapes
Each text shape takes the room of one line of the text it stands in for, with a bar as tall as its capitals; a paragraph ends on a shorter line; the icon, avatar, badge, button and input take those components' sizes.
Sizes
Small, medium and large: the text styles a step apart, and the avatar and button at their three sizes.
List items
A row for a person or a file: an avatar beside a label line over a text line.
Card
A card while it loads: its frame, a picture, a title and two lines of text.
Table rows
Rows at the table's row height, with a box for selection and a line per column.
Guidelines
Purpose
A gray shape standing in for content that has not arrived yet, so the layout holds still and the person knows where things will appear. Its shape is the shape of what will come, since a skeleton's geometry must match the likely content: one of thirteen shapes for content that is not a component, each in a small, medium or large size, or, wrapped round a real component, that component's own shape.
When to use
- While a list, a card or a profile loads, in place of each text line, title, avatar, picture and button it will show.
- The list item, card and table row shapes for a whole row or card at once, on a page with no component to wrap.
- The size that matches the content: small, medium or large text, and the small, medium or large control.
- Wrapped round any component that waits for its data (an input filled from the server, a badge whose status is still coming, a button that cannot act yet), so the skeleton has that component's exact shape at whatever size it is.
When not to use
- For a delay shorter than a moment. A flash of skeleton is worse than nothing.
- As a spinner for an action. Use the progress bar.
Usage rules
Do
- Match shapes to the content: a title skeleton for a title, an avatar skeleton for an avatar.
- Wrap the real component when there is one: its own shape fits better than any block.
- Give a text skeleton the number of lines the text will have, so it is as tall as the paragraph that replaces it.
- Give a skeleton the width its content will have, and a media skeleton the ratio of the picture or video it replaces.
Don't
- Keep skeletons on screen after an error. Show the error.
Match each shape to what will load, so nothing jumps when the content arrives.
Text lines standing in for a picture and a name make the row jump when it loads.
Anatomy
- A shape: one element. The text, title and label shapes are one line of their text: a bar as tall as its capitals, in the middle of one line height. Given more than one line, and always for the paragraph shape, the element holds a line part per line, one line height apart, and draws nothing itself; a paragraph's last line is shorter.
- The icon, avatar, badge, button and input shapes are solid blocks at those components' sizes, and the media shape a block at the proportion of the picture it replaces, 16:9 by default.
- A block: the list item, the card and the table row, one element holding other shapes. The list item is an avatar beside a label line over a smaller text line, in a text part. The card is a framed block with a 16:9 media shape, a title line and two text lines. The table row is a row at the control height with a rule along its foot, a small square for the selection box and a label line per column.
- A wrapper: one element round the component it stands in for, drawing no box of its own. The component inside keeps its size, place and corners and draws the skeleton instead of itself until it has loaded.
Behavior
As it appears, a soft band sweeps across it from the start edge to the end edge, easing in and out, three times, so the reader can see the page is working; then it rests as the plain shape, since nothing may move on its own for more than five seconds beside other content. The band begins and ends outside the skeleton, so each sweep starts on the plain shape. Skeletons side by side of the same width sweep together. Under reduced motion it does not move: it is the plain shape, which says the same thing. A wait long enough to outlast the sweep is better shown with a progress bar.
Accessibility
What it does for you
- Skeletons are hidden from assistive technology.
- A wrapped component is also out of reach while it waits: the keyboard skips it and assistive technology does not see it, so nobody can press a button that cannot act yet.
- Once loaded, a wrapped component is reachable again. It never left the page, so it keeps its state and focus can move to it at once.
- The React wrapper gives the wrapper
inertandaria-hidden="true"through itsloadedflag, and removes both once the component has loaded.
What you must do
- Make the region that shows skeletons announce that it is loading, and announce again when the content arrives.
- In plain markup, give the wrapper
inertandaria-hidden="true"while it waits, and remove both once the component has loaded.
How to test
- Tab through the page while a wrapped component waits: focus skips it. Once it has loaded, Tab reaches it.
- With a screen reader, the skeletons are not read, the region says it is loading, and says so again when the content arrives.
- With reduced motion on, the skeleton does not move.
Source
The files the skeleton is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-skeleton — Skeleton. Figma "Skeleton" 915:9 (Shape × Size, 39 variants).
* Widths in Figma are example widths and not bound; a skeleton takes the width
* it is given. The text, paragraph, title and label shapes take the room of
* the text they stand in for: each takes its preset's face, size and line
* height (body, heading and label, one step per size), so one line is one
* line height tall, with a bar as tall as the text's capitals drawn in its
* middle, and the lines of a paragraph (line parts, written by the wrapper for
* more than one line) stand one line height apart, so a skeleton paragraph is
* exactly as tall as the paragraph it stands in for. The icon, avatar, badge,
* button and input match those components' sizes at each size; the media
* shape takes the proportion of the media it replaces, set by the wrapper, 16:9
* by default. The list item, card and table row shapes are built from the
* other shapes, so each bar inside them is a line of the text it stands for.
* While it waits, a lighter band sweeps across it a few times with the
* loading motion, then it rests (rules at the end). */
.smbk-skeleton {
display: block;
box-sizing: border-box;
width: 100%;
height: 1lh;
padding-block: calc((1lh - 1cap) / 2);
background-clip: content-box;
border-radius: var(--smbk-radius-control-xs);
background-color: var(--smbk-color-surface-skeleton);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
}
/* ---- size: the text shape's body style, one step per size ---- */
.smbk-skeleton--size-sm {
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
}
.smbk-skeleton--size-lg {
font-family: var(--smbk-typography-body-lg-font-family);
font-size: var(--smbk-typography-body-lg-font-size);
font-weight: var(--smbk-typography-body-lg-font-weight);
line-height: var(--smbk-typography-body-lg-line-height);
}
/* ---- title and label: the heading and label styles, one step per size ---- */
.smbk-skeleton--shape-title {
border-radius: var(--smbk-radius-control-sm);
font-family: var(--smbk-typography-heading-md-font-family);
font-size: var(--smbk-typography-heading-md-font-size);
font-weight: var(--smbk-typography-heading-md-font-weight);
line-height: var(--smbk-typography-heading-md-line-height);
}
.smbk-skeleton--shape-title.smbk-skeleton--size-sm {
font-family: var(--smbk-typography-heading-sm-font-family);
font-size: var(--smbk-typography-heading-sm-font-size);
font-weight: var(--smbk-typography-heading-sm-font-weight);
line-height: var(--smbk-typography-heading-sm-line-height);
}
.smbk-skeleton--shape-title.smbk-skeleton--size-lg {
font-family: var(--smbk-typography-heading-lg-font-family);
font-size: var(--smbk-typography-heading-lg-font-size);
font-weight: var(--smbk-typography-heading-lg-font-weight);
line-height: var(--smbk-typography-heading-lg-line-height);
}
.smbk-skeleton--shape-label {
font-family: var(--smbk-typography-label-md-font-family);
font-size: var(--smbk-typography-label-md-font-size);
font-weight: var(--smbk-typography-label-md-font-weight);
line-height: var(--smbk-typography-label-md-line-height);
}
.smbk-skeleton--shape-label.smbk-skeleton--size-sm {
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
}
.smbk-skeleton--shape-label.smbk-skeleton--size-lg {
font-family: var(--smbk-typography-label-lg-font-family);
font-size: var(--smbk-typography-label-lg-font-size);
font-weight: var(--smbk-typography-label-lg-font-weight);
line-height: var(--smbk-typography-label-lg-line-height);
}
/* A paragraph: the block holds its lines, one line height apart, and draws nothing itself. */
.smbk-skeleton:has(> .smbk-skeleton__line) {
display: flex;
flex-direction: column;
gap: calc(1lh - 1cap);
height: auto;
padding-block: calc((1lh - 1cap) / 2);
background: none;
animation: none;
}
.smbk-skeleton__line {
display: block;
height: 1cap;
border-radius: inherit;
background-color: var(--smbk-color-surface-skeleton);
}
/* The paragraph shape ends on a shorter line, as a paragraph does. */
.smbk-skeleton--shape-paragraph > .smbk-skeleton__line:last-child:not(:first-child) {
width: 60%;
}
/* ---- the solid shapes: a block of the skeleton's color, no text box ---- */
.smbk-skeleton:is(
.smbk-skeleton--shape-icon,
.smbk-skeleton--shape-avatar,
.smbk-skeleton--shape-badge,
.smbk-skeleton--shape-button,
.smbk-skeleton--shape-input,
.smbk-skeleton--shape-media
) {
padding-block: 0;
background-clip: border-box;
}
.smbk-skeleton--shape-icon {
width: var(--smbk-size-icon-md);
height: var(--smbk-size-icon-md);
}
.smbk-skeleton--shape-icon.smbk-skeleton--size-sm {
width: var(--smbk-size-icon-sm);
height: var(--smbk-size-icon-sm);
}
.smbk-skeleton--shape-icon.smbk-skeleton--size-lg {
width: var(--smbk-size-icon-lg);
height: var(--smbk-size-icon-lg);
}
/* The avatar's own steps: the avatar does not change with density, so neither does its skeleton. */
.smbk-skeleton--shape-avatar {
flex-shrink: 0;
width: var(--smbk-size-40);
height: var(--smbk-size-40);
border-radius: var(--smbk-radius-full);
}
.smbk-skeleton--shape-avatar.smbk-skeleton--size-sm {
width: var(--smbk-size-32);
height: var(--smbk-size-32);
}
.smbk-skeleton--shape-avatar.smbk-skeleton--size-lg {
width: var(--smbk-size-48);
height: var(--smbk-size-48);
}
/* The badge's pill heights; the widths are Figma's examples, a short word's room. */
.smbk-skeleton--shape-badge {
width: var(--smbk-size-56);
height: var(--smbk-size-mark-md);
border-radius: var(--smbk-radius-full);
}
.smbk-skeleton--shape-badge.smbk-skeleton--size-sm {
width: var(--smbk-size-48);
height: var(--smbk-size-mark-sm);
}
.smbk-skeleton--shape-badge.smbk-skeleton--size-lg {
width: var(--smbk-size-64);
height: var(--smbk-size-mark-lg);
}
/* The button's control heights and corners; three times as wide as it is tall, a short label's room. */
.smbk-skeleton--shape-button {
width: auto;
max-width: 100%;
aspect-ratio: 3 / 1;
height: var(--smbk-size-control-md);
border-radius: var(--smbk-radius-control-sm);
}
.smbk-skeleton--shape-button.smbk-skeleton--size-sm {
height: var(--smbk-size-control-sm);
}
.smbk-skeleton--shape-button.smbk-skeleton--size-lg {
height: var(--smbk-size-control-lg);
border-radius: var(--smbk-radius-control-md);
}
/* The input's control heights and corners, as wide as it is given. */
.smbk-skeleton--shape-input {
height: var(--smbk-size-control-md);
border-radius: var(--smbk-radius-control-sm);
}
.smbk-skeleton--shape-input.smbk-skeleton--size-sm {
height: var(--smbk-size-control-sm);
}
.smbk-skeleton--shape-input.smbk-skeleton--size-lg {
height: var(--smbk-size-control-lg);
border-radius: var(--smbk-radius-control-md);
}
.smbk-skeleton--shape-media {
height: auto;
aspect-ratio: 16 / 9;
border-radius: var(--smbk-radius-container-sm);
}
/* ---- the blocks: list item, card and table row, laid out from the other shapes ----
The block draws nothing of the skeleton's itself (the card draws its frame); each shape inside
draws and sweeps on its own. */
/* No more weight than one class, so each block's own rules below set its height, padding and corner. */
.smbk-skeleton:where(.smbk-skeleton--shape-list-item, .smbk-skeleton--shape-card, .smbk-skeleton--shape-table-row) {
height: auto;
padding-block: 0;
border-radius: 0;
background: none;
animation: none;
}
.smbk-skeleton__text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--smbk-space-text-label);
min-width: 0;
}
/* The list item: an avatar beside a label line over a shorter text line, as a person or a file in a list. */
.smbk-skeleton--shape-list-item {
display: flex;
align-items: center;
gap: var(--smbk-space-inline-lg);
}
.smbk-skeleton--shape-list-item .smbk-skeleton__text > :first-child {
width: 50%;
}
/* The card: its frame, then a 16:9 picture, a title line and two text lines, the second shorter. */
.smbk-skeleton--shape-card {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-md);
padding: var(--smbk-space-inset-lg);
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
border-radius: var(--smbk-radius-container-md);
}
.smbk-skeleton--shape-card.smbk-skeleton--size-sm {
padding: var(--smbk-space-inset-md);
}
.smbk-skeleton--shape-card > .smbk-skeleton--shape-title,
.smbk-skeleton--shape-card > .smbk-skeleton--shape-text:not(.smbk-skeleton--shape-paragraph) {
width: 66%;
}
/* The table row: the row's control height with its rule along the foot, a selection box, then one
label line per column, the columns sharing the row. */
.smbk-skeleton--shape-table-row {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--smbk-space-inline-2xl);
height: var(--smbk-size-control-md);
padding-inline: var(--smbk-space-inset-md);
border-bottom: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}
.smbk-skeleton--shape-table-row.smbk-skeleton--size-sm {
height: var(--smbk-size-control-sm);
}
.smbk-skeleton--shape-table-row.smbk-skeleton--size-lg {
height: var(--smbk-size-control-lg);
}
.smbk-skeleton--shape-table-row > .smbk-skeleton--shape-icon {
flex-shrink: 0;
width: var(--smbk-size-icon-sm);
height: var(--smbk-size-icon-sm);
}
.smbk-skeleton--shape-table-row > .smbk-skeleton--shape-label {
flex: 1 1 0;
min-width: 0;
}
/* ---- motion: the sweep ----
A band of the default surface, half the skeleton's width, fading in and out at its edges, crosses
the skeleton from just past its start edge to just past its end edge with the loading purpose,
three times, then stops: three sweeps of the loading duration end inside five seconds, after
which nothing may move on its own beside other content. The skeleton's color is see-through,
and the opaque band over it reads on every surface. Both ends lie
outside the skeleton, so a sweep starts and ends on the plain shape, and where motion is stopped
(reduced motion, the rendered pictures, the end of the third sweep) the skeleton is the plain
shape at rest. The distances are the skeleton's own width: half for the band, and the positions
that put it just outside either edge. */
.smbk-skeleton,
.smbk-skeleton__line {
background-image: linear-gradient(to right, transparent, var(--smbk-color-surface-default), transparent);
background-position: -100% 0;
background-repeat: no-repeat;
background-size: 50% 100%;
animation: smbk-skeleton-sweep var(--smbk-motion-loading-duration) var(--smbk-motion-loading-easing) 3;
}
@keyframes smbk-skeleton-sweep {
to {
background-position: 200% 0;
}
}
/* ---- component: the shape of the component it wraps ----
The skeleton draws no box of its own: the wrapped component keeps its size, place and corners and
draws the skeleton's surface and sweep instead of its own look, its words, icons and pictures
hidden but still holding their room, until the loaded flag is set. Its edge keeps its width but is
clear, and the band crosses it too (measured from the border box). It must win over every state the
wrapped component draws, whatever its own rules' weight, so these rules are marked important; the
band's position is not, because the sweep moves it. */
.smbk-skeleton--shape-component {
display: contents;
font: inherit;
animation: none;
}
.smbk-skeleton--shape-component:not(.smbk-skeleton--loaded) > * {
border-color: transparent !important;
outline-color: transparent !important;
background-color: var(--smbk-color-surface-skeleton) !important;
background-image: linear-gradient(to right, transparent, var(--smbk-color-surface-default), transparent) !important;
background-origin: border-box !important;
background-position: -100% 0;
background-repeat: no-repeat !important;
background-size: 50% 100% !important;
box-shadow: none !important;
color: transparent !important;
pointer-events: none;
animation: smbk-skeleton-sweep var(--smbk-motion-loading-duration) var(--smbk-motion-loading-easing) 3 !important;
}
.smbk-skeleton--shape-component:not(.smbk-skeleton--loaded) > * * {
visibility: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
.smbk-skeleton,
.smbk-skeleton__line {
animation: none;
}
.smbk-skeleton--shape-component:not(.smbk-skeleton--loaded) > * {
background-image: none !important;
animation: none !important;
}
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
/* The shapes are backgrounds, which forced colors drops; each is outlined in GrayText inside
its own box instead, so it shows as a placeholder without taking room. A paragraph outlines
its lines, and a list item or a table row the shapes inside it, not itself; a card keeps its
frame. A wrapped component keeps its own shape, its edge in GrayText. */
.smbk-skeleton:not(:has(> .smbk-skeleton__line), .smbk-skeleton--shape-list-item, .smbk-skeleton--shape-card, .smbk-skeleton--shape-table-row, .smbk-skeleton--shape-component),
.smbk-skeleton__line {
outline: var(--smbk-border-width-hairline) solid GrayText;
outline-offset: calc(-1 * var(--smbk-border-width-hairline));
}
.smbk-skeleton--shape-component:not(.smbk-skeleton--loaded) > * {
border-color: GrayText !important;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| radius.control.xs--smbk-radius-control-xs | 2px | Radius | |
| color.surface.skeleton--smbk-color-surface-skeleton | light: #373d431adark: #606a7533changes with theme | Color | |
| typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| typography.body-lg--smbk-typography-body-lg-font-family--smbk-typography-body-lg-font-size--smbk-typography-body-lg-font-weight--smbk-typography-body-lg-line-height--smbk-typography-body-lg-letter-spacing--smbk-typography-body-lg-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 20pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| radius.control.sm--smbk-radius-control-sm | 4px | Radius | |
| typography.heading-md--smbk-typography-heading-md-font-family--smbk-typography-heading-md-font-size--smbk-typography-heading-md-font-weight--smbk-typography-heading-md-line-height--smbk-typography-heading-md-letter-spacing--smbk-typography-heading-md-text-transform | fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 28px · max: 40pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px | The quick brown fox | Typography |
| typography.heading-sm--smbk-typography-heading-sm-font-family--smbk-typography-heading-sm-font-size--smbk-typography-heading-sm-font-weight--smbk-typography-heading-sm-line-height--smbk-typography-heading-sm-letter-spacing--smbk-typography-heading-sm-text-transform | fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 24px · max: 32pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px | The quick brown fox | Typography |
| typography.heading-lg--smbk-typography-heading-lg-font-family--smbk-typography-heading-lg-font-size--smbk-typography-heading-lg-font-weight--smbk-typography-heading-lg-line-height--smbk-typography-heading-lg-letter-spacing--smbk-typography-heading-lg-text-transform | fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 32px · max: 48pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px | The quick brown fox | Typography |
| typography.label-md--smbk-typography-label-md-font-family--smbk-typography-label-md-font-size--smbk-typography-label-md-font-weight--smbk-typography-label-md-line-height--smbk-typography-label-md-letter-spacing--smbk-typography-label-md-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
| typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
| typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
| size.icon.md--smbk-size-icon-md | 20px | Size | |
| size.icon.sm--smbk-size-icon-sm | 16px | Size | |
| size.icon.lg--smbk-size-icon-lg | 24px | Size | |
| size.40--smbk-size-40 | 40px | Size | |
| radius.full--smbk-radius-full | 9999px | Radius | |
| size.32--smbk-size-32 | 32px | Size | |
| size.48--smbk-size-48 | 48px | Size | |
| size.56--smbk-size-56 | 56px | Size | |
| size.mark.md--smbk-size-mark-md | 20px | Size | |
| size.mark.sm--smbk-size-mark-sm | 16px | Size | |
| size.64--smbk-size-64 | 64px | Size | |
| size.mark.lg--smbk-size-mark-lg | 24px | Size | |
| size.control.md--smbk-size-control-md | comfortable: 40pxcompact: 32pxchanges with density | Size | |
| size.control.sm--smbk-size-control-sm | comfortable: 32pxcompact: 28pxchanges with density | Size | |
| size.control.lg--smbk-size-control-lg | comfortable: 48pxcompact: 40pxchanges with density | Size | |
| radius.control.md--smbk-radius-control-md | 6px | Radius | |
| radius.container.sm--smbk-radius-container-sm | 8px | Radius | |
| space.text.label--smbk-space-text-label | 0px | Spacing | |
| space.inline.lg--smbk-space-inline-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| space.stack.md--smbk-space-stack-md | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| space.inset.lg--smbk-space-inset-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| color.border.subtle--smbk-color-border-subtle | light: #c4cdd8dark: #2d3237changes with theme | Color | |
| radius.container.md--smbk-radius-container-md | 12px | Radius | |
| space.inset.md--smbk-space-inset-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| space.inline.2xl--smbk-space-inline-2xl | comfortable: 24pxcompact: 16pxchanges with density | Spacing | |
| color.surface.default--smbk-color-surface-default | light: #f3f5f8dark: #181a1cchanges with theme | Color | |
| motion.loading.duration--smbk-motion-loading-duration | 1600ms | Motion | |
| motion.loading.easing--smbk-motion-loading-easing | cubic-bezier(0.65, 0, 0.35, 1) | Motion |
Manifest
{
"name": "skeleton",
"block": "smbk-skeleton",
"summary": "A placeholder shown while the real content loads: lines of text, a title, a label, an icon, an avatar, a badge, a button, an input, a media box, a list item, a card or a table row, or the shape of any component it wraps.",
"adapt": "css",
"axes": {
"shape": {
"values": [
"text",
"title",
"label",
"paragraph",
"icon",
"avatar",
"badge",
"button",
"input",
"media",
"list-item",
"card",
"table-row",
"component"
],
"default": "text",
"description": "Figma's thirteen shapes, for content that is not a component; component, not in Figma, for anything else: the skeleton wraps the real component, which keeps its size, place and corners and draws the skeleton instead of itself until it has loaded."
},
"size": {
"values": [
"sm",
"md",
"lg"
],
"default": "md",
"description": "The size of the content it stands in for: the text styles a step smaller or larger, and the icon, avatar, badge, button, input and table row at their small, medium or large size. The media shape and a wrapped component take their size from what they stand for."
}
},
"flags": {
"loaded": {
"description": "The wrapped component has loaded and shows as itself. Only the component shape has something to show."
}
},
"parts": [
"line",
"text"
],
"figmaNodeId": "915:9"
}