Ficha
- Categoría
- Data display
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 441:26796
- Fuente
design-system/componentes/LevelCard.md
Entrada a un nivel de dificultad desde el catálogo: caras superpuestas de sus clientes simulados, el nombre del nivel y cuántos clientes tiene; toda la tarjeta navega (chevron). Misma superficie, radio, sombra y estados que Card.
Cuándo usarlo
- Fila de «otros niveles» bajo una sección de nivel en Practicar.
Cuándo NO usarlo
- Un solo escenario (ScenarioCard); un destacado (FeatureCard).
Anatomía
Enlace padding 20, gap 4: caras (Avatar image md con filo blanco de 2, superpuestas −8) + «+N» (Avatar initials) · nivel heading/sm + cuenta body/sm · chevron 20.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
level | Level | texto | Avanzada |
count | Count | texto | 7 clientes |
showAvatar3 | Show avatar 3 | boolean | true |
showMore | Show more | boolean | true |
avatars | avatar 1–3 (expuestos) | hasta 3 fotos | — |
more | más (Avatar «+N») | «+N» | — |
href | — | ruta del nivel | — |
Estados
default · hover (filo borders/neutral/04-tint) · focus (anillo 2 px borders/brand/focus) · pressed (relleno surface/neutral/03-soft); estados reales del DOM.
Accesibilidad
- Las caras son decorativas; el nombre accesible es «{Level}, {Count}»; anillo de foco.
Contenido
Hasta 3 caras; el resto va en «+N». Count en plural («7 clientes»). Las instancias solo cambian propiedades y fotos, nunca estilos ni estructura (R4).
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).