Un ancho para cada contenido
Container ocupa el ancho disponible de su padre hasta el límite elegido. No aumenta la tipografía ni estira las columnas: controla el espacio de la composición.
Un espacio para tu interfaz
El contenedor usa size=xl y gutter=md.
La vista previa está limitada por esta columna de documentación. En tu aplicación,
4k
permite un ancho exterior de hasta
240rem: 3840 píxeles CSS con una fuente raíz de 16px.
<UIContainer as="section" size="4k" gutter="md" ariaLabel="Proyectos">
<h2>Proyectos del equipo</h2>
<p>Contenido centrado, con espacio lateral adaptable.</p>
</UIContainer>Anchos máximos
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
sm
|
40rem
| 640px. Formularios y contenido compacto. |
md
|
48rem
| 768px. Lectura y configuración. |
lg
|
64rem
| 1024px. Contenido de una aplicación. |
xl
|
80rem
| 1280px. Valor por defecto. |
2xl
|
96rem
| 1536px. Paneles amplios. |
3xl
|
120rem
| 1920px. Vistas de escritorio grandes. |
4k
|
240rem
| 3840px. Superficies de trabajo en 4K. |
full
|
none
| Sin límite: ocupa el ancho disponible del padre. |
Las equivalencias en píxeles usan una raíz de 16px. El comportamiento depende del viewport CSS, no de la resolución física del monitor. En pantallas mayores que el máximo, el contenido sigue centrado.
Espacio lateral adaptable
gutter
añade padding lógico a ambos lados, incluido en el ancho exterior. El valor
md
crece entre 16 y 64px;
sm, entre 12 y 24px;
lg, entre 24 y 96px. Usa
none
cuando el padre ya aporta ese espacio.
<UIContainer size="4k">
<header>Cabecera del espacio de trabajo</header>
<UIContainer size="lg" gutter="none">
<h1>Contenido de lectura</h1>
<p>Un ancho menor dentro de una superficie amplia.</p>
</UIContainer>
</UIContainer>API
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
size
|
UIContainerSize
xl
| Ancho máximo. sm, md, lg, xl, 2xl, 3xl, 4k o full. |
gutter
|
none | sm | md | lg
md
| Padding lateral fluido con soporte de dirección RTL. |
as
|
UIContainerTag
div
| div, section, main, article, header, footer, nav o aside. |
id / ariaLabel / class
|
string
| Identidad, nombre accesible y clases adicionales. |
Requiere el snippet
default. No añade roles, encabezados ni comportamiento interactivo. Elige
as
según la semántica del contenido; no anides otro
main
dentro del principal.
Personalización
Usa una clase para sobrescribir
--ui-container-max-width
o
--ui-container-gutter. El contenedor no oculta contenido que desborde: las tablas y los bloques de código deben gestionar su propio scroll.
.workspace {
--ui-container-max-width: 110rem;
--ui-container-gutter: clamp(1rem, 3vw, 5rem);
}