'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Maquetación
Stack, Inline, Grid
Organiza el espacio con la escala: columnas, filas que saltan de línea, grillas responsive, el contenedor de página y divisores.
import { Stack, Inline, Grid, Container, Divider } from '@alea/ui';
Ejemplos
Stack e Inline
Stack pone los hijos en una columna, Inline en una fila que se acomoda. El espacio viene de la escala de espaciado.
Stack with gap 4 (16 px)
Grid
columns="auto" mete tantas columnas como permite minItemWidth: responsive sin breakpoints.
Palette
Figma plugin
Contrast
Figma plugin
Type scale
Figma plugin
Color vision
Figma plugin
Tokens
Figma plugin
A11y
Figma plugin
Divider
Un separador entre grupos, horizontal o vertical.
Above
Left
Right
Divisores con etiqueta
label pone texto en la línea (al inicio, centro o final); variant la hace discontinua o punteada. Text lineClamp recorta el texto largo a un número de líneas.
or
Today
End of results
Alea is a design system with motion built in: tokens, components and patterns that look and move the same in code and in Figma, with accessibility checked on every page and both themes from the start.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Component
--alea-gap-base…--alea-gap-lg…--alea-gap-md…--alea-gap-sm…--alea-gap-xl…
Props
Stack props
Hijos en una columna con el mismo espacio entre ellos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
align | "start" | "end" | "center" | "stretch" | "baseline" | - | Alineación en el eje cruzado: start, center, end, stretch o baseline. |
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
gap | Responsive<Space> | 4 | Espacio entre hijos, de la escala de espaciado. Por defecto 4 (16 px). Puede cambiar por breakpoint. |
justify | "start" | "end" | "center" | "between" | - | Distribución en el eje principal: start, center, end o between. |
Inline props
Hijos en una fila, que se acomodan en varias líneas por defecto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
align | "start" | "end" | "center" | "stretch" | "baseline" | 'center' | Alineación en el eje cruzado: start, center, end, stretch o baseline. |
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
gap | Responsive<Space> | 2 | Espacio entre hijos, de la escala de espaciado. Por defecto 4 (16 px). Puede cambiar por breakpoint. |
justify | "start" | "end" | "center" | "between" | - | Distribución en el eje principal: start, center, end o between. |
wrap | boolean | true | Pasa a nuevas líneas cuando no hay espacio. Por defecto true. |
Grid props
Una grilla responsive: columnas fijas, tantas como quepan, o una cantidad distinta por breakpoint.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
columns | Responsive<number | "auto"> | 'auto' | Columnas: un número, 'auto' para meter tantas como permita minItemWidth, o una por breakpoint: { base: 1, md: 2, lg: 4 }. Usa 12 con spans de GridItem para el diseño de páginas. |
gap | Responsive<Space> | 4 | Espacio entre celdas, de la escala de espaciado. Por defecto 4 (16 px). Puede cambiar por breakpoint. |
minItemWidth | number | 240 | Ancho mínimo de columna con columns='auto'. Por defecto 240 px. |
Container props
Centra el contenido con un ancho máximo y los márgenes de la página.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
size | "sm" | "md" | "lg" | "xl" | "full" | 'xl' | Ancho máximo: sm 640, md 768, lg 1024, xl 1280 (el ancho de página por defecto), full. |
Divider props
Una línea fina entre grupos, con una etiqueta opcional; sólida, discontinua o punteada.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
label | ReactNode | - | Texto o un ícono en la línea ("o", "Hoy"). Solo horizontal. |
labelPosition | "start" | "end" | "center" | 'center' | Dónde va la etiqueta: center (por defecto), start o end. |
spacing | 0 | 2 | 3 | 4 | 5 | 6 | 1 | 12 | 24 | 0.5 | 7 | 8 | 10 | 16 | 20 | 0 | Espacio alrededor de la línea, de la escala de espaciado. |
variant | "dashed" | "solid" | "dotted" | - | solid (por defecto), dashed o dotted. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Stack
- Variantes
alignstartendcenterstretchbaselinejustifystartendcenterbetween- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-stack.alea-r-gap.alea-gap- Atributos data
data-align=startdata-align=centerdata-align=enddata-align=stretchdata-align=baselinedata-justify=startdata-justify=centerdata-justify=enddata-justify=between
Inline
- Variantes
alignstartendcenterstretchbaselinejustifystartendcenterbetween- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-inline.alea-r-gap.alea-gap- Atributos data
data-wrapdata-align=startdata-align=centerdata-align=enddata-align=stretchdata-align=baselinedata-justify=startdata-justify=centerdata-justify=enddata-justify=between
Grid
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-grid.alea-r-gap.alea-r-cols.alea-gap.alea-cols
Container
- Variantes
sizesmmdlgxlfull- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-container- Atributos data
data-size=smdata-size=mddata-size=lgdata-size=xl
Divider
- Variantes
labelPositionstartendcentervariantdashedsoliddotted- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-divider-labeled.alea-divider.alea-divider-label- Atributos data
data-variant=dasheddata-variant=dotteddata-position=startdata-position=end
Accesibilidad
- Los componentes de layout no agregan roles, salvo Divider, que es un separador.
- Elige el elemento con as (section, ul, nav) para que la estructura signifique algo.
Qué hacer y qué evitar
Hacer
- Usa gap de la escala en lugar de márgenes en los hijos.
Evitar
- No uses Grid para tablas de datos: usa una tabla.