# Section

Page-section building block: header (title + description + optional action), spacing rhythm, and footer slot. Pairs with `Card`, `List`, or `Table` for the surface; `Section` only handles labeling and rhythm so layouts stay uniform.

[View examples](https://marsam.rahhal.app/components/section) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/section`

**Category:** `surfaces`

## Anatomy

| part | role |
| --- | --- |
| Section | outer `<section>` flex column |
| SectionHeader | title row with optional `action` slot |
| SectionTitle | h2 — short label |
| SectionDescription | muted sub-label |
| SectionContent | main content (no surface) |
| SectionFooter | small print / metadata row |

## Spacing

The `spacing` prop controls vertical gap between header / content / footer:

| spacing | gap |
| --- | --- |
| compact | 0.5rem / 8px |
| default | 0.75rem / 12px |
| spacious | 1.25rem / 20px |