Components (registry)Layout
SectionHeader
Eyebrow, title, and subtitle set the reading measure for a section entrance. Start every major block here.
Anatomía CSS
<div class="section-header"> <span class="section-header__eyebrow"></span> <span class="section-header__subtitle"></span> </div>
| Clase | Propósito |
|---|---|
section-header | root |
section-header--center | modifier |
section-header--wide | modifier |
section-header__eyebrow | element |
section-header__subtitle | element |
Tokens resueltos
Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.
| Variante | Prop | Valor | Token |
|---|---|---|---|
| all | fg | #525252 | muted.foreground |
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).
/* -------------------------------------------------------------------------
Section Header
Eyebrow + titulo + subtitulo: la entrada de cualquier seccion. Fija la
medida de lectura del subtitulo (~60ch) para que no se estire a todo el
ancho del container.
Variantes: --center (centrado), --wide (sin limite de medida)
------------------------------------------------------------------------- */
.section-header {
display: flex;
flex-direction: column;
gap: 16px;
margin-block-end: 80px;
}
.section-header--center {
align-items: center;
text-align: center;
margin-inline: auto;
}
.section-header__eyebrow {
color: #525252;
}
.section-header__subtitle {
max-width: 60ch;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: #525252;
text-wrap: pretty;
}
.section-header--wide .section-header__subtitle {
max-width: none;
}
Codigo fuente
styles/components/section-header.css
/* ------------------------------------------------------------------------- Section Header Eyebrow + titulo + subtitulo: la entrada de cualquier seccion. Fija la medida de lectura del subtitulo (~60ch) para que no se estire a todo el ancho del container. Variantes: --center (centrado), --wide (sin limite de medida) ------------------------------------------------------------------------- */ .section-header { display: flex; flex-direction: column; gap: var(--spacing-4); margin-block-end: var(--rhythm-s); } .section-header--center { align-items: center; text-align: center; margin-inline: auto; } .section-header__eyebrow { color: var(--muted-foreground); } .section-header__subtitle { max-width: 60ch; font-size: var(--font-size-lg); font-weight: var(--font-weight-regular); line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty; } .section-header--wide .section-header__subtitle { max-width: none; }