Stack

A row or a column, changing with the screen width.

A static page with IzzyBlazor's script. No circuit.

The general flexbox container: vertical by default, any direction with Direction, which can change per breakpoint. For a direction that never changes, Row and Column say it in the name.

Usage

razor

<Stack Direction="new() { Base = Direction.Column, Md = Direction.Row }" Gap="4" Align="Align.Center">

Direction by breakpoint

Use Direction with a breakpoint map to change direction with the screen: these features sit side by side from Sm (640px), and stack in a column on phones.

Preview Code

Preview

Fast by default

Pages render on the server and arrive ready to read.

Secure sign-in

Single sign-on and two-factor for every account.

Works everywhere

Forms and links keep working with JavaScript off.

Code

Breakpoints.razor

<Stack Direction="new() { Base = Direction.Column, Sm = Direction.Row }" Gap="6" Grow>
    <Column Gap="2" Align="Align.Start" Grow>
        <Icon Name="Lucide.Zap" Color="Color.Primary" />
        <TextBlock Weight="FontWeight.Semibold">Fast by default</TextBlock>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Pages render on the server and arrive ready to read.</TextBlock>
    </Column>
    <Column Gap="2" Align="Align.Start" Grow>
        <Icon Name="Lucide.Shield" Color="Color.Primary" />
        <TextBlock Weight="FontWeight.Semibold">Secure sign-in</TextBlock>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Single sign-on and two-factor for every account.</TextBlock>
    </Column>
    <Column Gap="2" Align="Align.Start" Grow>
        <Icon Name="Lucide.Globe" Color="Color.Primary" />
        <TextBlock Weight="FontWeight.Semibold">Works everywhere</TextBlock>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Forms and links keep working with JavaScript off.</TextBlock>
    </Column>
</Stack>

Give Align a breakpoint map too: from Sm the title and actions share a line, spread apart by Justify.Between; on phones they stack, with the actions under the title.

Preview Code

Preview

Invoices

42 invoices, 3 overdue

Code

PageHeader.razor

<Stack Direction="new() { Base = Direction.Column, Sm = Direction.Row }"
       Align="new() { Base = Align.Stretch, Sm = Align.Center }"
       Justify="Justify.Between" Gap="4" Grow>
    <Column Gap="1">
        <Heading Level="2">Invoices</Heading>
        <TextBlock Color="Color.Muted">42 invoices, 3 overdue</TextBlock>
    </Column>
    <Row Gap="2">
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.Download">Export</Button>
        <Button StartIcon="Lucide.Plus">New invoice</Button>
    </Row>
</Stack>

Mode support

What works in each mode, Stack
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a div with no role; As makes it another element, such as ul.
Direction.RowReverse and Direction.ColumnReverse reverse only what people see: keyboard and screen-reader order stays the source order.

Parameters

Stack parameters
Prop	Type	Default
`Direction`Layout direction.	`Responsive<Direction>`	`computed`
`Gap`Space between children, in spacing steps (0 to 16).	`Responsive<int>`
`Align`Cross-axis alignment.	`Responsive<Align>`	`computed`
`Justify`Main-axis distribution.	`Responsive<Justify>`	`computed`
`Wrap`Whether children wrap onto new lines: <Row Wrap>.	`bool`	`false`
`Inline`Renders as inline-flex so the container sits in a line of text.	`bool`	`false`
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"div"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API