brand-assets.zip
Home / Snippets / UI Components /
Download card
A resource tile for files: icon, filename, size, tags, and a primary download CTA. Works for release pages, design assets, and docs.
Widely Supported
Quick implementation
.download-card {
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
background: var(--card);
padding: 1rem;
display: grid;
gap: 0.85rem;
}
.download-card__top {
display: grid;
grid-template-columns: 3.25rem 1fr;
gap: 0.85rem;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a download resource card.
Goal: A card showing a file icon, filename, metadata (type/size/updated), tags, and a primary Download button.
Technical constraints:
- Use a grid layout for the top row (icon + text).
- Tags are chips with a monospaced font and wrapping support.
- Button should be a link (<a>) by default for real downloads.
- Use var(--card), var(--card-border), var(--muted) where appropriate.
- Use oklch() for explicit colors and gradients.
Framework variant (pick one):
A) Vanilla HTML/CSS.
B) React component <DownloadCard /> with props for filename, size, tags.
Edge cases to handle:
- Very long filenames (wrap or ellipsis).
- Many tags (wrap without breaking layout).
- Small widths (button moves below tags or stays aligned).
Return HTML + CSS.Why this matters in 2026
Resource pages are part of product UX now—SDKs, brand kits, templates, exports. A consistent download card makes scanning and trusting files easier than a bare list of links.
The logic
Use grid for the icon + text block so alignment stays stable even when the filename wraps. Tags live in a flexible row, and the CTA is aligned as a separate element so it doesn’t jump as content changes.
Accessibility & performance
Use a real link for downloads and ensure focus styles are visible. Don’t rely on icon-only affordances; text like “Download” is clearer. There’s no script needed—this is pure layout.