# Favicon-Link-Chip (C 055)

Kategorie: Cards  
Tags: link-preview, compact, inline, favicon, light  
Seite: https://designforai.dev/de/snippet/card-055

## Prompt

Erstelle einen kompakten pillenförmigen Link-Vorschau-Chip (max 360px, inline-flex): weiß, 1px #e5e7eb Rahmen, voller 999px Radius, Padding 8px 12px 8px 8px. Links ein 28px schwarzer runder Favicon-Platzhalter mit fettem weißem Buchstaben, in der Mitte ein 13px fetter Titel über einer 11px #6b7280 URL (beide per Ellipsis gekürzt), rechts ein 16px Diagonalpfeil-SVG in #9ca3af. Beim Hover wird der Hintergrund #f9fafb, der Rahmen #9ca3af und der Pfeil schwarz.

## HTML

```html
<a class="card-055" href="#">
  <span class="card-055__fav">D</span>
  <span class="card-055__text"><b>Container queries in practice</b><small>designforai.dev/guides/container-queries</small></span>
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M9 7h8v8"/></svg>
</a>
```

## CSS

```css
.card-055 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-family: system-ui,sans-serif;
  transition: background .15s,border-color .15s
}
.card-055:hover {
  background: #f9fafb;
  border-color: #9ca3af
}
.card-055__fav {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800
}
.card-055__text {
  display: flex;
  flex-direction: column;
  min-width: 0
}
.card-055 b {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.card-055 small {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.card-055 svg {
  flex: none;
  color: #9ca3af
}
.card-055:hover svg {
  color: #111827
}
.card-055 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```