Card
El componente ECard agrupa contenido relacionado sobre una superficie contenida. Úsalo para establecer jerarquía visual en resúmenes, entidades y tareas específicas; usa layout sin card cuando el contenido no necesite un límite diferenciado.
Uso
Configura las props comunes de superficie e inspecciona el markup generado. color resuelve el fondo y un contraste legible, mientras outlined, tonal y elevation definen su énfasis visual.
Actividad del workspace
Actualizado hace unos minutos
Revisa los cambios recientes y continúa donde quedó tu equipo.
Variantes visuales
Elige un tratamiento de superficie acorde con la jerarquía de la card. Las cards tonales usan el color como tinte sutil y permanecen planas aunque se proporcione elevation; combina tonal y outlined solo cuando el límite necesite mayor definición.
Superficie predeterminada
Una card contenida y neutra para contenido estándar.
Superficie outlined
Un límite visible sin elevación adicional.
Superficie tonal
Un tinte semántico sutil que permanece plano.
Anatomía del contenido
Usa title, subtitle y description para regiones predecibles de la card. El slot default contiene contenido de cuerpo más rico y solo se renderiza cuando se proporciona contenido.
Resumen trimestral
Abril a junio
Los ingresos y la participación superaron el periodo anterior.
El slot default admite contenido estructurado adicional a las regiones de texto integradas.
Ubicación de media
La media del cuerpo usa las props prepend* y append* y puede abarcar el contenido de la card. La media del encabezado usa las props *Header* correspondientes y permanece alineada con el bloque de título.
Revisión de diseño
Hoy a las 14:30
La media del encabezado permanece conectada al título y subtítulo.
Reporte guardado
Workspace de analítica
La media del cuerpo puede alinearse a través del área de contenido completa.
Slots y acciones
Coloca contenido enriquecido en el slot default y acciones relacionadas en #footer. Mantén las acciones como botones o enlaces reales en lugar de convertir toda la superficie visual en un control implícito.
¿Publicar cambios?
Tu actualización será visible para todas las personas del workspace.
Patrones de composición
Las cards funcionan mejor cuando cada superficie representa un asunto claro. Mantén una jerarquía de acciones contenida, permite que el contenido determine la altura y prefiere un layout responsive de filas y columnas sobre anchos fijos o cards anidadas.
Morgan Lee
Diseñadora de producto
Responsable de la documentación de componentes y las guías de interacción.
Revisión de documentación
Quedan 3 comentarios
Tasa de finalización
Este mes
Accesibilidad
ECard es un contenedor visual y no renderiza semántica interactiva por sí mismo. Agrega una etiqueta de región o artículo significativa cuando la card necesite estructura independiente, conserva el orden de encabezados y mantén cada acción accesible por teclado.
Seguridad de la cuenta
Revisa las sesiones activas y actualiza tus preferencias de acceso.
Referencia API
Consulta las props públicas verificadas de ECard. El componente expone los slots default y footer y no emite eventos públicos.
Props de ECard
| Propiedad | Tipo | Por defecto |
|---|---|---|
| color | string | undefined |
Resuelve los colores de fondo y contraste legible de la card desde el tema activo. | ||
| outlined | boolean | false |
Agrega un borde fino alrededor de la superficie de la card. | ||
| tonal | boolean | false |
Usa el color como tinte sutil de superficie y mantiene plana la card. | ||
| depressed | boolean | false |
Elimina la elevación visual de la card. | ||
| elevation | Elevation | undefined |
Aplica un nivel de elevación cuando el modo tonal no está activo. | ||
| height | string | undefined |
Define una altura explícita para la card. Los strings numéricos se normalizan a píxeles. | ||
| title | string | undefined |
Renderiza el texto principal en el encabezado de la card. | ||
| subtitle | string | undefined |
Renderiza texto de apoyo en el encabezado de la card. | ||
| description | string | undefined |
Renderiza una descripción entre el encabezado y el cuerpo del slot default. | ||
| prependIcon / appendIcon | string | IconPath | IconPath[] | undefined |
Renderiza un icono al inicio o final del área completa del cuerpo de la card. | ||
| prependIconProps / appendIconProps | Partial | undefined |
Pasa props adicionales al EIcon correspondiente del cuerpo. | ||
| prependAvatar / appendAvatar | string | undefined |
Renderiza un avatar al inicio o final del área completa del cuerpo de la card. | ||
| prependAvatarProps / appendAvatarProps | Partial | undefined |
Pasa props adicionales al EAvatar correspondiente del cuerpo. | ||
| prependVerticalAlign / appendVerticalAlign | 'start' | 'center' | 'end' | 'stretch' | 'center' |
Controla la alineación vertical de la media del cuerpo. | ||
| prependHeaderIcon / appendHeaderIcon | string | IconPath | IconPath[] | undefined |
Renderiza un icono al inicio o final del encabezado. | ||
| prependHeaderIconProps / appendHeaderIconProps | Partial | undefined |
Pasa props adicionales al EIcon correspondiente del encabezado. | ||
| prependHeaderAvatar / appendHeaderAvatar | string | undefined |
Renderiza un avatar al inicio o final del encabezado. | ||
| prependHeaderAvatarProps / appendHeaderAvatarProps | Partial | undefined |
Pasa props adicionales al EAvatar correspondiente del encabezado. | ||
Slots y eventos
ECard expone el slot default para contenido del cuerpo y el slot footer para acciones relacionadas o contenido de apoyo. No emite eventos públicos.