Ir al contenido

Componentes · Ola 4 · Editorial

Container

La caja de una página: centra el contenido en un ancho de los tokens, con el margen lateral y el sangrado en grilla. No impone espacio vertical ni tipografía: solo el ancho, el margen lateral fluido (layout.gutter, de 16 a 40 px) y, en grilla, las líneas para el sangrado.

import { Container } from '@archeblack/ui';

Ejemplos

Anchos

page, reading, narrow y full. A 1280 px, la página mide 1200 px y la columna de lectura, 578.

page
reading
narrow
full
Svelte 
<script lang="ts">
	import { Container } from '@archeblack/ui';

	const widths = ['page', 'reading', 'narrow', 'full'] as const;
</script>

<!-- Cada caja con un contorno para ver su ancho; el margen lateral es layout.gutter. -->
<div style="display: grid; gap: var(--arche-spacing-3); width: 100%">
	{#each widths as width (width)}
		<Container
			{width}
			style="padding: var(--arche-spacing-3) 0; outline: 1px dashed var(--arche-color-border-strong); font: var(--arche-typography-label); letter-spacing: var(--arche-typography-label-letter-spacing); text-transform: uppercase; color: var(--arche-color-text-subtle); text-align: center"
		>
			{width}
		</Container>
	{/each}
</div>

Grilla con sangrado

Con layout="grid", la prosa queda en la columna de lectura y la figura llega al ancho de página.

Hay casas viejas que no tienen puertas entre los ambientes. Tienen pórticos, arcos anchos que marcan dónde termina la cocina y empieza el comedor sin cerrar ninguno de los dos.

Con bleed en page, hasta el ancho de página.

Esos puntos son las esquinas. Lugares de paso. Y sin embargo, a veces, hay alguien sentado ahí.

Svelte 
<script lang="ts">
	import { Container, Figure, Prose } from '@archeblack/ui';
</script>

<!-- En grilla, los hijos van a la columna de lectura y Figure sale de ella con bleed. -->
<Container width="reading" layout="grid" style="row-gap: var(--arche-spacing-10); width: 100%">
	<Prose>
		<p>
			Hay casas viejas que no tienen puertas entre los ambientes. Tienen pórticos, arcos anchos que
			marcan dónde termina la cocina y empieza el comedor sin cerrar ninguno de los dos.
		</p>
	</Prose>
	<Figure alt="" mark="arche" bleed="page" caption="Con bleed en page, hasta el ancho de página." />
	<Prose>
		<p>
			Esos puntos son las esquinas. Lugares de paso. Y sin embargo, a veces, hay alguien sentado
			ahí.
		</p>
	</Prose>
</Container>

Banda de superficie

tone="surface" ocupa todo el ancho; el contenido sigue en la medida angosta.

Sigue leyendo

Tres ensayos sobre la sed que el saber no calma.

Svelte 
<script lang="ts">
	import { Container, Heading } from '@archeblack/ui';
</script>

<!-- Una banda de todo el ancho; el contenido sigue acotado por width. -->
<Container
	tone="surface"
	width="narrow"
	as="section"
	aria-labelledby="band-title"
	style="width: 100%"
>
	<Heading level={4} size="xl" id="band-title">Sigue leyendo</Heading>
	<p style="margin: var(--arche-spacing-4) 0 0; color: var(--arche-color-text-muted)">
		Tres ensayos sobre la sed que el saber no calma.
	</p>
</Container>

Props

PropDescripción
width? 'page' | 'reading' | 'narrow' | 'full' Por defecto 'page'Ancho del contenido. page: hasta 1280 px (layout.width.page). reading: la columna de lectura, 578 px (layout.width.reading). narrow: 640 px (layout.measure.narrow). full: sin tope, con el margen lateral.
layout? 'block' | 'grid' Por defecto 'block'block: una caja centrada. grid: todo el ancho, con las líneas full, page y content; los hijos van a content y uno con data-bleed="page" o "full" (una Figure con bleed) se sale de ella.
tone? 'none' | 'surface' Por defecto 'none'surface: una banda de todo el ancho, con fondo surface, borde arriba y abajo y 48 px de relleno vertical (64 desde 48rem).
as? 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' Por defecto 'div'Elemento raíz.
children? Snippet El contenido.
class? ClassValue Se suma a arche-container.
...rest HTMLAttributes Van a la raíz.

Accesibilidad

  • No agrega roles: el elemento de as da la semántica. Usa main, article, section (con un título y aria-labelledby), header o footer donde corresponda.
  • El margen lateral es fluido (16 a 40 px) y el ancho se acota con min(): a 320 px y con zoom de 400 % no hay scroll horizontal.
  • La medida de lectura va en rem (layout.width.reading) y no en ch: no depende de la fuente del contenedor.
  • En colores forzados la banda pierde el fondo y conserva el borde.

Qué evitar

  • Acotar una columna con layout.measure.reading (55ch) en un contenedor. width="reading" (578 px en rem). La medida en ch va en el elemento de texto: Prose la usa.
  • Un Container dentro de otro para sacar una imagen de la columna. layout="grid" y Figure con bleed.
  • Radio, brillo o tarjetas dentro de la banda para destacarla. La banda sola: la capa y el borde alcanzan.