# Cols

> `Cols` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

Source: https://ui.jcsoftdev.com/docs/components/cols

`Cols` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { Cols } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/cols`.

## Usage

```tsx
<Cols>
  <>
          <Panel title="Agenda de hoy">12 citas, 3 por confirmar.</Panel>
          <Panel title="Barberos">Diego, Mateo y Camila en turno.</Panel>
        </>
</Cols>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"rail" \| "half" \| "calc"` |  | Column proportions. Omit for the base main + side split. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-cols--default)
- [Rail](/storybook/?path=/story/containers-cols--rail)
- [Half](/storybook/?path=/story/containers-cols--half)
- [Calc](/storybook/?path=/story/containers-cols--calc)
- [With Stack](/storybook/?path=/story/containers-cols--with-stack)
- [Narrow](/storybook/?path=/story/containers-cols--narrow)

## Source

`packages/ui/src/containers/cols/cols.tsx`