BentoGrid
Layout asimétrico de grid para home pages
Preview
Celda clickable 2×2
Body oculto por defecto; aparece en hover (en mobile, siempre visible). Toda la superficie es el link.
Ver másVariante surface 2×1
Fondo --color-surface-raised: relleno en vez de outline.
Ver másInert 1×1: ni link ni container.
Container 1×1: aloja otros componentes.
Componente real del canon: gap 24px, dual-radius y hover reales. El grid ocupa aquí el ancho de la columna de docs; en uso real llena --site-max-width. Para celdas de casos de estudio (cover + vídeo en hover) existe BentoCaseCell, componente propio del canon.
Grid
| Viewport | Columnas | Gap |
|---|---|---|
| Desktop (≥768px) | 4 | 24px (--space-lg) |
| Mobile | 1 (stack) | 24px |
Dual border-radius
| Esquina | Radius | Token |
|---|---|---|
| Exterior (bordes del grid) | 24px | --radius-xl |
| Interior (donde celdas se encuentran) | 4px | --radius-inner |
Por defecto, first-child redondea top-left y last-child bottom-right. Las utilidades per-corner (.bento-cell--round-tl/tr/bl/br) componen el radio exterior esquina a esquina, independiente del orden del DOM: cada página redondea las esquinas reales de su composición. Solo desktop; en mobile toda celda redondea a xl.
Tipos de celda
| Tipo | Clase | Comportamiento |
|---|---|---|
| Clickable | .bento-cell--clickable | Superficie <a>. Title visible, body on hover. |
| Container | .bento-cell--container | Contiene otros componentes. No es link. |
| Inert | .bento-cell--inert | No link, no container. |
| Surface (modificador) | .bento-cell--surface | Relleno con --color-surface-raised en vez de outline. En dark, lift del 4% sobre el fondo (el valor vive en tokens.css). |
Hover (desktop)
Celdas clickable muestran solo título por defecto. El body (opacity 0) aparece al hover con fade 0.3s ease-out. En mobile, body siempre visible.
Restricciones
- 5-8 celdas por página. Más de 8 es fallo de curación.
- Colapsa a 1 columna en mobile.
- Sin grids anidados.
Decisiones
| Decisión | Por qué |
|---|---|
| 4 columnas base | Suficiente asimetría, simple de mantener |
| Dual-radius 24px/4px | Grid como superficie cohesiva |
| Solo título por defecto | Primera impresión limpia, profundidad al explorar |
| Entrada escalonada | Sensación orgánica de "asentamiento" |
| Surface via --color-surface-raised | En dark, el token --color-surface (casi negro) invertiría el lift; el valor vive una vez en tokens.css |
| Utilidades per-corner | Las esquinas exteriores reales dependen de la composición de cada página, no del orden del DOM |