> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Col

> Vertical flex container for laying out components

# 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

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

## Props

<ResponseField name="gap" type="string | number" default="md">
  Space between children. Can be a preset (`xs`, `sm`, `md`, `lg`, `xl`, `2xl`) or a number.
</ResponseField>

<ResponseField name="align" type="string" default="stretch">
  Horizontal alignment of children: `flex-start`, `center`, `flex-end`, `stretch`.
</ResponseField>

<ResponseField name="justify" type="string" default="flex-start">
  Vertical alignment of children: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.
</ResponseField>

<ResponseField name="padding" type="string | number | object">
  Padding around the column content. Can be a preset, number, or object `{ x, y, top, ... }`.
</ResponseField>

<ResponseField name="flex" type="number | string">
  Flex grow factor. Use `"auto"` or a number.
</ResponseField>

## Examples

### Card Layout

```jsx theme={null}
<Card>
  <Col gap="sm">
    <Text value="Title" weight="bold" />
    <Text value="Subtitle" color="secondary" />
  </Col>
</Card>
```

### Form Stack

```jsx theme={null}
<Col gap="lg">
  <Input label="Username" />
  <Input label="Password" type="password" />
  <Button label="Login" block />
</Col>
```