A flat block that stands where a picture will go, for empty states and mockups.
Options
The image placeholder has no choices: it is drawn one way.
Examples
Usage
Where a picture will go, at the picture's ratio.
Ratios
The ratio is content, set by the consumer.
Guidelines
Purpose
A flat, rounded block with a hairline edge, so it shows on the page color, that holds the place of a picture that is missing or not yet chosen: an empty avatar slot, a card without a cover, a mockup. It is a static state, which is what separates it from the skeleton, which stands in while something loads.
When to use
- A picture slot with nothing in it yet.
- Mockups and templates.
When not to use
- While a picture is loading. Use the skeleton's media shape.
Usage rules
Do
- Give it the ratio of the picture it replaces, so nothing moves when the picture arrives.
- Size it through its container. It fills the container's width and takes its height from its ratio.
Anatomy
One element. No parts.
Behavior
None.
Accessibility
What it does for you
- It is decorative unless given a label, in which case it is announced as an image with that name.
What you must do
- Give it a label when it should be announced as an image.
How to test
- With a screen reader, an unlabeled placeholder is skipped and a labeled one is read as an image by its label.
Source
The files the image placeholder is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-image-placeholder — Image placeholder. Figma "Image Placeholder" 1988:5921.
* Takes the width it is given and the ratio of the picture it stands for: a
* sunken block with a container's corner and a hairline edge, so it shows on
* the page color. */
.smbk-image-placeholder {
box-sizing: border-box;
display: block;
width: 100%;
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
border-radius: var(--smbk-radius-container-sm);
background: var(--smbk-color-surface-sunken);
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| 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.sm--smbk-radius-container-sm | 8px | Radius | |
| color.surface.sunken--smbk-color-surface-sunken | light: #373d430ddark: #00000066changes with theme | Color |
Manifest
{
"name": "image-placeholder",
"block": "smbk-image-placeholder",
"summary": "A flat block that stands where a picture will go, for empty states and mockups.",
"adapt": "css",
"axes": {},
"flags": {},
"parts": [],
"figmaNodeId": "1988:5921"
}