Anatomía
Ejemplo: «Clases del día», panel del estudiante (Nivel 1).
La sala indicada es la programada y puede cambiar a último minuto.
- Barra de título
Nativa de Ellucian Experience: tipografía del sistema, mayúsculas, gris. No se modifica nunca.
- Candado
Aparece solo cuando la tarjeta completa es clicable (
onClick) y lleva a una pantalla. - Cuerpo
La única zona personalizable. Su fondo lo define
variant. - Contenido
Filas, botones, búsqueda o imagen: es lo que distingue a cada derivada.
- Viñeta inferior
Franja de 10 px en color de acento. Solo en el cuerpo claro (
subtle).
Cuerpos
Tres tratamientos posibles para el cuerpo, elegidos con variant.
Blanco
variant="default"Pantallas de Nivel 3 con tablas, formularios o mucha información.
Claro con viñeta
variant="subtle"El estándar de Nivel 1 y Nivel 2. Viñeta con --accent.
Contenido sobre fondo continuo
Institucional
variant="gradient"solidColor="var(--card-bg-institutional)"Para contenido de la UAI. Texto e íconos pasan a blanco.
Límites y grilla
Ellucian no fija una altura de tarjeta. Estos topes hacen que las tarjetas de una misma fila midan lo mismo.
botones como máximo. Con más, el sexto pasa a «Ver todos».
filas de lista, más la fila «Ver todos» cuando hay más datos.
de alto mínimo en escritorio. Bajo 1024 px el contenido no se recorta.
tarjetas por fila en escritorio, tablet y móvil.
Derivadas
Cada derivada se muestra con una tarjeta real de la Intranet. El código es el uso real, abreviado.
Lista
Registros del usuario —cursos, clases, notas—. Cada fila lleva a su pantalla de Nivel 3.
WireframeCardsubtleCardListListItem- Máximo 5 filas; si hay más datos, la sexta fila es «Ver todos».
- Al pasar el cursor, la fila se pinta de celeste oscuro y el texto pasa a blanco.
- Variantes de fila: dato a la derecha, apilada (stack) o con detalle (detail).
En la Intranet: Cursos inscritos · Clases del día (fila apilada) · Notas recientes (fila con detalle y promedio)
Botones
Atajos a trámites o secciones. Cada botón abre una pantalla de Nivel 3.
WireframeCardsubtleCardButtonGridCardActionButton- Máximo 6 botones: definen la altura de referencia de la fila.
- El ícono sale de la etiqueta (iconForLabel); una etiqueta sin ícono asignado usa una flecha.
- Los botones a sistemas externos muestran «Saldrás de la Intranet» al pasar el cursor.
En la Intranet: Trámites · Vida UAI
Institucional
Contenido de la UAI, idéntico en todos los perfiles. No contiene datos del usuario.
InstitutionalCardsWireframeCardgradient--card-bg-institutional- Fondo degradado negro institucional; texto e íconos en blanco.
- Enlace «Ver más» al sitio público con TextLink tone="onDark", en pestaña nueva.
- La tarjeta completa no es clicable: no lleva candado.
En la Intranet: Clima · Eventos UAI · Noticias UAI
CTA destacada
Una sola acción importante con contexto: antetítulo, titular, bajada y botón anclado al pie.
FeaturedCTACardCardActionButtonExternalHint- Un solo botón por tarjeta.
- Si la acción sale de la Intranet, «Saldrás de la Intranet» va bajo el botón (external).
- Cuerpo claro por defecto; institucional cuando el contenido es de la UAI.
En la Intranet: Denuncia de acoso
Tu próxima clase es en Sala B102
La sala indicada es la programada y puede cambiar a último minuto.
Media
Una imagen enlazada a un servicio externo, con un dato de contexto arriba y una nota al pie.
WireframeCardsubtlea + img- La imagen es un enlace con aria-label descriptivo y abre en pestaña nueva.
- El clic en la imagen no activa la tarjeta (stopPropagation).
En la Intranet: Tu Campus (MazeMap)
Búsqueda
Buscador compacto dentro de una tarjeta cuadrada; los resultados aparecen como filas de lista.
WireframeCardsubtleSearchFieldcardListItem- Primera fila: el campo. Segunda fila: filtros y botón solo ícono, en una sola línea.
- El botón solo ícono lleva ariaLabel.
- Enter en el campo también busca.
En la Intranet: Profesores UAI (Nivel 2, Vida UAI)
Menú de Nivel 2
Cada subsección de un menú es una tarjeta con una vista previa y un botón para entrar a su pantalla de Nivel 3.
MenuSectionWireframeCardsubtleListItemPrimaryActionButton- Vista previa breve; en los menús actuales son tres filas.
- Un botón primario «Ir a …» al pie.
- Sin pantalla asociada, la tarjeta no es clicable ni muestra candado.
En la Intranet: Trámites · Notas · Cursos / Horarios · Vida UAI