Column

Lays its children out in a column, always.

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

Lays children out vertically. For a direction that changes by screen size, use Stack.

Usage

razor

<Column Gap="1">
    <Heading Level="3">Pro plan</Heading>
    <TextBlock Color="Color.Muted">Billed yearly.</TextBlock>
</Column>

Gap

Use Gap for the space between children, and nest a column for a tighter group: the plan's name and description are 4px apart (Gap="1"), the groups 20px (Gap="5").

Preview Code

Preview

Pro

For growing teams, billed yearly.

$24 a month

Code

Spacing.razor

<Column Gap="5" Width="Length.Full" MaxWidth="20.Rem" Padding="5" Border="1" Radius="Radius.Lg">
    <Column Gap="1">
        <Heading Level="3">Pro</Heading>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">For growing teams, billed yearly.</TextBlock>
    </Column>
    <TextBlock Size="TextSize.Xl3" Weight="FontWeight.Bold">$24 a month</TextBlock>
    <Button>Upgrade to Pro</Button>
</Column>

Alignment

Children stretch to the column's width by default; use Align="Align.Start" to keep each at its own width, as the button here.

Preview Code

Preview

Two-factor authentication

Add a second step at sign-in with a code from an authenticator app.

Code

Alignment.razor

<Column Gap="3" Align="Align.Start" MaxWidth="28.Rem">
    <Heading Level="3">Two-factor authentication</Heading>
    <TextBlock Color="Color.Muted">Add a second step at sign-in with a code from an authenticator app.</TextBlock>
    <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.Shield">Set up</Button>
</Column>

Mode support

What works in each mode, Column
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).

Parameters

Column parameters
Prop	Type	Default
`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