storage files breakdown file-types detail dashboard widget file breakdown file types file count storage detail disk usage show file breakdown list file types with sizes display detailed storage info
Storage Widget File Breakdown
Fetch pattern JSON:
curl https://webspire.de/patterns/storage-widget/file-breakdown.json file-breakdown.html
<section class="ws-storage-widget bg-[var(--ws-storage-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-sm overflow-hidden rounded-2xl border border-[var(--ws-storage-widget-border)] bg-[var(--ws-storage-widget-bg)] shadow-md">
<div class="px-6 pt-6 pb-4">
<p class="text-sm font-semibold text-[var(--ws-storage-widget-text)]">Files</p>
</div>
<div class="px-6 pb-6">
<ul class="space-y-4" role="list">
<li class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 text-base" aria-hidden="true">🖼️</span>
<div class="min-w-0 flex-1">
<div class="flex items-baseline justify-between">
<p class="text-sm font-medium text-[var(--ws-storage-widget-text)]">Images</p>
<span class="text-xs font-medium text-[var(--ws-storage-widget-text)]">28 GB</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="text-[10px] text-[var(--ws-storage-widget-text-muted)]">2,847 files</span>
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]">
<div class="h-full rounded-full bg-sky-500" style="width: 43%"></div>
</div>
</div>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-violet-500/10 text-base" aria-hidden="true">🎬</span>
<div class="min-w-0 flex-1">
<div class="flex items-baseline justify-between">
<p class="text-sm font-medium text-[var(--ws-storage-widget-text)]">Videos</p>
<span class="text-xs font-medium text-[var(--ws-storage-widget-text)]">22 GB</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="text-[10px] text-[var(--ws-storage-widget-text-muted)]">142 files</span>
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]">
<div class="h-full rounded-full bg-violet-500" style="width: 34%"></div>
</div>
</div>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-storage-widget-accent)]/10 text-base" aria-hidden="true">📄</span>
<div class="min-w-0 flex-1">
<div class="flex items-baseline justify-between">
<p class="text-sm font-medium text-[var(--ws-storage-widget-text)]">Documents</p>
<span class="text-xs font-medium text-[var(--ws-storage-widget-text)]">8 GB</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="text-[10px] text-[var(--ws-storage-widget-text-muted)]">1,204 files</span>
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]">
<div class="h-full rounded-full bg-[var(--ws-storage-widget-accent)]" style="width: 12%"></div>
</div>
</div>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/10 text-base" aria-hidden="true">🎵</span>
<div class="min-w-0 flex-1">
<div class="flex items-baseline justify-between">
<p class="text-sm font-medium text-[var(--ws-storage-widget-text)]">Audio</p>
<span class="text-xs font-medium text-[var(--ws-storage-widget-text)]">4.2 GB</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="text-[10px] text-[var(--ws-storage-widget-text-muted)]">89 files</span>
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]">
<div class="h-full rounded-full bg-amber-500" style="width: 6%"></div>
</div>
</div>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-storage-widget-text-muted)]/10 text-base" aria-hidden="true">📦</span>
<div class="min-w-0 flex-1">
<div class="flex items-baseline justify-between">
<p class="text-sm font-medium text-[var(--ws-storage-widget-text)]">Other</p>
<span class="text-xs font-medium text-[var(--ws-storage-widget-text)]">2 GB</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="text-[10px] text-[var(--ws-storage-widget-text-muted)]">324 files</span>
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]">
<div class="h-full rounded-full bg-[var(--ws-storage-widget-text-muted)]" style="width: 3%"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
storagefilesbreakdownfile-typesdetaildashboardwidget
A detailed file-type breakdown widget listing five categories (Images, Videos, Documents, Audio, Other) with emoji icons, file counts, total sizes, and proportional mini bars. Provides a deeper drill-down companion to the base storage widget. Suitable for storage management panels and file manager overviews.