# Tarjeta emergente

> Vista previa de una persona o empresa al pasar el cursor sobre su nombre.

Categoría: Feedback · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Para adelantar quién es una persona o empresa en listas y comentarios.
- Solo información: si tiene acciones, es un Popover.
- No aparece en pantallas táctiles: el enlace lleva a la ficha completa.

## Persona

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-start gap-2"><a href="#" class="text-sm font-medium text-ccs-blue dark:text-ccs-dark-accent underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Carolina Rojas</a><div role="dialog" aria-label="Vista previa" class="w-80 rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-4"><div class="flex gap-4"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-12 h-12 text-base ">CR</span><div class="space-y-1"><div class="text-sm font-semibold">Carolina Rojas</div><p class="text-sm">Jefa de ventas en Empresa de Ejemplo. Encargada de la cuenta y de las inscripciones del equipo.</p><div class="flex items-center gap-1.5 pt-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon>Se unió en marzo de 2021</div></div></div></div></div></div>
```

## Empresa

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-start gap-2"><a href="#" class="text-sm font-medium text-ccs-blue dark:text-ccs-dark-accent underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Empresa de Ejemplo SpA</a><div role="dialog" aria-label="Vista previa" class="w-80 rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none p-4"><div class="flex gap-4"><span class="grid place-items-center w-12 h-12 shrink-0 rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:buildings-2-outline" class="shrink-0 text-[24px] " aria-hidden="true"></iconify-icon></span><div class="min-w-0 space-y-1"><div class="text-sm font-semibold">Empresa de Ejemplo SpA</div><div class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">76.123.456-7 · Comercio al por mayor</div><div class="flex flex-wrap gap-1.5 pt-1"><span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Vigente</span><span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate border border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">Santiago</span></div></div></div></div></div></div>
```

## Guía: Comportamiento

Aparece después de 500 ms con el cursor o al enfocar el enlace con Tab, y se queda abierta mientras el cursor está sobre ella (WCAG 1.4.13). Escape la cierra. Como no aparece en el celular ni la anuncian todos los lectores de pantalla, nada de lo que muestra puede ser la única forma de ver ese dato: el enlace lleva a la ficha completa.