cards file upload document grid manager cards file upload document grid manager pdf image video spreadsheet file card grid document list with file types
File Cards
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/file.json file.html
<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
<div class="mx-auto max-w-3xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Recent files</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Quick access to your latest uploads.</p>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<!-- Document -->
<div class="group flex items-center gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4 transition hover:shadow-md">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-cards-text)]">Project-Brief.pdf</p>
<p class="text-xs text-[var(--ws-cards-text-soft)]">2.4 MB · Mar 18, 2026</p>
</div>
<button type="button" class="shrink-0 rounded-lg p-1.5 text-[var(--ws-cards-text-soft)] transition hover:bg-white/5" aria-label="File actions">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
</button>
</div>
<!-- Image -->
<div class="group flex items-center gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4 transition hover:shadow-md">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/>
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-cards-text)]">Hero-Banner.png</p>
<p class="text-xs text-[var(--ws-cards-text-soft)]">8.1 MB · Mar 17, 2026</p>
</div>
<button type="button" class="shrink-0 rounded-lg p-1.5 text-[var(--ws-cards-text-soft)] transition hover:bg-white/5" aria-label="File actions">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
</button>
</div>
<!-- Video -->
<div class="group flex items-center gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4 transition hover:shadow-md">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-purple-100 text-purple-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"/>
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-cards-text)]">Demo-Recording.mp4</p>
<p class="text-xs text-[var(--ws-cards-text-soft)]">124 MB · Mar 15, 2026</p>
</div>
<button type="button" class="shrink-0 rounded-lg p-1.5 text-[var(--ws-cards-text-soft)] transition hover:bg-white/5" aria-label="File actions">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
</button>
</div>
<!-- Spreadsheet -->
<div class="group flex items-center gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4 transition hover:shadow-md">
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M10.875 12h-1.5m1.5 0c.621 0 1.125.504 1.125 1.125M12 12h7.5m-7.5 0c0 .621-.504 1.125-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 0v1.5c0 .621-.504 1.125-1.125 1.125m0 0h-1.5"/>
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-cards-text)]">Q1-Revenue.xlsx</p>
<p class="text-xs text-[var(--ws-cards-text-soft)]">340 KB · Mar 12, 2026</p>
</div>
<button type="button" class="shrink-0 rounded-lg p-1.5 text-[var(--ws-cards-text-soft)] transition hover:bg-white/5" aria-label="File actions">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
</button>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardsfileuploaddocumentgridmanager
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| cards | Yes | File cards with type icon, name, size, date, and action menu. |
2x2 responsive file card grid with four file types: document (blue), image (emerald), video (purple), and spreadsheet (amber). Each card has a colored type icon, filename, file size, date, and a vertical dots action menu. Cards lift on hover.