Containers
Definen el ancho principal del dashboard.
Dashboard Pattern
Este patrón muestra cómo construir una composición de paneles, métricas y bloques informativos usando layout, grid y módulos repetibles del sistema.
Qué resuelve este patrón
Un dashboard necesita estructura clara, jerarquía entre áreas y paneles que se puedan reorganizar con facilidad en distintos viewports.
Este patrón demuestra cómo combinar grid, proportions, stack, spacing y width para construir una superficie informativa modular y escalable.
Módulos que intervienen
Grid
Distribuye paneles y módulos en columnas.
Proportions
Da jerarquía entre área principal y áreas secundarias.
Stack
Organiza el contenido dentro de cada panel.
Spacing
Construye aire interno sin romper consistencia.
Visibility
Ayuda a simplificar paneles según viewport.
Ejemplo visual del patrón
Main Summary
Área principal para métricas, contexto o resumen ejecutivo del dashboard.
Panel 01
Dato o bloque secundario.
Panel 02
Dato o bloque secundario.
Código base del patrón
<section class="section section-md">
<div class="container container-xl">
<div class="grid cols-1 lg:cols-3-1 gap-md">
<div class="stack stack-md">
<article class="rounded-lg p-4 stack stack-md">
...
</article>
<div class="grid cols-1 md:cols-2 gap-md">
<article class="rounded-lg p-4 stack stack-sm">...</article>
<article class="rounded-lg p-4 stack stack-sm">...</article>
</div>
</div>
<aside class="stack stack-md">
<article class="rounded-lg p-4 stack stack-sm">...</article>
<article class="rounded-lg p-4 stack stack-sm">...</article>
</aside>
</div>
</div>
</section>Decisiones clave del patrón
- La estructura principal debe depender de grid, no de márgenes manuales.
- Las áreas con distinta jerarquía deben resolverse con proportions.
- Los paneles deben repetir forma, spacing y ritmo interno.
- La complejidad debe crecer por módulos, no por excepciones.
Cierre de patterns
Con este patrón queda cerrada la capa aplicada principal del framework.