Skip to main content

​
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>

​
Props

​
gap
string | number
default:"md"
Space between children. Can be a preset (xs, sm, md, lg, xl, 2xl) or a number.
​
align
string
default:"stretch"
Horizontal alignment of children: flex-start, center, flex-end, stretch.
​
justify
string
default:"flex-start"
Vertical alignment of children: flex-start, center, flex-end, space-between, space-around, space-evenly.
​
padding
string | number | object
Padding around the column content. Can be a preset, number, or object { x, y, top, ... }.
​
flex
number | string
Flex grow factor. Use "auto" or a number.

​
Examples

​
Card Layout

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

​
Form Stack

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