---
title: "Record layout"
description: "A record’s page body: the main column, and an aside with its properties that stays in view as the page scrolls. Below xl the aside folds into a disclosure above the main column."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Record layout

## Campaign

Narrow the window below 1280px: the settings fold into “Campaign details”.

```tsx
import { PencilSimpleIcon } from '@phosphor-icons/react';
import { ButtonLink, Card, CardAction, CardContent, CardHeader, CardTitle, Link, Property, PropertyList, RecordLayout } from '@arbol-ai/ui';

<RecordLayout
  aside={
    <Card className="gap-4 py-5">
      <CardHeader className="px-5">
        <CardTitle level={2}>Settings</CardTitle>
        <CardAction>
          <ButtonLink href="#/record-layout" size="sm" variant="ghost">
            <PencilSimpleIcon aria-hidden /> Edit
          </ButtonLink>
        </CardAction>
      </CardHeader>
      <CardContent className="px-5">
        <PropertyList>
          <Property label="Agent">
            <Link href="#/record-layout">Front desk</Link>
          </Property>
          <Property label="Line">+57 601 555 0101</Property>
          <Property label="Contact hours">Weekdays, 8:00 to 18:00</Property>
          <Property label="Retries">Two, an hour apart</Property>
        </PropertyList>
      </CardContent>
    </Card>
  }
  asideLabel="Campaign details"
>
  <p className="text-muted-foreground rounded-card border p-6 text-sm">
    812 reached · 164 booked · 66% answered
  </p>
  <p className="text-muted-foreground rounded-card border p-6 text-sm">
    The recipients table goes here.
  </p>
</RecordLayout>
```

## Source

The examples above are [`src/blocks/record-layout/record-layout.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/record-layout/record-layout.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/record-layout/index.mdx