Dónde aplica cada grilla
No existe una sola grilla: existen tres contextos con reglas distintas. La portada del perfil y las portadas de menú solo admiten tarjetas cuadradas de ancho regular. El layout libre aparece recién en la pantalla de tercer nivel.
| Nivel | Pantalla | Layout permitido | Origen |
|---|---|---|---|
| Nivel 1 | Portada del perfil | Solo tarjetas cuadradas. Sin tablas, anchos dobles ni spans libres. | Restricción de Ellucian. |
| Nivel 2 | Portada de menú | Solo tarjetas cuadradas de ancho regular. | Restricción de Ellucian. |
| Nivel 3 | Pantalla de detalle | Columnas, tablas, listas largas y paneles. | Espacio bajo control UAI. |
Grilla de tarjetas · Nivel 1 y Nivel 2
| Pantalla | Tarjetas por fila | Columnas |
|---|---|---|
| Móvil · <640px | 1 | 12/12 |
| Tablet · sm/md · 640–1023px | 2 | 6/12 |
| Escritorio · lg · ≥1024px | 4 | 3/12 |
Alto mínimo de tarjeta: 240px en escritorio. Bajo 1024px no se recorta el contenido de las tarjetas.
Diagramas de referencia
Las 12 columnas y los spans libres que siguen corresponden a Nivel 3. El diagrama final representa la distribución de tarjetas del panel.
Las 12 columnas
Cada franja es una columna; el espacio entre ellas es el gutter (12px móvil, 16px desde tablet).
Spans disponibles
Una tarjeta ocupa un número fijo de columnas de la grilla. El sistema usa spans de 4, 6, 8 y 12.
Comportamiento por contexto
La misma tarjeta cambia de ancho según el breakpoint: se apila en móvil y se reparte en tablet y escritorio.
Móvil · <768px · 1 por fila
Tablet · 768–1023px
Escritorio · ≥1024px
Tiles del panel de inicio
El panel es una grilla de tarjetas cuadradas: 1 por fila en móvil, 2 en tablet y 4 en escritorio.
Móvil · 1 por fila
Tablet · 2 por fila
Escritorio · 4 por fila · alto mín. 240px
Comportamiento · Nivel 3
| Bloque | Móvil (<768px) | Tablet (768–1023px) | Escritorio (≥1024px) |
|---|---|---|---|
| Span 4 | 1 por fila | 3 por fila | 3 por fila |
| Span 6 | 1 por fila | 2 por fila | 2 por fila |
| Span 8 | Ancho completo | Span 12 | 8 de 12 columnas |
| Span 12 | Ancho completo | Ancho completo | Ancho completo |
Reglas de espaciado
| Regla | Valor | Origen |
|---|---|---|
| Gutter | 12px en móvil · 16px desde tablet | Convención UAI |
| Cuerpo de tarjeta | 20px horizontal · 16px vertical | Convención UAI |
| Radio | var(--radius) = 6px | Convención UAI |
| Escala de espaciado | 4 · 8 · 12 · 16 · 20 · 24 px | Convención UAI |
Las medidas marcadas como Convención UAI se derivaron del comportamiento de los componentes reales, no de documentación oficial de Ellucian. Cuando la contraparte técnica entregue medidas oficiales del tile y de la grilla del SDK, se reemplazan por esos valores.