# Outer Layouts



Outer layouts wrap content in a reusable frame — a header, sidebar, footer, or any combination. Define the frame once, then reuse it across your application.

## Example

```tsx
import { ContentPlaceholder, Content } from "cx/ui";

const AppLayout = (
  <div class="border rounded overflow-hidden">
    <header class="bg-primary text-primary-foreground p-3">App Header</header>
    <div class="flex">
      <aside class="w-32 bg-muted p-3">
        <ContentPlaceholder name="sidebar" />
      </aside>
      <main class="flex-1 p-3">
        <ContentPlaceholder />
      </main>
    </div>
  </div>
);

export default (
  <div outerLayout={AppLayout}>
    <Content for="sidebar">
      <nav class="flex flex-col gap-2 text-sm">
        <a href="#">Dashboard</a>
        <a href="#">Settings</a>
        <a href="#">Profile</a>
      </nav>
    </Content>
    <div>
      <h2 class="text-lg font-semibold mb-2">Welcome</h2>
      <p class="text-sm text-muted-foreground">
        This is the main content area.
      </p>
    </div>
  </div>
);

```

## How It Works

1. **Define the layout** with [ContentPlaceholder](/layout/content-placeholder) components marking where content goes
2. **Apply the layout** to any element using the `outerLayout` attribute
3. **Fill the placeholders** using [Content](/layout/content) or `putInto`

## Nested Layouts

Layouts can contain other layouts. The content renders inside-out, allowing you to compose complex page structures from simple, reusable pieces.