Col

The Col component is a flex container that arranges its children vertically. It’s the primary tool for building vertical stacks and columns.

Usage

<Col gap="md">
  <Title level={3} value="Section Title" />
  <Text value="Some description text." />
</Col>

string | number

default:"md"

Space between children. Can be a preset (xs, sm, md, lg, xl, 2xl) or a number.

string

default:"stretch"

Horizontal alignment of children: flex-start, center, flex-end, stretch.

string

default:"flex-start"

Vertical alignment of children: flex-start, center, flex-end, space-between, space-around, space-evenly.

string | number | object

Padding around the column content. Can be a preset, number, or object { x, y, top, ... }.

number | string

Flex grow factor. Use "auto" or a number.

<Card>
  <Col gap="sm">
    <Text value="Title" weight="bold" />
    <Text value="Subtitle" color="secondary" />
  </Col>
</Card>

<Col gap="lg">
  <Input label="Username" />
  <Input label="Password" type="password" />
  <Button label="Login" block />
</Col>