---
title: "<Section>"
description: "A padded layout container that groups blocks with a background."
url: https://www.unitpost.com/components/section
section: Components
updated: 2026-07-14
---
# <Section>

## <Section>

> A padded layout container that groups blocks with a background.

Use a Section to band content together — a hero, a card, a footer. It can hold any leaf block and can be nested inside another Section.

```tsx
<Section padding-x={24} padding-y={24}>
  <Text>Grouped content</Text>
</Section>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `background-color` | color | — | Fill color behind the section. |
| `padding-x` | number | 24 | Horizontal inner padding (px). |
| `padding-y` | number | 24 | 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

- [<Row>](https://www.unitpost.com/components/row): A multi-column container — holds <Column> children side by side.
- [<Column>](https://www.unitpost.com/components/column): A vertical slice of a Row. Only valid inside <Row>.
- [<Heading>](https://www.unitpost.com/components/heading): A title (H1–H4). Inner text supports {{variables}}.