# Datei-Download (C 052)

Kategorie: Cards  
Tags: file, download, document, light, icon  
Seite: https://designforai.dev/de/snippet/card-052

## Prompt

Baue eine 380px Datei-Card-Zeile: weiß, 1px #e5e7eb Rahmen (dunkelt beim Hover auf #111827), 12px Radius, 12px 14px Padding. Links eine 44px abgerundete Kachel in #fee2e2 mit einem roten #dc2626 Dokument-SVG-Icon und einem winzigen roten "PDF" Badge, das die Unterkante überlappt. Mitte: 14px semibold Dateiname mit Ellipsis-Overflow und eine 12px #6b7280 Zeile "4.8 MB · Updated yesterday". Rechts ein 36px quadratischer Download-Button (#f3f4f6 Hintergrund, Pfeil-nach-unten-SVG), der beim Hover schwarz mit weißem Icon wird.

## HTML

```html
<article class="card-052">
  <span class="card-052__icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg><b>PDF</b></span>
  <div class="card-052__meta"><h3>brand-guidelines-v3.pdf</h3><span>4.8 MB · Updated yesterday</span></div>
  <a href="#" aria-label="Download"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16"/></svg></a>
</article>
```

## CSS

```css
.card-052 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 380px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: system-ui,sans-serif;
  color: #111827;
  transition: border-color .15s
}
.card-052:hover {
  border-color: #111827
}
.card-052__icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fee2e2;
  color: #dc2626
}
.card-052__icon b {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: 4px;
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 800
}
.card-052__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column
}
.card-052 h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.card-052__meta span {
  font-size: 12px;
  color: #6b7280
}
.card-052 a {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  transition: background .15s,color .15s
}
.card-052 a:hover {
  background: #111827;
  color: #fff
}
.card-052 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```