# Mini-Zitat mit Logo (C 094)

Kategorie: Cards  
Tags: testimonial, logo, mini, quote, light, row  
Seite: https://designforai.dev/de/snippet/card-094

## Prompt

Erstelle ein 260px Mini-Testimonial: Hintergrund #f8fafc, 1px #e2e8f0 Rahmen, 14px Radius, Padding 20px 22px; beim Hover wird es weiß mit #cbd5e1 Rahmen und zartem Schatten. Oben ein kleiner schwarzer Wortmarken-Chip "NORTHWIND" (12px Versalien in 800er Schnitt, weiß auf #0f172a, 6px Radius), dann ein 16px einzeiliges Zitat in medium und eine 12px #64748b Quellenangabe.

## HTML

```html
<figure class="card-094">
  <span class="card-094__logo">Northwind</span>
  <blockquote>The scale settles in half a second. Our old one took five.</blockquote>
  <figcaption>Dana Ruiz, VP Product</figcaption>
</figure>
```

## CSS

```css
.card-094 {
  width: 260px;
  margin: 0;
  padding: 20px 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-family: system-ui,sans-serif;
  color: #0f172a;
  transition: background .2s,border-color .2s,box-shadow .2s
}
.card-094:hover {
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15,23,42,.06)
}
.card-094__logo {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase
}
.card-094 blockquote {
  margin: 12px 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4
}
.card-094 figcaption {
  font-size: 12px;
  color: #64748b
}
```