Stack
A layout utility for quickly composing flex or grid containers with configurable gap, padding, max-width, orientation, and border.
SSR mode
Divergence from Blok
Blazor-side addition; no equivalent in the Blok design system. Stack is a layout utility component we ship to make composing flex/grid containers ergonomic. It maps to plain Tailwind utility classes — there is no upstream Blok component to track for this.
Examples
Default (grid)
One
Two
Three
Flex column
First
Second
Flex row with gap
Border and padding
Card title
A bordered, padded stack works well as a quick card scaffold.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Stack | Layout helper that renders a single <div> styled as grid or flex. Defaults to grid; opt into flex via Flex and use Row to flip orientation. Gap, padding, max-width and border are all opt-in. |
Stack
Layout helper that renders a single <div> styled as grid or flex. Defaults to grid; opt into flex via Flex and use Row to flip orientation. Gap, padding, max-width and border are all opt-in.
| Property | Type | Required | Description |
|---|---|---|---|
| Flex | bool | When true, uses flex flex-wrap. When false (default), uses grid. | |
| Row | bool | Only when Flex is true. true = flex-row, false (default) = flex-col. | |
| Border | bool | Adds a rounded border around the container. Default: false. | |
| Gap | int | Tailwind gap scale (1–6). Default: 4. | |
| Padding | int | Tailwind padding scale (1–6). Default: 2. | |
| Size | Size | Max-width token applied as max-w-*. Default: Size.Lg. Accepts the full Size enum (Xs3..Xl8, Full). | |
| ClassName | string? | Extra CSS classes appended to the outer <div>. | |
| ChildContent | RenderFragment? | The items laid out inside the stack. |