Holo Stack
The <holo-stack> component is a semantics-free layout primitive for arranging children with consistent gap spacing, reusing the same gap-token scale as holo-grid.
Live Previews
Section titled “Live Previews”Column stack (default)
Section titled “Column stack (default)”<holo-stack direction="column" gap="md"> <holo-badge>One</holo-badge> <holo-badge>Two</holo-badge> <holo-badge>Three</holo-badge></holo-stack>Row stack with wrap
Section titled “Row stack with wrap”<holo-stack direction="row" gap="sm" wrap justify="start" align="center"> <holo-tag>Alpha</holo-tag> <holo-tag>Beta</holo-tag> <holo-tag>Gamma</holo-tag></holo-stack>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | -------------------------------------------- | ------------------------------------------------------- | ----------- |
| direction | direction | The flex direction of the stack. | "row" \| "column" | "column" |
| gap | gap | The gap size between stacked items. | "sm" \| "md" \| "lg" | "md" |
| align | align | The cross-axis alignment (align-items). | "start" \| "center" \| "end" \| "stretch" | undefined |
| justify | justify | The main-axis alignment (justify-content). | "start" \| "center" \| "end" \| "between" \| "around" | undefined |
| wrap | wrap | If true, items wrap onto multiple lines. | boolean | false |
| Slot Name | Description | | --------- | ---------------------- | | (default) | The elements to stack. |