---
title: "Page"
description: "The frame of every screen: a centered column, a header with the title, what the page is for and its actions, and the content below. Use DetailHeader for the page of one record."
---

> 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.

# Page

## List page

On a phone the actions move under the title; hideOnPhone drops a description that only repeats the title.

```tsx
import { PlusIcon } from '@phosphor-icons/react';
import { Button, PageActions, PageContainer, PageContent, PageDescription, PageHeader, PageTitle } from '@arbol-ai/ui';

<PageContainer className="px-0 md:px-0">
  <PageHeader>
    <div>
      <PageTitle>Campaigns</PageTitle>
      <PageDescription hideOnPhone>
        Outbound calls and WhatsApp messages your agents send for you.
      </PageDescription>
    </div>
    <PageActions>
      <Button variant="outline">Export</Button>
      <Button>
        <PlusIcon aria-hidden /> New campaign
      </Button>
    </PageActions>
  </PageHeader>
  <PageContent>
    <p className="text-muted-foreground rounded-card border p-6 text-sm">
      The campaigns list goes here.
    </p>
  </PageContent>
</PageContainer>
```

## Record page

The same rhythm as a list, so opening a record never shifts the title.

```tsx
import { PhoneIcon } from '@phosphor-icons/react';
import { Button, DetailHeader, DetailHeaderContent, DetailHeaderInfo, DetailHeaderMeta, PageActions, PageContainer, PageTitle } from '@arbol-ai/ui';

<PageContainer className="px-0 md:px-0">
  <DetailHeader>
    <DetailHeaderContent>
      <span
        aria-hidden
        className="bg-brand-tint text-brand-accent grid size-12 shrink-0 place-content-center rounded-full font-medium"
      >
        LG
      </span>
      <DetailHeaderInfo>
        <PageTitle>Laura Gómez</PageTitle>
        <DetailHeaderMeta>
          +57 300 555 0101 · laura.gomez@example.com · Contact since May 4
        </DetailHeaderMeta>
      </DetailHeaderInfo>
    </DetailHeaderContent>
    <PageActions>
      <Button variant="outline">Edit</Button>
      <Button>
        <PhoneIcon aria-hidden /> Call
      </Button>
    </PageActions>
  </DetailHeader>
</PageContainer>
```

## Source

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

Source: https://epidermis.getarbol.com/components/layout/page/index.mdx