Quickstart 4: Build a List Section with Section Slots
Iterate a Modular Block (or multi-Reference) field. Let each Template drop different content per block-type via a Section Slot. Optionally expose props on the wrapper.
Time: ~15 minutes. Prereq: Quickstart 3: Build a Simple Section. Next: Create a Template.
Watch the walkthrough (5:31): it starts by building three cards the hard way, shows why that breaks, then replaces them with a Repeater and adds Condition Blocks per block-type. See all six videos.
Later in the flow, switch the left panel to the Layers tab to see the composition tree (the Repeater, then its Condition Blocks, then the Section Slots inside them, visible in order):
What you'll have at the end
- A sections_list List Section that iterates blog_post.sections (a Modular Block with two block-types: hero_block, feature_block).
- Inside each block-type's rendering path: a Section Slot each Template can fill with whatever component fits that Template's design.
- Two Templates using the same List Section, dropping different components per block-type per instance.
Prerequisites
- [ ] Quickstart 3 done. You know how to create a Section, link a schema, save.
- [ ] A blog_post CT with a sections Modular Block field. Two allowed block-types: hero_block (fields: headline, subhead) and feature_block (fields: title, description).
- [ ] Registered components for the block-types: <Hero> (from Quickstart 3) and <FeatureBox>. Register <FeatureBox> the same way as Hero if you haven't.
The three primitives you'll compose
Repeater: iterates the N items in the field. Bound to sections, returns one iteration per Modular Block item.
Condition Block (CB): inside the Repeater, branches based on which block-type the item is. CB(hero_block) renders only when the item is a hero_block. CB(feature_block) renders only when it's a feature_block.
Section Slot: inside a CB, an empty drop-zone the Template author fills per instance. NOT a Component Slot (which is filled at Section time). This one is filled later.
Together: Repeater → CB per block-type → Section Slot for each CB.
Full detail on each: Smart Containers chapter.
Steps (in Studio's canvas)
1. Create the Section, link to the Modular Block
- New Section. Set Title: to Sections List and Composable UID: to sections_list.
- Link to schema: the blog_post CT, then Selected field: sections (the Modular Block).
Save.
2. Drop a Repeater at the root
In the left palette, open Smart Containers, then drag Repeater onto the empty canvas.
Because the Section is linked to sections, Studio auto-binds the Repeater's items prop to the Modular Block's items. You'll see one placeholder iteration on the canvas.
Select the Repeater via the Layers tab (not by clicking the canvas: the Repeater renders no DOM of its own, so canvas clicks miss it). In the right panel, toggle Preview Mode ON, which re-renders the canvas showing every actual item in the connected entry:
3. Add a Condition Block per block-type
Inside the Repeater, drop a Condition Block. Select it (via the Layers tab). The right panel Properties shows a When clause. Configure it to match the block-type you're targeting:
- Condition type: Modular Block.
- Block type value: hero_block.
That CB now renders only for hero_block items. Repeat for feature_block: drop a second CB inside the Repeater, condition on feature_block.
4. Add a Section Slot inside each Condition Block
Inside CB(hero_block), drop a Section Slot from the palette. Give it a label: "Hero content".
Inside CB(feature_block), drop another Section Slot and label it "Feature content".
Each Section Slot is an empty region the Template author will fill later. The Drop placeholder label input on the right panel controls the text they see.
5. (Optional) Expose props on the wrapper
Say the wrapper needs a heading above the iteration. Drop a <SectionHeader title="…" /> above the Repeater. Save, then in the Expose Props modal, expose SectionHeader.title as "List heading". Now each Template can name the list ("Latest posts", "Featured stories") per instance.
Save the whole Section.
6. Drop the Section on two Templates + fill the Slots
Open Template A (from Quickstart 5, or create one now):
- Drop sections_list. Canvas shows the iteration with two empty drop-zones per item (one for hero_block, one for feature_block).
- Into CB(hero_block)'s Slot, drop <Hero>. Auto-binds to the hero_block's fields.
- Into CB(feature_block)'s Slot, drop <FeatureBox>.
- Right panel shows "List heading". Type "Latest posts". Save.
Open Template B:
- Same Section, different fills. Drop <PremiumHero> (a different registered component) in CB(hero_block)'s Slot. Drop <CompactFeature> in CB(feature_block)'s Slot.
- Type "Featured stories" in the exposed list-heading prop. Save.
Same List Section. Two Templates. Different renders per block-type.
Reference variant
A multi-Reference field works the same shape:
- Link the Section to the reference field.
- Condition Block's discriminator becomes target CT instead of block-type: CB(target_ct = "article"), CB(target_ct = "podcast").
- Everything else (Repeater, Section Slots, Expose Props) identical.
Full detail: References.
Verify
- [ ] The Section's linked_schemas points to blog_post.sections.
- [ ] The Section's ui tree contains a Repeater holding two Condition Blocks, CB(hero_block) and CB(feature_block), each with a SectionSlot inside it.
- [ ] Preview Mode on the Repeater renders every item in the connected entry.
- [ ] Two Templates dropping the same Section render different components per block-type.
What happened
- List Section = Repeater at the root. That's the only difference from a Simple Section: one iterates, the other doesn't.
- Condition Block narrows the iteration to a specific block-type or target CT before child bindings resolve. Every non-trivial iteration needs one CB per allowed type.
- Section Slot is the Template-authored drop-zone. It's what makes the same Section reusable across Templates with different content per instance.
- Expose Props works on the wrapper the same way it did in Quickstart 3.
Next
Quickstart 5: Create a Template + URL (~5 min).