---
title: "<Column>"
description: "A vertical slice of a Row. Only valid inside <Row>."
url: https://www.unitpost.com/components/column
section: Components
updated: 2026-07-14
---
# <Column>

## <Column>

> A vertical slice of a Row. Only valid inside <Row>.

Columns are table cells. `width` is a percentage of the row; the widths of the columns in a row should add up to ~100.

```tsx
<Column width={50}>
  <Text>Column content</Text>
</Column>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | number | 50 | Width as a percentage (1–100) of the parent Row. |
| `background-color` | color | — | Fill color behind the column. |
| `padding-x` | number | 8 | Horizontal inner padding (px). |
| `padding-y` | number | 0 | Vertical inner padding (px). |
| `border-width` | number | — | Border stroke width (px). 0/absent = no visible border. |
| `border-style` | enum | — | Border stroke style. |
| `border-color` | color | — | Border stroke color. |
| `border-radius` | number | — | Corner rounding (px). Independent of width — round a filled card without a stroke. |

## Related

- [<Heading>](https://www.unitpost.com/components/heading): A title (H1–H4). Inner text supports {{variables}}.
- [<Text>](https://www.unitpost.com/components/text): A paragraph of body copy. Supports inline marks and {{variables}}.
- [<Button>](https://www.unitpost.com/components/button): A call-to-action — a styled, padded link that looks like a button.