Isometric Stack
Isometric layered cards that separate on hover or focus with billboard labels on leader lines, keyboard selection and a caption.
Preview
Services · Twelve services, 99.98% uptime over 90 days.
Hover or focus to separate
Components · Buttons, fields and cards from the design system.
Held open with expanded
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layers | IsometricLayer[] | — | Layers, top first: { id, label, description?, meta?, tone?, content? }. |
| label | string | — | Accessible name of the stack. |
| size | number | 180 | Side of each square layer in px. |
| gap | number | 10 | Space between layers when stacked, in px. |
| expandedGap | number | 52 | Space between layers when separated, in px. |
| expanded | boolean | — | Force the separated or stacked view. Omit to separate on hover and focus. |
| value | string | — | Selected layer id (controlled). |
| defaultValue | string | first layer | Initially selected layer id. |
| onValueChange | (id: string) => void | — | Called when a layer is selected. |
| labelSpace | number | 160 | Room reserved to the right of the stack for labels, in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.