What is a Section?

A section is a reusable part of a page, with its CMS binding already baked in. A hero, a feature grid, a testimonial strip, a CTA banner, a footer. It is assembled from atomic components you have already registered, bound to specific CMS fields, and packaged as one unit an author can drop onto any template.

Think of the parts of a page you rebuild constantly. Every site has a hero, some content blocks, a CTA, a footer. In a hand-coded site each is a JSX snippet copy-pasted between pages. In Studio each is a section: authored once, bound once, reused by drag and drop.

Do It With a Skill

understand-sections is this page as a conversation, if you would rather ask than read. build-section builds one once the concept is clear.

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

A Section on a Real Page

A marketing page, top to bottom:

A hero with a headline, subheading, background image and a CTA button
A feature grid of three cards, each an icon, title and body
A testimonial strip with a quote, author and avatar
A CTA banner with a headline and a button
A footer with links and a logo

Each of those five chunks is a section.

A Section is Composed, Not Written

A section is not a new React component you author. It is a composition plus a binding map wrapped around components already in your repo:

Section "Hero"              = <Hero/>
                            + binding to CT hero_section
                            + entry "Homepage Hero"

Section "ProductHighlight"  = <Hero/> + 3x <FeatureCard/> + <CTABlock/>
                            + bindings to the product_highlight CT
                            + an entry source for each

One component or several, it is the same kind of object. The React code never changes. What the section carries is the arrangement and the binding map, and both live in Studio as data.

What a Section Adds to a Registered Component

A registered <Hero/> with props headline, subhead and imageUrl becomes a section once three things are attached:

Layer	What it carries
Binding map	Which CMS field drives which prop, in which iteration scope: props.headline from hero_section.title, props.subhead from hero_section.subtitle
Composition	For a multi-component section, the order and nesting, plus any section slots left open for substitution
Preview against real data	The unit renders on the canvas against the entry the binding points at. Storybook shows one component with mock props; a section shows the composed shape with real content

When Something Qualifies as a Section

The rule is amortization: a section pays off when the same bindings would otherwise be rewired every time the component is dropped. The binding map is saved once and reuse is free afterwards.

Two shapes amortize:

Two or more separate prop bindings. A hero with title and cover.url. A card with image, title, summary and link. Without a section, every template drop costs the author N clicks in the right panel.
One prop bound to a structural shape. A Modular Block list, a Reference array, a Group field, a Global Field. The outer bind is one click, but rendering walks several sub-fields per iteration, and that work amortizes the same way.

One case does not qualify: a single component bound to a single scalar field. Heading bound to entry.title, Image bound to entry.cover.url. One bind, one drop, nothing repeated. Studio’s picker rejects scalar fields at the Connect a Schema step for exactly this reason. Use those components inline instead.

The diagnostic is one question: if I drop this on the next template, how many bindings does the author wire by hand? Two or more, make it a section. One, leave it a registered component.

Where Sections Sit Between Components and Templates

Atomic components are the React components you register: Button, Card, Hero, FeatureCard.
Sections combine those components with a CMS binding to produce a reusable part of a page.
Templates stack sections into a whole page shape.

A template is essentially an ordered stack of sections. The three-layer model walks the same split from the design side, starting at a Figma file.

What a Section is Not

Misconception	Reality
A section is a new React component I have to write	No. Sections are composed from components you already registered. No new code per section
A section is the same as a template	No. A section is a part of a page. A template is the whole page, made of sections
A section locks me to one piece of content	No. The binding map references a field, not an entry. Any entry sharing the content type’s shape drives the same section
Sections are only for marketing teams	No. Engineering builds the atoms once; everyone composes sections afterwards

Where You Will and Will Not See Them

In Studio: the Sections tab lists every section in the project. The Sections category in the palette is what you drag from inside a template canvas. Sections can also nest inside one another through section slots.

In your codebase: you will not. Sections live in Studio as data, referencing your registered components by their componentType UID. The React components are in your repo; the sections that compose them are not.

Sections: the chapter, including the Sections tab and the section canvas
Bind a section to CMS data: linked schema and auto-binding, in full
Expose section props: let a template override a value per instance
Section slots: leave a child substitutable per template
build-section: have an LLM create one with you