# ContentWrapper

> Arranges content in one column or two, with an optional sticky second column.

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

Arranges content in one column or two, with an optional sticky second column.

Last updated October 15, 2026

```astro
<ContentWrapper variant="columns">
<div>
  <h3 class="mb-2 text-sm font-semibold text-neutral">Primary</h3>
  <p class="text-sm text-neutral-faded">Main column content.</p>
</div>
<div slot="secondary">
  <h3 class="mb-2 text-sm font-semibold text-neutral">Secondary</h3>
  <p class="text-sm text-neutral-faded">Second column content.</p>
</div>
</ContentWrapper>
```

## Add

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

No Apogee dependencies.

## Usage

```astro
---
import ContentWrapper from '@/components/apogee/ContentWrapper/ContentWrapper.astro'
---
<ContentWrapper>
  <p>Page content, one column.</p>
</ContentWrapper>
```

## Anatomy

-   Default slot — the first (primary) column; always rendered.
-   `secondary` slot — the second column; only rendered when `variant` is `columns` or `sticky`.

## API

`@composable` — exposed to Content Editors in AVA. Any other attribute passes through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'stack' \| 'columns' \| 'sticky'` | `'stack'` | `stack`: one column. `columns`: two even columns from `md` up. `sticky`: two columns; the second sticks as the first scrolls. |
| `reverse` | `boolean` | `false` | Shows the second column first (from `md` up). No effect on `stack`. |
| `gap` | `4 \| 6 \| 8 \| 10 \| 12` | `8` | Gap between columns (Tailwind spacing scale). |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

Every `variant`:

```astro
<ContentWrapper variant="stack">
<div>First</div>
<div>Second</div>
</ContentWrapper>
```

```astro
<ContentWrapper variant="columns">
<div>Primary column</div>
<div slot="secondary">Secondary column</div>
</ContentWrapper>
```

```astro
<ContentWrapper variant="sticky">
<div>Scrolls</div>
<div slot="secondary">Stays put (md and up)</div>
</ContentWrapper>
```

`reverse` flips which column shows first (visually, from `md` up); `gap` accepts `4 | 6 | 8 | 10 | 12` — the default (`8`) is used above, tighten or loosen by passing another value:

```astro
<ContentWrapper variant="columns" reverse gap={4}>
<div>Shows second on desktop</div>
<div slot="secondary">Shows first on desktop</div>
</ContentWrapper>
```

## States

No interactive states — a plain layout container.

## Examples

A sidebar article layout: sticky secondary column, tight gap.

```astro
<ContentWrapper variant="sticky" gap={6}>
  <article>…</article>
  <aside slot="secondary">Table of contents, related links…</aside>
</ContentWrapper>
```

## Accessibility

Native semantics — no ARIA role, no focus management. DOM order is always default slot first, `secondary` slot second; `reverse` only changes the _visual_ order (`md:order-2` / `md:order-1`), so tab and reading order follow the DOM, not the visual layout.

## Tokens

No CSS custom properties — spacing uses Tailwind’s fixed scale (`gap-4`…`gap-12`), not a themed token.

## Do / Don’t

Layout primitive — exempt from Do/Don’t guidance (no misuse surface).

## Content

Layout primitive — exempt from content guidance (no text of its own).

## Related

[

ContainerCenters content at a max width with fluid side gutters.

](https://apogee.avaui.dev/docs/container)[

ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.

](https://apogee.avaui.dev/docs/prose)[

SectionA full-width band with vertical rhythm and an optional Container, used to lay out page content.

](https://apogee.avaui.dev/docs/section)