Ritmo compacto
Útil para bloques secundarios, cierres, transiciones suaves o contenidos de menor peso visual.
.section-sm → 2rem
Sections
Sections controla el ritmo vertical macro del sistema y define el espacio entre grandes bloques de contenido dentro de una página.
Qué resuelve sections
El módulo sections define el espacio vertical entre bloques grandes de una página. Su responsabilidad no es ajustar márgenes puntuales ni resolver la composición interna de un componente, sino construir el ritmo general del documento.
Gracias a .section y sus variantes, el sistema mantiene una separación
consistente entre hero, contenido, grids, módulos y cierres de página.
Referencia del archivo
.section {
padding-block: var(--section-space, 4rem);
}
.section-sm { --section-space: 2rem; }
.section-md { --section-space: 4rem; }
.section-lg { --section-space: 6rem; }Variantes del sistema
Ritmo base
Es la variante general del sistema para bloques principales y secciones estándar.
.section-md → 4rem
Ritmo amplio
Pensado para hero, aperturas, cierres importantes o bloques que necesitan más respiración.
.section-lg → 6rem
Ejemplos de uso
<section class="section">
<div class="container">
...
</div>
</section><section class="section section-sm">
<div class="container">
...
</div>
</section><section class="section section-lg">
<div class="container">
...
</div>
</section>Cuándo usar sections
Sí usar
- Entre grandes bloques de página.
- Para definir ritmo macro consistente.
- En hero, módulos, contenidos, cierres y transiciones.
- Cuando el bloque necesita separación estructural clara.
No usar
- Para ajustar spacing puntual entre elementos pequeños.
- Dentro de componentes internos.
- Como reemplazo de stack.
- Para resolver márgenes aislados dentro de un módulo.
Section vs stack vs spacing
Ritmo macro
Se usa entre grandes bloques de página.
Flujo interno
Se usa dentro de un bloque para separar elementos verticalmente.
Ajuste puntual
Se usa para resolver margin o padding específicos.
Qué sí y qué no va en sections
Qué sí debe contener
- Padding vertical macro.
- Variantes de ritmo entre secciones.
- Control estructural del espacio entre bloques grandes.
Qué no debe contener
- Margin direccional.
- Spacing interno de componentes.
- Helpers flex.
- Layout horizontal.
- Tipografía o estilos visuales del proyecto.
Siguiente paso
Continúa con stack para revisar el flujo vertical interno dentro de cada bloque.