Container
Define el marco general del artículo dentro de la página.
Article Pattern
Este patrón muestra cómo construir una pieza editorial clara, legible y bien jerarquizada usando el sistema base del framework.
Qué resuelve este patrón
Un artículo necesita ancho de lectura, jerarquía tipográfica, ritmo interno y bloques de apoyo que no rompan la continuidad del contenido.
Este patrón demuestra cómo usar container, width, stack, typography, text y lists para construir una pieza editorial sin depender de CSS aislado.
Módulos que intervienen
Width
Controla el ancho de lectura con narrow, medium o max.
Stack
Organiza encabezado, cuerpo, subtítulos y bloques internos.
Typography
Establece la jerarquía editorial de títulos y subtítulos.
Text
Ajusta mayúsculas, alineación, pesos y tono visual auxiliar.
Lists
Permite integrar bullets o pasos numerados dentro del flujo editorial.
Ejemplo visual del patrón
How to build an editorial article with structure
Una pieza editorial clara comienza por el control del ancho, el ritmo interno y la jerarquía tipográfica.
El patrón editorial no necesita artificios visuales excesivos. Necesita claridad, continuidad y una lectura estable a lo largo de toda la pieza.
Cuando el contenido se apoya en una estructura consistente, el artículo se siente más limpio, más profesional y más fácil de recorrer.
Subtítulo editorial
El subtítulo divide el contenido en bloques comprensibles sin romper el ritmo de lectura.
Aquí es donde stack se vuelve más útil: evita márgenes manuales y mantiene una separación uniforme.
Lista dentro del artículo
- Jerarquía clara del encabezado.
- Ancho de lectura controlado.
- Separación interna consistente.
- Bloques editoriales fáciles de escanear.
Código base del patrón
<article class="narrow centered stack stack-lg">
<header class="stack stack-md">
<p class="meta ls-sm">Framework Documentation</p>
<h1 class="title title-xl fnt-uppercase">Article Title</h1>
<p class="subtitle">Texto de apoyo del artículo.</p>
</header>
<div class="stack stack-md">
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
</div>
<section class="stack stack-sm">
<h2 class="title title-lg fnt-uppercase">Subtítulo</h2>
<div class="stack stack-md">
<p>Contenido del bloque.</p>
</div>
</section>
</article>Bloques comunes del patrón editorial
Encabezado
Meta, título principal y texto de apoyo.
Cuerpo
Párrafos agrupados con stack para una lectura limpia.
Subsecciones
Subtítulos y bloques internos que ordenan el discurso.
Listas
Bullets o numeraciones cuando el contenido lo necesita.
Variantes comunes
Artículo estándar
Ideal para lectura continua y documentación textual.
Artículo amplio
Útil cuando el contenido necesita un poco más de aire horizontal.
Artículo con apoyo lateral
Se puede construir con proportions para notas o módulos secundarios.
Ejemplo con apoyo lateral
<section class="section">
<div class="container container-xl">
<div class="grid cols-1 lg:cols-2-1 gap-lg">
<article class="narrow stack stack-lg">
...
</article>
<aside class="stack stack-md">
...
</aside>
</div>
</div>
</section>Decisiones clave del patrón
- El ancho de lectura debe estar controlado, por eso el patrón usa narrow o medium.
- La pieza necesita continuidad, por eso el ritmo interno depende de stack y no de márgenes dispersos.
- La jerarquía editorial debe ser clara, por eso se repiten meta + title + subtitle.
- Las listas deben integrarse semánticamente, no simularse con párrafos sueltos.
Qué evitar en este patrón
Ancho excesivo
Un artículo demasiado ancho dificulta la lectura y rompe el ritmo editorial.
Subtítulos sin espacio
Cuando los bloques internos no respiran, la lectura se vuelve pesada y confusa.
Jerarquía plana
Si título, subtítulo y cuerpo se parecen demasiado, el artículo pierde estructura.
Listas improvisadas
No simular bullets o pasos con guiones manuales cuando el sistema ya tiene lists.
Siguiente paso
Continúa con pattern buttons para revisar patrones aplicados de acciones y CTAs.