El bloque que abre cada sección de la página: un eyebrow con barra de acento, el título (H2) y la descripción. Da contexto antes del contenido y mantiene la jerarquía —un solo H1 en el hero, H2 en cada sección— para que personas y buscadores se ubiquen.
Esta página no es una ficha técnica: es el módulo entero, abierto y explicado. Qué problema resuelve y por qué se ganó su lugar en cada sección, de qué piezas se compone, cómo se comporta en el teléfono, dónde encaja en el armado de la página y, al final, cómo está construido por dentro —del criterio de diseño a la línea de código—.
Con una particularidad que conviene marcar desde el principio: la página USA el componente para sus propios títulos. Cada H2 que verás abajo no es una réplica ni un mockup: es SectionHeading en vivo, con la misma API y los mismos estilos que se usan en el resto del sitio. Documentación que se documenta a sí misma —y que falla a la vista si el componente falla—.
Definición
El bloque visible que abre cada sección del cuerpo: una etiqueta corta (eyebrow), el título (un H2 en la mayoría de los casos) y una descripción de 1-2 frases que amplía el título.
El encabezado de sección (o «section heading») es el módulo que rotula cada bloque de la página. No es un H2 a secas: es un patrón estructurado —eyebrow + título + descripción + body en duo— que se repite en TODAS las secciones de TODAS las páginas del sitio. Visto de lejos parece decoración tipográfica; visto de cerca, es lo que permite escanear un sitio largo sin perderse.
En este proyecto vive en un único componente, SectionHeading.astro, que reúne dos layouts: «duo» (el estándar: título a la izquierda, body a la derecha, en dos columnas) y «simple» (un bloque centrado o alineado a la izquierda, sin body). Reusar un solo componente para todos los títulos significa que cambiar la tipografía o el color del acento se hace en un solo archivo, y el sitio entero responde.
Función e importancia
Hace tres trabajos a la vez: ordena la jerarquía semántica, da contexto antes del contenido y mantiene el ritmo visual del sitio sin pedir CSS por título.
Su función es estructurar la página para que se pueda leer en diagonal. Un cuerpo largo sin títulos es un muro de párrafos; los mismos párrafos repartidos en secciones rotuladas se vuelven escaneables. El visitante recorre los encabezados, decide en qué bloque entrar y solo entonces lee a fondo. Eso —tan obvio como suena— es la diferencia entre que se quede o se vaya.
Y por eso el patrón pesa fuera de proporción a su tamaño. Para los buscadores, los H2 bien escritos son la mejor pista del contenido de la página después del H1; para la accesibilidad, son los puntos por donde un lector de pantalla salta de sección en sección; para el equipo que mantiene el sitio, son la garantía de que el ritmo visual no se va a deformar con el tiempo.
Un H1 único en el hero y un H2 por sección (con H3 dentro si hace falta) es lo que esperan personas y buscadores. El componente fuerza la jerarquía: por defecto emite H2 y solo baja a H3 cuando se le pide. No hay forma de meter sin querer dos H1 ni de saltarse niveles.
Cada bloque empieza con su rótulo + título + descripción. El visitante sabe qué va a leer antes de leerlo y decide si baja o salta. Es la diferencia entre escanear un texto bien marcado y nadar en un muro de párrafos sin pistas.
Reusar SectionHeading en TODOS los títulos significa que el sitio se mantiene coherente sin esfuerzo: la tipografía, el tamaño, el color del acento y el ritmo entre eyebrow, título y descripción son siempre los mismos. Cambiar uno, cambia todos.
Anatomía
Cuatro piezas: el eyebrow con su barra de acento, el título (con segunda línea opcional resaltada), la descripción y —en el layout duo— el body de la columna derecha.
Cada pieza cumple un papel claro. El eyebrow ubica de un vistazo («Definición», «Anatomía»); el título es la promesa del bloque y el marcador semántico (H2 por defecto); la descripción amplía sin repetir, en 1-2 frases; y el body de la columna derecha, exclusivo del layout duo, suma el «por qué» o la nota técnica al lado del título. El orden de lectura está cableado: rótulo, título, descripción, contexto.
Abajo, el ejemplo en vivo —la sección que estás leyendo es el ejemplo en vivo—. Cada punto numerado se desglosa en su tarjeta: qué resuelve y de qué prop del componente sale. Y para que el mapeo sea inequívoco, los pines del espécimen apuntan a los mismos elementos del SectionHeading que abre esta sección: lo que ves arriba es exactamente lo que se documenta abajo.
1Eyebrow corto
2
Título de la sección,
resaltado con acento
3Descripción de 1-2 frases que amplía el título y dice por qué importa el bloque.
Primer párrafo del body: el qué y el por qué. Va al lado del título, no debajo, así que se lee en paralelo con la promesa.
Segundo párrafo del body: el cómo o la nota técnica. Mantén ambos en el mismo registro y de longitud parecida.
La etiqueta corta sobre el título, en mayúsculas y con una barra de acento a la izquierda. Ubica al visitante en una palabra («Definición», «Anatomía», «Variantes») antes de leer la promesa de la sección. Es opcional, pero rinde mucho: dos palabras bien escogidas equivalen a un H3.
Dato prop eyebrow
El encabezado real de la sección, generalmente un H2 (el H1 lo ocupa el hero). La prop titleAccent agrega una segunda línea destacada en color de marca, útil para resaltar la palabra clave del título sin partir la frase. Es la señal jerárquica más fuerte del bloque.
Dato props title · titleAccent · as
Una frase larga que amplía el título: dice qué hay en la sección y por qué importa, sin repetir el título ni adelantar todo el cuerpo. Funciona como una mini-deck que decide si la persona se queda a leer la sección entera o pasa de largo.
Dato prop desc
En el layout duo, la mitad derecha lleva un array de párrafos que explican el módulo: el «por qué» y la nota técnica, manteniéndolos visualmente al lado del título. Es lo que convierte un título cualquiera en una micro-portada de sección, sin sumar un párrafo suelto extra debajo.
Dato prop body[] · layout="duo"
Variantes
El de esta plantilla es el duo, pero el encabezado cambia de cara según lo que el bloque necesita rotular: catálogo, artículo, fondo oscuro, sub-sección.
No hay un único modelo: hay una misma idea —eyebrow + título + descripción— que cada tipo de bloque ajusta. Una sección de contenido usa duo (con body al lado del título); un catálogo usa simple+titleAccent (centrado, con segunda línea de acento); un artículo editorial alinea a la izquierda; un CTA banner usa duo sobre fondo oscuro; una sub-sección reusa el mismo componente bajando a H3.
Abajo, seis variantes —cinco son configuraciones REALES del componente (cambiando solo las props layout, align, as, titleAccent y dark), y la última es una extensión propuesta que requeriría añadir un slot al componente—. Cada una con su réplica en vivo y el tipo de proyecto donde rinde mejor.
Responsive y móvil
En móvil el encabezado no se encoge: cambia de modo. Las dos columnas se apilan, el título escala solo con clamp() y el espaciado vertical se ajusta para no comerse la pantalla.
En escritorio el layout duo vive cómodo como dos columnas (1fr 1fr) con un gap fluido. En el teléfono, esas dos columnas no caben sin apretar el texto, así que el componente colapsa a una sola columna por defecto bajo 768 px y el body cae debajo del título. Es lo más seguro y lo que ya hace el componente, sin un molde distinto para cada ancho.
A partir de ahí, hay dos patrones de tipografía que conviene conocer —fluida con clamp() para que el H2 escale solo, y eyebrow fijo en xs para que no compita con el título— y dos extensiones opcionales según el caso: espaciado comprimido en pantallas muy pequeñas e inversión del orden en stack (body primero, título después) para landings narrativas. Las cuatro están abajo, cada una con su vista en el teléfono y una receta comentada lista para adaptar.
DEFINICIÓN
¿Qué es el encabezado de sección?
El bloque que abre cada sección: eyebrow + título + descripción.
Primer párrafo del body — cae debajo del título en móvil.
Segundo párrafo del body — completa el contexto.
Es lo que ya hace el componente de fábrica. Bajo 768 px el grid-template-columns pasa de 1fr 1fr a 1fr y align-items baja a start. El body cae naturalmente debajo del título, sin reordenar nada en JS. Cero esfuerzo del consumidor del componente.
/* MÓVIL · DE DOS COLUMNAS A UNA (lo que ya hace el componente)
El duo es grid de 1fr 1fr en escritorio; bajo 768 px se
colapsa a 1 columna y los párrafos del body caen debajo
del título. Cero JS: el patrón está en el propio componente. */
.sech--duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (max-width: 768px) {
.sech--duo {
grid-template-columns: 1fr; /* una sola columna */
gap: var(--sp-5); /* menos aire vertical */
align-items: start;
}
}VARIANTES
Otros diseños y aplicaciones
El título escala entre 2rem y 3rem según el ancho del viewport, sin media queries.
El .sech__title usa font-size: clamp(2rem, 3.5vw, 3rem). El valor preferido (3.5vw) escala con el ancho del viewport, acotado entre un mínimo y un máximo. El eyebrow se queda en xs a propósito: es metadata, no debe competir con el título.
/* MÓVIL · TIPOGRAFÍA FLUIDA (lo que ya hace el componente)
El título usa clamp() para escalar entre 2rem y 3rem según
el ancho del viewport. No hay media queries para el título:
crece y encoge solo. Es la regla del proyecto para todos los
tamaños grandes (hero h1, sección h2). */
.sech__title {
/* clamp(MÍN, IDEAL, MÁX) — el valor preferido escala con vw */
font-size: var(--text-3xl, clamp(2rem, 3.5vw, 3rem));
font-weight: var(--weight-black, 800);
line-height: var(--leading-tight, 1.2);
letter-spacing: -.02em;
}
/* El eyebrow se queda en xs (no escala): es metadata, no
promesa. Y la descripción usa text-lg con line-height
relaxed para que siga cómoda al apilarse en móvil. */
.sech__eyebrow { font-size: var(--text-xs); }
.sech__desc { font-size: var(--text-lg); line-height: 1.7; }RESPONSIVE
Espaciado comprimido
Menos margen inferior en pantallas muy pequeñas.
Siguiente bloque más cerca →
En pantallas muy pequeñas (≤ 480 px) el margin-bottom de 2rem del bloque se siente excesivo. Reducirlo a 1.25rem y bajar el gap interno del head a 0.75rem ahorra altura sin sentirse apretado. Es una extensión local, fuera del componente.
/* MÓVIL · ESPACIADO COMPRIMIDO (extensión)
En pantallas muy pequeñas el margen inferior de 2rem
del bloque se siente excesivo. Esta extensión opcional
lo reduce a 1.25rem en móvil sin tocar el desktop. */
.sech { margin-bottom: var(--sp-8); } /* 2rem por defecto */
@media (max-width: 480px) {
.sech { margin-bottom: var(--sp-5); } /* 1.25rem en móvil */
}
/* Y reducir un pelín la separación interna del head
(eyebrow → título → desc) en duo, para que el bloque
ocupe menos altura sin sentirse apretado. */
@media (max-width: 480px) {
.sech--duo .sech__head { gap: var(--sp-3); }
}Primer párrafo del body, primero — el «cuento» antes del «membrete».
Segundo párrafo — engancha antes de etiquetar.
EDITORIAL
Título al final del bloque
El título cae después del cuerpo en este patrón.
En duo, por defecto el título cae primero al apilarse. Algunas landings editoriales prefieren lo contrario: el body «narrativo» va primero y el título funciona como pie. Se logra con flex-direction: column + order, fuera del componente. Úsalo con criterio: rompe la convención del molde.
/* MÓVIL · INVERTIR EL ORDEN EN STACK (extensión)
En duo, lo natural en móvil es que el título caiga
primero y el body debajo. Pero en algunos casos
editoriales conviene lo contrario: primero el «cuento»
(body) y luego el «membrete» (eyebrow + título), para
enganchar antes de etiquetar. */
@media (max-width: 768px) {
.sech--duo { display: flex; flex-direction: column; }
.sech--duo .sech__body { order: 1; } /* body primero */
.sech--duo .sech__head { order: 2; } /* título después */
}
/* OJO: rompe la convención del molde. Úsalo solo cuando
el contenido del body sea narrativo (no notas técnicas)
y dentro de una landing concreta — no como default. */Posición
Una vez por sección de contenido, justo arriba del cuerpo del bloque, dentro del .container del 90 %. Varias veces por página, según cuántas secciones tenga.
A diferencia del hero (una vez por página) o de la franja de menú (una o dos veces como máximo), el encabezado de sección se repite tantas veces como secciones tenga la página. En esta plantilla, una página de módulo lleva entre 6 y 8 SectionHeading —uno por cada bloque de contenido—. Es un patrón, no una pieza única, y por eso el componente está pensado para escalar sin pedir cambios.
Vive SIEMPRE dentro del .container central (90 % del ancho, max-width acotado). A diferencia de la franja del menú —que va full-width—, el encabezado respeta el ancho del cuerpo: pertenece al texto, no al chrome. Y se monta sobre la sección padre (.section o .section--surface), que es quien aporta el padding vertical y el color de fondo alternado.
Módulos cercanos: hero (el H1 único de arriba), menú de secciones (la franja full-width entre hero y cuerpo) y migas de pan (la barra que precede al primer encabezado en internas).
Implementación
Un único componente con API pequeña: id, eyebrow, title, titleAccent, desc, layout, align, body, dark, as. Devuelve un <header> con un Tag dinámico (h2 por defecto, h3 si se pide).
El componente vive en SectionHeading.astro y expone diez props a propósito: id (anchor), eyebrow, title (obligatorio), titleAccent (segunda línea de acento), desc, layout (simple|duo), align (center|left, solo simple), body[] (solo duo), dark (texto claro sobre fondo oscuro) y as (h2|h3). La etiqueta semántica del título es DINÁMICA: el componente declara «const Tag = as» y la renderiza como «Tag class="sech__title"»; cambiar la prop cambia el elemento HTML emitido.
La regla de uso está cableada en los defaults: layout="simple", align="center", as="h2". Eso significa que sin tocar nada se obtiene el rótulo tipo «catálogo». Para una sección de contenido (lo más común), basta con pasar layout="duo" y el array body. La jerarquía baja a H3 con un as="h3", sin tocar el resto. Cero JavaScript: HTML + CSS estático generado en build.
---
// USO BÁSICO · layout="duo" — el patrón estándar del sitio.
// Eyebrow + título + descripción a la izquierda, 2 párrafos
// de body a la derecha. Va dentro de un .container; el
// componente no lleva fondo: se monta sobre la sección.
import SectionHeading from '@components/SectionHeading.astro'
---
<section class="section">
<div class="container">
<SectionHeading
layout="duo"
eyebrow="Definición"
title="¿Qué es el módulo X?"
desc="La frase de 1-2 líneas que amplía el título y dice por qué importa el bloque."
body={[
'Primer párrafo del body: el qué y el por qué. Va al lado del título, no debajo, así que se lee en paralelo con la promesa.',
'Segundo párrafo del body: el cómo o la nota técnica. Mantén ambos en el mismo registro y de longitud parecida; ese equilibrio visual es parte del diseño.',
]}
/>
{/* …contenido del bloque… */}
</div>
</section>---
// CATÁLOGO · layout="simple" + titleAccent — SOLO para rotular
// índices (productos/index, modulos/index). NO se usa para
// secciones de contenido (esas van en duo). titleAccent añade
// una segunda línea destacada en color de marca, útil para
// resaltar la palabra clave del título.
import SectionHeading from '@components/SectionHeading.astro'
---
<SectionHeading
layout="simple"
align="center"
eyebrow="Catálogo"
title="Nuestros productos:"
titleAccent="todo lo que ofrecemos"
desc="Una línea de presentación del catálogo, breve y descriptiva."
/>---
// SUB-SECCIÓN · as="h3" — cuando una sección H2 tiene varios
// sub-bloques con su propio rótulo, se reusa el mismo
// componente bajando a H3. Mantiene el lenguaje visual sin
// romper la jerarquía semántica (h1 hero → h2 sección →
// h3 sub-sección). El layout duo sigue funcionando.
import SectionHeading from '@components/SectionHeading.astro'
---
<SectionHeading
as="h3"
layout="duo"
eyebrow="Sub-sección"
title="Variante: jerarquía H3"
desc="Una línea que explica de qué va esta sub-sección dentro del H2 padre."
body={[
'Un párrafo de contexto. Mismo componente, mismo diseño; solo cambia la etiqueta semántica.',
]}
/>
En concreto: el componente recibe las props, construye un <header> con
class:list dinámico (sech--duo o sech--simple, más
sech--center/sech--left en simple, más sech--dark si aplica),
y emite siempre la columna izquierda (.sech__head: eyebrow + Tag + desc). Si el
layout es duo y body.length > 0, añade la columna derecha
(.sech__body) con un <p class="sech__body-p"> por cada string del
array. Sin layout duo o con body vacío, la columna derecha no se renderiza.
La accesibilidad es de fábrica: el contenedor es un <header> semántico (no
<div>), el título es un heading real (<h2> o <h3>
según la prop as), la barra de acento del eyebrow lleva aria-hidden="true" y los
colores cumplen contraste AA tanto en claro como en dark. Los tokens del proyecto
(--text-3xl, --text-lg, --weight-black) son la única fuente
de tipografía: cambiar el design system cambia todos los títulos del sitio.
Buenas prácticas
La diferencia entre un sitio que se escanea bien y uno que se siente «hecho por bloques distintos» cabe en un puñado de hábitos —empezando por usar SectionHeading en TODOS los títulos—.
Ninguno de estos hábitos es capricho: salen de la regla canónica del proyecto («un solo componente para todos los títulos»). El sitio se siente coherente porque cada encabezado nace del mismo molde, con la misma tipografía y el mismo ritmo entre eyebrow, título y descripción. La única decisión real es elegir el layout: duo para contenido (la mayoría), simple+titleAccent solo como rótulo de catálogo en productos/index y modulos/index.
La buena noticia es que casi todo se sostiene solo cuando se respeta el componente: la jerarquía H1 → H2 → H3 está cableada por la prop as, el contraste lo cuida el sistema y el responsive lo resuelve el componente. Abajo, lo que conviene y lo que conviene evitar, enfrentados.