'/%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}
Layout
Masonry and ImageList
Cards of different heights packed into columns, and image galleries with captions.
Ant Design: Image.PreviewGroup, List grid
import { Masonry, ImageList } from '@alea/ui';
Examples
Masonry
Cards of different heights packed into columns.
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.
Image list
A gallery with captions; links when an href is given.
%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
Props
Masonry props
Cards of different heights packed into columns, Pinterest style (MUI Masonry, Mantine/Ant image lists). Reading order follows the columns top to bottom.
| Prop | Type | Default | Description |
|---|---|---|---|
asList | boolean | - | Render as a list (ul); children should then be li. Default false. |
className | string | - | Extra class names for the root element. |
columnWidth | number | 220 | Least column width in px; columns are added as space allows. Default 220. |
gap | number | 12 | Gap in px. Default 12. |
ImageList props
A gallery of images with optional captions (MUI ImageList, Ant Image.PreviewGroup layout).
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | { src: string; alt: string; title?: string | undefined; subtitle?: string | undefined; href?: string | undefined; }[] | - | Images: src, alt, and an optional title and subtitle shown over the bottom. |
className | string | - | Extra class names for the root element. |
minItemWidth | number | 180 | Least width of a tile. Default 180. |
ratio | number | 1 | Tile ratio in grid. Default 1. |
variant | "grid" | "masonry" | 'grid' | grid (same size) or masonry (keeps each image's shape). Default grid. |
Accessibility
- Reading order follows each column top to bottom; keep cards independent of each other.
- Every image needs alt text.
Do and don't
Do
- Make each card make sense on its own: the reading order follows the columns.
- Write alt text for every image.
Don't
- Don't use it for ordered content (rankings, timelines).
- Don't put critical actions at the bottom of tall cards.