Ficha
- Categoría
- Data display
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 494:16333
- Fuente
design-system/componentes/ClientPortrait.md
Cuándo usarlo
- Columna izquierda de la simulación (reglas/03 §03.2) y Antes de empezar.
Cuándo NO usarlo
- Listas o tarjetas de escenario → Avatar o ScenarioCard.
Anatomía
<figure> 300 de ancho, radius-5x, Shadow/Card, foto de fondo (object-fit cover, anclada arriba) · <figcaption> abajo con Fade/Retrato + Blur/Card, padding 28/24, gap 12: nombre (heading/md) · descripción (body/sm) · Tag glass-light.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
name | Name | «Roberto, 45» | — |
description | Description | contexto corto | — |
showTag | Show tag | boolean | true |
src | — (relleno de imagen) | ruta en /public/clientes (DV-28) | — |
className | — | alto por pantalla (h-112, h-full); por defecto 2:3 | aspect-2/3 |
Estados
Sin estados. En Preparando la apertura, el anillo de carga lo pone la pantalla alrededor (composición local, candidata).
Accesibilidad
- La foto es decorativa (
alt=""); nombre y contexto son texto real. Blanco sobre el extremo opaco del fundido: 9.29:1. La etiqueta se mantiene visible (DV-20).
Contenido
Foto, nombre y edad siempre de la página Imagery (DV-28): un cliente = una cara. La descripción no lleva nombre propio del cliente real (R-01.29: se presenta por arquetipo y contexto).
Errores conocidos
- Figma: el retrato lleva un trazo de 1 px con degradado lineal sin variable; no se reproduce en código (no es un token). Reportado.
- Las fotos originales de Imagery son 384×256 (apaisadas): el recorte 2:3 depende de
object-position: top; revisar cara por cara al exportar SIM-01…20.
Changelog
- 2026-10-26 · nace (T-02). Solo SIM-14 exportado a
public/clientes/.