Skip to content

Card Skeleton

A copy-paste skeletons component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

SkeletonsHTMLCSSany framework

Copy into your project

HTML
<!-- Card Skeleton -->
<div class="nuda-card-skeleton" role="status" aria-label="Loading card" aria-busy="true">
  <div class="nuda-card-skeleton__header">
    <div class="nuda-card-skeleton__avatar"></div>
    <div class="nuda-card-skeleton__meta">
      <div class="nuda-card-skeleton__shim" style="width: 60%"></div>
      <div class="nuda-card-skeleton__shim" style="width: 40%"></div>
    </div>
  </div>
  <div class="nuda-card-skeleton__body">
    <div class="nuda-card-skeleton__shim" style="width: 100%"></div>
    <div class="nuda-card-skeleton__shim" style="width: 85%"></div>
    <div class="nuda-card-skeleton__shim" style="width: 70%"></div>
  </div>
</div>
CSS
/* Card Skeleton
   Full card placeholder with avatar, title, and text shimmer.
   Customize: --card-skel-base, --card-skel-highlight, --card-skel-bg */

.nuda-card-skeleton {
  --card-skel-base: rgba(255, 255, 255, 0.06);
  --card-skel-highlight: rgba(255, 255, 255, 0.12);
  --card-skel-bg: rgba(255, 255, 255, 0.04);
  width: 100%;
  max-width: 320px;
  padding: 14px;
  background: var(--card-skel-bg);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-card-skeleton__header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.nuda-card-skeleton__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--card-skel-base) 25%,
    var(--card-skel-highlight) 50%,
    var(--card-skel-base) 75%
  );
  background-size: 200% 100%;
  animation: nuda-card-shimmer 1.5s ease-in-out infinite;
}

.nuda-card-skeleton__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuda-card-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuda-card-skeleton__shim {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--card-skel-base) 25%,
    var(--card-skel-highlight) 50%,
    var(--card-skel-base) 75%
  );
  background-size: 200% 100%;
  animation: nuda-card-shimmer 1.5s ease-in-out infinite;
}

@keyframes nuda-card-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-card-skeleton__avatar,
  .nuda-card-skeleton__shim {
    animation: none;
    background: var(--card-skel-base);
  }
}

How to use Card Skeleton

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More skeletons components

← Browse all NudaUI components