<%= item.title %>
<%- item.content %>
<%= item.title %>
<%- render(item.sections) %> ``` Each item flows through its own block template with the item's data exposed as `item`. The page template doesn't need to know — or branch on — what types of blocks are present; the dispatch is implicit. An optional separator can be inserted between rendered items: ```ejs <%- render(item.sections, '') %> ``` → [Block Models](/model/blocks) → [Template Context and Data Access](/builder/code/context) --- ## Stacks in the Editor In the editor, a stack field is presented as a vertical list of block instances. Editors: - **Add** a new block by picking a block model from the full block library. - **Reorder** items by dragging them up or down. - **Hide** an item — the data is kept, but the item is excluded from rendering and from API responses. - **Remove** an item entirely. - **Edit** any item's fields inline. - **Title** an item with an editor-only label so the collapsed list is scannable ("Spring Campaign Hero", "Free Trial CTA"). These titles are UI-only and don't appear in the published output or in API responses. The editing surface is the same regardless of which block models are present — adding a new block model to your site makes it instantly available in every stack on every model. → [Content Editing](/content) --- ## Stacks via the Content API In the content API, stacks come through as the same array shape stored on the record. Each item carries the `_block` marker and the block's resolved field data: ```typescript const page = client.getPage('/about'); // page.sections → [ // { _block: 'hero', heading: 'Care that feels personal', ... }, // { _block: 'cta', label: 'Book a visit', link: '/contact' }, // { _block: 'quote', body: '...', attribution: 'M. Castillo' } // ] ``` Your frontend dispatches on `_block` to pick the right component: ```tsx const components = { hero: HeroSection, cta: CTABanner, quote: PullQuote, }; function Sections({ sections }) { return sections.map((item, i) => { const Component = components[item._block]; return Component ?
<%= item.title %>
<%- item.body %>
<%- render(item.sections) %>
<%- img(item.hero, '800x400') %>
<% if (item.featured) { %>
Featured
<% } %>
<% const posts = getPages('/blog'); %>
<% posts.forEach(post => { %>
<%= post.title %>
<% }); %>
```
---
## The `item` Variable
When a template renders, the current record's data is available as `item`. This is the primary way you access content in any template.
**In a page template**, `item` is the page record. It contains all the fields defined in the page model, plus system properties:
- `item._path` — The full path of the page (e.g., `/about`, `/blog/hello-world`)
- `item._slug` — The slug portion of the path, present on collection pages (e.g., `hello-world`)
- `item._meta.updated_at` — Timestamp of the last update
```ejs
<%= item.heading %>
<%= item.subheading %>
<%= item.cta_label %>') %> <%- render(item.author) %> ``` When you call `render(item.sections)`, the builder iterates over every block instance in the `sections` field, looks up each block model's EJS template, renders it with the block's field data as `item`, and concatenates the HTML output. The page template doesn't need to know what types of blocks are present or how to render them. ### `src(obj, attr)` Generates an optimized image URL with resizing parameters. Use this when you need just the URL — for `background-image` styles, custom `