File Extension Badge
Two adjacent flex blocks — colored extension + white filename. Color is the identifier; nothing else is needed. Hover lifts the whole card off the surface the way you pick up a real file.
File Extension Badge the 17th of 30 designs in the 30 CSS Badges collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="fx-stage">
<div class="fx-badge" style="--fx-color:#e84040">
<div class="fx-ext">PDF</div>
<div class="fx-info">
<div class="fx-name">annual-report-2025.pdf</div>
<div class="fx-meta">2.4 MB · Updated Mar 14</div>
</div>
</div>
<div class="fx-badge" style="--fx-color:#1e8f4a">
<div class="fx-ext">SVG</div>
<div class="fx-info">
<div class="fx-name">logo-lockup-final.svg</div>
<div class="fx-meta">18 KB · Vector · Scalable</div>
</div>
</div>
<div class="fx-badge" style="--fx-color:#1d6abf">
<div class="fx-ext">MP3</div>
<div class="fx-info">
<div class="fx-name">episode-42-interview.mp3</div>
<div class="fx-meta">48 MB · 52 min 18 sec</div>
</div>
</div>
<div class="fx-badge" style="--fx-color:#6b3aa0">
<div class="fx-ext">ZIP</div>
<div class="fx-info">
<div class="fx-name">source-assets-v3.zip</div>
<div class="fx-meta">340 MB · 1,284 files</div>
</div>
</div>
<div class="fx-badge" style="--fx-color:#c87820">
<div class="fx-ext">CSV</div>
<div class="fx-info">
<div class="fx-name">q1-export-raw.csv</div>
<div class="fx-meta">6.1 MB · 88,412 rows</div>
</div>
</div>
</div> .fx-stage {
background: #f0f2f5;
padding: 50px 40px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
min-height: 380px;
}
.fx-badge {
display: inline-flex;
align-items: stretch;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
cursor: default;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none;
}
.fx-badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
@media (prefers-reduced-motion: reduce) {
.fx-badge { transition: none; }
}
.fx-ext {
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
background: var(--fx-color, #555);
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
text-transform: uppercase;
flex-shrink: 0;
}
.fx-info {
padding: 10px 16px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.fx-name {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 13px;
font-weight: 500;
color: #1a1612;
letter-spacing: -0.01em;
line-height: 1;
}
.fx-meta {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.12em;
color: #888;
text-transform: uppercase;
line-height: 1;
}