'/%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
Masonry e ImageList
Tarjetas de distintas alturas acomodadas en columnas, y galerías de imágenes con pie de foto.
import { Masonry, ImageList } from '@alea/ui';
Ejemplos
Masonry
Tarjetas de distintas alturas acomodadas en columnas.
Tokens first, components second.
Every chart needs a table view.
Name things for what they do, not how they look. A button that deletes is "Delete", not "Red button".
Motion: fade from 0.01, never 0.
Test in dark and light.
Keyboard first: if it works with Tab and Enter, it usually works with a screen reader too.
Ship small.
Lista de imágenes
Una galería con pies de foto; enlaces cuando hay un href.
%22%2F%3E%3C%2Fsvg%3E)
Orchidpurple.400 %22%2F%3E%3C%2Fsvg%3E)
Sunriseyellow.200 %22%2F%3E%3C%2Fsvg%3E)
Lagoon%22%2F%3E%3C%2Fsvg%3E)
Bloom
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-masonry-gap…
Props
Masonry props
Tarjetas de distintas alturas acomodadas en columnas. El orden de lectura sigue las columnas de arriba abajo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
asList | boolean | - | Se muestra como una lista (ul); los hijos deben ser li. Por defecto false. |
className | string | - | Clases extra para el elemento raíz. |
columnWidth | number | 220 | Ancho mínimo de columna en px; se agregan columnas según el espacio. Por defecto 220. |
gap | number | 12 | Espacio en px. Por defecto 12. |
ImageList props
Una galería de imágenes con pies de foto opcionales.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | { src: string; alt: string; title?: string | undefined; subtitle?: string | undefined; href?: string | undefined; }[] | - | Imágenes: src, alt, y un title y subtitle opcionales mostrados sobre la parte inferior. |
className | string | - | Clases extra para el elemento raíz. |
minItemWidth | number | 180 | Ancho mínimo de un mosaico. Por defecto 180. |
ratio | number | 1 | Proporción del mosaico en grid. Por defecto 1. |
variant | "grid" | "masonry" | 'grid' | grid (mismo tamaño) o masonry (mantiene la forma de cada imagen). Por defecto grid. |
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.
Masonry
- 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-masonry
ImageList
- Variantes
variantgridmasonry- Estados
- Hover (CSS)
- Motion
- lift
- 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-imagelist-cap.alea-imagelist-title.alea-imagelist-sub.alea-imagelist-tile.alea-imagelist
Accesibilidad
- El orden de lectura sigue cada columna de arriba abajo; mantén las tarjetas independientes entre sí.
- Cada imagen necesita texto alternativo.
Qué hacer y qué evitar
Hacer
- Haz que cada tarjeta tenga sentido sola: el orden de lectura sigue las columnas.
- Escribe texto alternativo para cada imagen.
Evitar
- No lo uses para contenido ordenado (rankings, líneas de tiempo).
- No pongas acciones críticas al final de tarjetas altas.