Skeleton Content Page

Fetch pattern JSON: curl https://webspire.de/patterns/skeleton/content-page.json
content-page.html
<style>
.ws-skeleton-content-page {
  --ws-skeleton-bg: oklch(0.92 0.005 75);
  --ws-skeleton-highlight: oklch(0.96 0.003 75);
  --ws-skeleton-border: oklch(0.88 0.008 75);
}
@media (prefers-color-scheme: dark) {
  .ws-skeleton-content-page {
    --ws-skeleton-bg: oklch(0.25 0.005 75);
    --ws-skeleton-highlight: oklch(0.32 0.005 75);
    --ws-skeleton-border: oklch(0.30 0.008 75);
  }
}
@keyframes ws-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-skeleton-content-page [data-shimmer] {
    animation: none !important;
  }
}
</style>

<div class="ws-skeleton-content-page" role="status" aria-hidden="true">
  <span class="sr-only">Loading content page...</span>
  <div class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="grid gap-6 lg:grid-cols-[1fr_320px]">
      <div class="space-y-6">
        <div class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
          <div data-shimmer class="h-5 w-28 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          <div data-shimmer class="mt-4 h-10 w-3/4 rounded-2xl" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          <div data-shimmer class="mt-3 h-4 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          <div data-shimmer class="mt-2 h-4 w-5/6 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
        </div>
        <div class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
          <div data-shimmer class="h-56 w-full rounded-2xl" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          <div class="mt-6 space-y-3">
            <div data-shimmer class="h-4 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
            <div data-shimmer class="h-4 w-11/12 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
            <div data-shimmer class="h-4 w-10/12 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          </div>
        </div>
      </div>
      <aside class="space-y-6">
        <div class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
          <div data-shimmer class="h-5 w-24 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          <div class="mt-4 space-y-3">
            <div data-shimmer class="h-12 w-full rounded-2xl" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
            <div data-shimmer class="h-12 w-full rounded-2xl" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          </div>
        </div>
        <div class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
          <div data-shimmer class="h-5 w-20 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
          <div class="mt-4 space-y-4">
            <div class="flex items-center gap-3">
              <div data-shimmer class="h-10 w-10 rounded-full" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
              <div class="flex-1 space-y-2">
                <div data-shimmer class="h-3.5 w-2/3 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
                <div data-shimmer class="h-3.5 w-1/2 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
              </div>
            </div>
            <div class="flex items-center gap-3">
              <div data-shimmer class="h-10 w-10 rounded-full" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
              <div class="flex-1 space-y-2">
                <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
                <div data-shimmer class="h-3.5 w-1/3 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</div>
Details

Family
skeleton
Tier
enhanced
Kind
component
Extends
skeleton/base
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
skeletonloadingpagesidebararticle
Slots

Name	Required	Description
hero	Yes	Header placeholder with title and intro lines.
content	Yes	Main content blocks and media placeholder.
sidebar	No	Supporting rail placeholders.
Extended skeleton state for full-page loading. Covers title, hero media, content blocks, and a supporting sidebar so the loading experience better matches the final page structure.