# Content

> A text block beside media, or long-form prose.

URL: https://apogee.avaui.dev/docs/sections/content
Last updated: 2026-10-15

A text block beside media, or long-form prose.

Last updated October 15, 2026

```astro
<ContentSection eyebrow="About" heading="Why we built it" media={{ src, alt }} primaryAction={{ label: 'Our story', href: '#' }}>
<p>…</p>
</ContentSection>
```

## Add

```sh
npx @ava-ui/apogee add content
```

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `eyebrow`, `heading`, `description` | `string` | — | content | Optional header. |
| `primaryAction` | `{ label, href }` | — | content | Button under the body. |
| `media` | `{ src, alt, width?, height? }` | — | content | For `split`; or the `media` slot. |
| default slot |  |  | content | The body (paragraphs; `prose` styles any element). |
| `mediaFirst` | `boolean` | `false` | layout | Media on the start side. |
| `label` | `string` | English | content | Landmark name when there is no heading. |
| `layout` | `'split' \| 'prose'` | `'split'` | layout |  |
| `background`, `spacing`, `headingLevel`, `id` |  |  | layout | As on every section. |

## Layouts

```astro
<ContentSection layout="split" mediaFirst media={…}>…</ContentSection>
<ContentSection layout="prose" heading="Long form"><h3>…</h3><p>…</p><ul>…</ul></ContentSection>
```

## Accessibility

-   A labelled `section` when a heading is given; otherwise named “Content”.