# Chip de enlace con favicon (C 055)

Categoría: Tarjetas  
Etiquetas: link-preview, compact, inline, favicon, light  
Página: https://designforai.dev/es/snippet/card-055

## Prompt

Haz un chip compacto de vista previa de enlace con forma de píldora (máx. 360px, inline-flex): blanco, borde 1px #e5e7eb, radio completo 999px, padding 8px 12px 8px 8px. A la izquierda un marcador de favicon circular negro de 28px con una letra blanca bold, en medio un título 13px bold sobre una URL 11px #6b7280 (ambos truncados con elipsis), a la derecha un SVG de flecha diagonal de 16px en #9ca3af. En hover el fondo pasa a #f9fafb, el borde a #9ca3af y la flecha a negro.

## 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; }
```