General
Placeholder
A placeholder component
Overview
The Placeholder component reserves space in the layout while content is loading or missing. Sizing is controlled via CSS so it fits grids, cards, or custom layouts without extra markup.
Key Business & UX Benefits
- Reduces layout shift by reserving space before content loads.
- Keeps grids and lists aligned while images or data load. This is especially useful for lazy loading images or data.
- Gives designers a simple block to size and style with CSS.
- Works as a fallback when content is missing or failed to load.
Pro-Tip from Larry: Match placeholder size to the final content so the layout does not jump when it loads.
Usage
Use css for sizing the placeholder.
Placeholder
<Placeholder class="w-100px h-100px" />
Feature List
- CSS-controlled sizing for flexible layouts
- Reserves space to prevent layout shift
- Theme-aligned background and styling
- Suitable for images, cards, or custom blocks