← All playbooks · Raw API

pages

# Pages — SE Studio

## When to use

Read `cms-edit://customer/routing` for URL rules. Read `cms-edit://customer/components-index` and `cms-edit://customer/collections-index` for valid types.

Use this playbook when creating or cloning **marketing pages** (not articles). SE Studio pages use the **General Page** template unless noted.

## Templates

```bash
cms-edit list --type template
```

| Template label | Use for |
|----------------|---------|
| **General Page** | All marketing pages — home, about, services, landing pages |
| **404** | Not-found page only |
| **Article Template** | Articles only — do not use for marketing pages |
| **Article Type Index Page \| Template** | Unused (`enableArticleTypeIndex` is false) |

Inspect template fields with `peek --template-label "General Page"`. **General Page** supplies menu, footer, and structured data only — no `preContent` / `postContent`. All page body blocks go in `topContent` and `content`.

## Reference pages

Clone structure from these canonical examples:

| Slug | CMS label | Notes |
|------|-----------|-------|
| `/index` | Home Page | `Right aligned paragraph` intro + `Article browser images` case-study grid |
| `/about` | About Page | Intro → `Process list` (Listen/Cultivate/Guide/Partner) → `Team grid` → `Two column rich text` (clients) → `Text and carousel` (studio photos) |
| `/services` | Services Page | Intro → grouped `Process list` collections (Design / Digital / Technology / Materials) each with `Generic` child blocks |
| `/demo-landing` | Meridian test page | Simpler landing-page pattern for campaigns |

Use `task-clone-page` when the new page should mirror an existing layout.

Peek before cloning:

```bash
cms-edit peek --page-slug /about
cms-edit peek --page-slug /services
```

## Page regions

| Region | Typical content |
|--------|-----------------|
| `topContent` | Page intro — usually one `Right aligned paragraph` (H1 + lead copy) |
| `content` | Main sections — collections and/or standalone components |
| `template` | Always **General Page** (`7xO3uL3ufl4Yxhn7Lh0Hb3`) for marketing pages |

Homepage CMS slug is `index` (public URL `/`). Open with `--page-slug /` or `--page-slug /index`.

## Document section → component mapping

Map Google Doc / brief sections to registered blocks on this site:

| Doc section | Component / collection | Notes |
|-------------|------------------------|-------|
| Page intro (H1 + lead paragraph) | `Right aligned paragraph` | Place in `topContent`; first block gets the page H1 |
| Hero with image + CTA | `Generic` | Full-width stack: heading, visual, body, links |
| Multi-step process / methodology | `Process list` or `Horizontal process list` | Each step is a `Generic` child with heading + body |
| Team / leadership grid | `Team grid` | Items are **Person** entries (not pages) |
| Client list (two columns) | `Two column rich text` | Rich-text links to client sites |
| Case-study / work grid | `Article browser images` or `Article browser details` | Links to existing **article** entries; use `Article browser details (unindexed)` for internal-only picks |
| Photo / visual carousel | `Text and carousel` or `Visuals` | Studio photography, mood boards |
| Side-by-side image + copy blocks | `Separated visuals` | Alternating layout |
| Pull quote | `Centered quote`, `Wide quote`, or `Right aligned quote` | Pick based on layout width |
| Long page jump-nav | `Section anchors` | One per page, after hero |
| Left-aligned body section | `Left aligned paragraph` | Simpler text block without hero visual |
| Embedded iframe (maps, forms, widgets) | `iframe` external component | Prefer HubSpot forms via site patterns where applicable |

When no specialised block fits, use **Generic** — it stacks icon, headings, visual, body, and links in one column.

## Brand voice

Read `cms-edit://customer/brand` and `.site-context.json` terminology. Write as **SE Studio** (not "Something Else") in customer-facing copy. Tone: confident, warm, partnership-led; British English spelling is fine.

## Creating pages

1. Read `cms-edit://customer/tasks-index` → `task-create-page` or `task-create-from-document`
2. `cms-edit index sync` if the catalog may be stale
3. Pick **General Page** template; build `create from-json` payload
4. Set `slug` without leading slash (e.g. `about`, `services`, `new-landing`)
5. Always `create from-json --json '{…}' --dry-run --strict` before saving (or `--json-base64` for large payloads)
6. Set featured image (reuse-first via `task-media-reuse-and-upload`)
7. Set component `cmsLabel` after each block's `heading`
8. Agent test pages: `indexed: false`, no `hidden` flag

## After save — preview

```
cms-edit preview urls <slug>
```

Open **site live preview** or **staging** in a browser for drafts. Production URL shows published content only.

## Component gaps

Flag for engineering (use **Generic** as fallback meanwhile):

- Dedicated FAQ accordion component
- Logo strip / client marquee (today: `Two column rich text` links or `Article browser images`)
- HubSpot form embed component (may need `iframe` external)

## Publish handoff

`save` creates drafts only — publish in Contentful UI when ready.