Primary color
New RDE product is out! Explore Data is finally out and making BIG waves in the data ecosystem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.
Placeholders
Definition
Placeholders (often called "skeletons") are lightweight, temporary UI elements used to represent the shape and layout of content while it's loading. Instead of showing spinners or blank space, placeholders display neutral blocks that mimic common components—such as headings, text lines, avatars, buttons, and cards—helping users understand what’s coming and reducing perceived wait time. In a design system, placeholders should match the size, spacing, and hierarchy of the final content, remain visually subtle (typically using muted backgrounds and optional shimmer/animation), and be used only for short loading periods before real data is available. They improve perceived performance and layout stability, but should be paired with accessible loading semantics (e.g., aria-busy and screen reader-friendly labels) and avoided for long waits where progress feedback is more appropriate.
Description
Placeholders are loading-state components that use simple, muted shapes to stand in for real content until data is available. They preserve the page layout (preventing content “jumps”), communicate that content is actively loading, and make wait times feel shorter by showing a preview of the eventual structure—such as lines for text, blocks for images, or card outlines.
Accessibility Considerations
- Don't let skeletons be read as content. Mark purely decorative placeholder elements as hidden from assistive tech (e.g., aria-hidden="true"), so screen readers don't announce meaningless "blank" blocks.
- Expose a clear loading state on the container. Use aria-busy="true" on the region that's updating, and provide an accessible name/label for what's loading when helpful (e.g., “Loading search results”).
- Announce completion or updates appropriately. If new content appears without a page navigation, consider an aria-live region (often polite) for status text like “Results loaded,” especially for dynamic lists.
- Respect reduced motion. Shimmer animations can be distracting; disable or minimize animation for users with motion sensitivity (prefers-reduced-motion) and avoid rapid flashing/high-contrast effects.
- Maintain focus and keyboard stability. Don't move focus into skeleton UI; keep focus where the user left it, and avoid replacing focused elements during loading. If a control is temporarily unavailable, use disabled states or aria-disabled="true" as appropriate.
- Ensure adequate contrast (when meaningful). Skeletons are typically decorative, but if they convey status or are visible indicators users rely on, ensure the styling meets contrast expectations and isn't the only cue.
- Provide alternatives for long waits. For longer loads, add real progress/status text (or a progress indicator) rather than relying on skeletons alone.
Components Example with Code
Card
<div class="row">
<div class="col-12 col-lg-6">
<article class="card card-primary mb-3">
<section class="card-body">
<div class="card-subtitle">Primary color</div>
<img src="https://placehold.co/600x400" alt="Placeholder image" />
<h1
class="card-title"
title="New RDE product is out! Explore Data is finally out and making BIG
waves in the data ecosystem.">
New RDE product is out! Explore Data is finally out and making BIG
waves in the data ecosystem.
</h1>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
venenatis dolor quis.
</p>
</section>
<footer class="card-footer">
<time datetime="09-29-2023">29 September, 2023</time>
<a href="#">Link to article</a>
</footer>
</article>
</div>
<!-- PLACEHOLDER Example -->
<div class="col-12 col-lg-6">
<article class="card card-primary mb-3" aria-hidden="true">
<section class="card-body">
<div class="card-subtitle placeholder-glow">
<span class="placeholder col-3"></span>
</div>
<img src="https://placehold.co/600x400" alt="Placeholder" />
<h1 class="card-title placeholder-glow w-100">
<span class="placeholder-lg placeholder col-12"></span>
</h1>
<p class="card-text placeholder-glow">
<span class="placeholder col-12"></span>
</p>
</section>
<footer class="card-footer placeholder-glow">
<span class="placeholder col-3"></span>
<span class="placeholder col-3"></span>
</footer>
</article>
</div>
</div>Complex Card
Journal article · 2021
Mental health & well-being in times of COVID-19: A mixed methods study
Status label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis dolor quis.
<article class="card card-complex">
<section class="card-body">
<header>
<div class="card-header">
<div class="card-subtitle">Journal article · 2021</div>
<h1 class="card-title" id="card-title">
Mental health & well-being in times of COVID-19: A mixed methods study
</h1>
</div>
<div class="badge badge-primary">Status label</div>
</header>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis
dolor quis.
</p>
</section>
<footer class="card-footer">
<button class="btn btn-link">Link 1</button>
<button class="btn btn-link">Link 2</button>
<button class="btn btn-link">Link 3</button>
</footer>
</article>
<!-- PLACEHOLDER example -->
<article class="card card-complex mt-4" aria-busy="true">
<section class="card-body">
<header>
<div class="card-header w-100 placeholder-glow">
<span class="placeholder col-2" aria-hidden="true"></span>
<h1 class="placeholder col-9" aria-hidden="true"></h1>
</div>
<span
class="placeholder placeholder-glow rounded-pill d-inline-block h-25 col-1"
aria-hidden="true"></span>
</header>
<p class="card-text placeholder-glow">
<span class="placeholder col-12" aria-hidden="true"></span>
</p>
</section>
<footer class="card-footer placeholder-glow d-flex gap-2">
<span class="placeholder col-1" aria-hidden="true"></span>
<span class="placeholder col-1" aria-hidden="true"></span>
<span class="placeholder col-1" aria-hidden="true"></span>
</footer>
</article>Filters
Accordion 2 content.
Accordion 2 content.
<div class="row">
<div class="col-12 col-md-6">
<div class="accordion" id="accordion-1">
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-One">
<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#collapse-One"
type="button"
aria-expanded="false"
aria-controls="collapse-One">
<div class="d-flex flex-column justify-content-start">
<span class="title">Accordion Label 1</span>
</div>
</button>
</h2>
<div class="accordion-collapse collapse show" id="collapse-One">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check">
<input
class="form-check-input"
id="data-release"
type="checkbox"
value="" />
<label class="form-check-label" for="data-release">
Data Releases</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="press-releases"
type="checkbox"
value="" />
<label class="form-check-label" for="press-releases">
Press Releases</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="webinars"
type="checkbox"
value="" />
<label class="form-check-label" for="webinars"
>Webinars</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="events"
type="checkbox"
value="" />
<label class="form-check-label" for="events">Events</label>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="blog"
type="checkbox"
value="" />
<label class="form-check-label" for="blog">Blog</label>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="data-resouce-blog"
type="checkbox"
value="" />
<label class="form-check-label" for="data-resouce-blog"
>Data Resource Guide</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="media-kit"
type="checkbox"
value="" />
<label class="form-check-label" for="media-kit"
>Media Kit</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="bulletin-newsletter"
type="checkbox"
value="" />
<label class="form-check-label" for="bulletin-newsletter"
>Bulletin Newsletter</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="data-brunch-podcast"
type="checkbox"
value="" />
<label class="form-check-label" for="data-brunch-podcast"
>Data brunch podcast</label
>
</div>
</li>
</ul>
</div>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapse-One"
aria-expanded="false"
aria-controls="collapse-One">
Hide
</button>
</div>
</div>
</div>
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-Two">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-Two"
type="button"
aria-expanded="false"
aria-controls="collapse-Two">
<span class="title">Accordion Label 2</span>
</button>
</h2>
<div class="accordion-collapse collapse" id="collapse-Two">
<div class="accordion-body">
<p>Accordion 2 content.</p>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapse-Two"
aria-expanded="false"
aria-controls="collapse-Two">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
<!-- PLACEHOLDER VERSION -->
<div class="col-12 col-md-6">
<div class="accordion" id="accordion-1">
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-One">
<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#collapse-One"
type="button"
aria-expanded="false"
aria-controls="collapse-One">
<div
class="d-flex flex-column justify-content-start placeholder-glow w-100">
<span class="title placeholder w-50"></span>
</div>
</button>
</h2>
<div class="accordion-collapse collapse show" id="collapse-One">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
<li>
<div class="form-check placeholder-glow">
<input
class="form-check-input placeholder"
type="checkbox"
value="" />
<span class="form-check-label placeholder w-50"> </span>
</div>
</li>
</ul>
</div>
<button
class="btn border-0 w-25 btn-sm disabled placeholder-glow"
data-bs-toggle="collapse"
data-bs-target="#collapse-One"
aria-expanded="false"
aria-controls="collapse-One">
<span class="placeholder w-50"> </span>
</button>
</div>
</div>
</div>
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-Two">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-Two"
type="button"
aria-expanded="false"
aria-controls="collapse-Two">
<div
class="d-flex flex-column justify-content-start placeholder-glow w-100">
<span class="title placeholder w-50"></span>
</div>
</button>
</h2>
<div class="accordion-collapse collapse" id="collapse-Two">
<div class="accordion-body">
<p>Accordion 2 content.</p>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapse-Two"
aria-expanded="false"
aria-controls="collapse-Two">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>Variables
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;