A Section is the editor's frame for a stretch of content: it sets the width of the stretch, lays a surface from the Skin behind it and, since 31 October 2026, a background image. Everything inside stays ordinary content; the Section only shapes the ground it stands on. Add it in the editor as the paragraph type Section, then add the content paragraphs inside it.
Three Fields
Layout Width: contained (inside the page column), wide (edge to edge with an inner cap) or full (edge to edge). Background Surface: one of the muted surfaces of the Skin; colour and scrim follow the Skin, so a new Skin restyles every Section. Background Image: optional picture from the media library; it fills the Section edge to edge, centred, and a chosen surface lays its scrim over it so the text stays readable. The live example below uses a surface and an image together.
How to Use
<!-- The Section is a paragraph type, not markup: add it in the editor and fill its content paragraphs. -->
Paragraph type: Section
Layout Width: contained | wide | full
Background Surface: (none) | muted-1 … muted-15 (Skin)
Background Image: (none) | media library imageRendered Structure
<div class="paragraph paragraph--type--section paragraph--has-surface paragraph--surface-muted-2 paragraph--has-image">
<span class="paragraph__surface-base" aria-hidden="true"></span>
<span class="paragraph__surface-image" style="--paragraph-bg-image: url('…')" aria-hidden="true"></span>
<span class="paragraph__surface-scrim" aria-hidden="true"></span>
<div class="paragraph__content">…</div>
</div>Card Stack (Content)
<!-- Reveal Effect: Card Stack - three to five Basic Cards, pasted into the Section's text paragraph -->
<div class="basic-grid basic-grid-gap-md">
<div class="basic-card surface-primary-light">
<div class="basic-card-content">
<h3 class="basic-card-title">Card 1</h3>
<p>Stops with its top edge just below the rim.</p>
</div>
</div>
<div class="basic-card surface-third">
<div class="basic-card-content">
<h3 class="basic-card-title">Card 2</h3>
<p>Lays one step lower over it, with a visible gap to the edge of card 1.</p>
</div>
</div>
<div class="basic-card surface-secondary-light">
<div class="basic-card-content">
<h3 class="basic-card-title">Card 3</h3>
<p>All cards are the same size; only the offset makes the stack.</p>
</div>
</div>
<div class="basic-card surface-primary-light">
<div class="basic-card-content">
<h3 class="basic-card-title">Card 4</h3>
<p>Four edges visible. It scales.</p>
</div>
</div>
<div class="basic-card surface-third">
<div class="basic-card-content">
<h3 class="basic-card-title">Card 5</h3>
<p>Five is a sensible upper limit, the stack above gets tall otherwise.</p>
</div>
</div>
</div>Horizontal Scroll (Content)
<!-- Reveal Effect: Horizontal Scroll - one track, each card is one panel -->
<div class="section-reveal__track">
<div class="basic-card surface-primary-light">
<div class="basic-card-content">
<h3 class="basic-card-title">Step 1 · Analysis</h3>
<p>Where does the brand stand?</p>
</div>
</div>
<div class="basic-card surface-third">
<div class="basic-card-content">
<h3 class="basic-card-title">Step 2 · Positioning</h3>
<p>What should it stand for?</p>
</div>
</div>
<div class="basic-card surface-secondary-light">
<div class="basic-card-content">
<h3 class="basic-card-title">Step 3 · Identity</h3>
<p>How does it show that?</p>
</div>
</div>
<div class="basic-card surface-primary-light">
<div class="basic-card-content">
<h3 class="basic-card-title">Step 4 · Activation</h3>
<p>How does it reach the outside?</p>
</div>
</div>
</div>Scrollytelling (Content)
<!-- Reveal Effect: Scrollytelling - heading stays, steps replace each other -->
<h2 class="text-align-center">How We Work</h2>
<div class="section-reveal__steps">
<p class="section-reveal__step text-align-center">1 · Listen: we understand the market, the customers and the goal.</p>
<p class="section-reveal__step text-align-center">2 · Decide: we fix the position, in writing.</p>
<p class="section-reveal__step text-align-center">3 · Deliver: design, copy, website, all of a piece.</p>
</div>Marquee (Content)
<!-- Reveal Effect: Marquee - keywords separated by dots, repeat them twice -->
<div class="section-reveal__band">
<span>Strategy</span>
<span>·</span>
<span>Design</span>
<span>·</span>
<span>Content</span>
<span>·</span>
<span>Web</span>
<span>·</span>
<span>Strategy</span>
<span>·</span>
<span>Design</span>
<span>·</span>
<span>Content</span>
<span>·</span>
<span>Web</span>
</div>Live Example
This Section is set to the wide width, the muted-2 surface and a background image from the media library. The surface scrim lies over the picture, so the text keeps its contrast. Everything you read here is a plain Text paragraph inside the Section.
Stacking Section
Stays at the top while the next section slides over it. Pure CSS, no script. Suits pages with three to five large coloured sections; here three in a row. Reveal Effect: Stacking Section
First Section
Stays put as soon as it hits the top.
Second Section
Slides over the first one.
Third Section
And over the second. Below it the page goes on as usual.
Sticky Entry
The counterpart: the new section arrives small and pale from below, grows to full size and stays at the top. Reveal Effect: Sticky Entry
Sticky Entry
This section starts small, arrives at full size and stays at the top.
Card Stack
The Basic Cards inside stack up with a small offset like a deck of cards. The cards come from the content: paste the code from the box below, three to five cards. Reveal Effect: Card Stack
Card 1
Stops with its top edge just below the rim.
Card 2
Lays one step lower over it, with a visible gap to the edge of card 1.
Card 3
All cards are the same size; only the offset makes the stack.
Card 4
Four edges visible. It scales.
Card 5
Five is a sensible upper limit, the stack above gets tall otherwise.
Wipe
The section is already in place but covered; scrolling in uncovers it from the bottom like a blind. Nothing moves. Reveal Effect: Wipe
Wipe
The scroll pulls the blind up; scrolling back pulls it down again.
Iris
Opens in a circle from the centre, like a camera iris. Striking, so at most once per page. Reveal Effect: Iris
Iris
One core message, revealed from the centre.
Diagonal Wipe
A diagonal cut travels from the top left across the section. Editorial, like a magazine layout. Reveal Effect: Diagonal Wipe
Diagonal Wipe
The diagonal runs from top left to bottom right.
Doors
The classic theatre curtain: two halves slide apart to the left and right and release the content. Reveal Effect: Doors
Doors
Curtain up. Good for a reveal: a new offer, a case study result.
Letterbox
Cinema bars: the section opens from the centre line up and down, like a widescreen frame. Best with a background image. Reveal Effect: Letterbox
Letterbox
A slit in the middle becomes the whole picture.
Parallax Background
The background image moves slower than the text, like looking through a window at a surface that stays behind. Needs a background image. Reveal Effect: Parallax Background
Parallax Background
The text runs, the picture stays behind.
Zoom-Through
The content starts slightly enlarged and transparent and lands while scrolling in. The background stays. Reveal Effect: Zoom-Through
Zoom-Through
The content comes forward from the depth and lands.
Dolly Zoom
The background image grows slowly while the text stands still. Needs a background image. For hero images and case study heads. Reveal Effect: Dolly Zoom
Dolly Zoom
Only the picture moves; the text stays readable.
Focus Pull
Like focusing a camera: the content starts blurred and becomes sharp. Blur is costly on weak devices, use sparingly. Reveal Effect: Focus Pull
Focus Pull
Blurred, then sharp. Works best on text and logos.
Window
The background image stands still in the browser window; the section is a window travelling across it. Replaces the fixed background that phones cannot do. Needs a background image. Reveal Effect: Window
Window
The picture stays, the frame travels over it.
Horizontal Scroll
The section stays and its panels travel sideways while you scroll down, a gallery without arrows. The panels come from the content: paste the track code from the box below. Reveal Effect: Horizontal Scroll
Step 1 · Analysis
Where does the brand stand?
Step 2 · Positioning
What should it stand for?
Step 3 · Identity
How does it show that?
Step 4 · Activation
How does it reach the outside?
Scrollytelling
The section and its heading stay; the steps replace each other one by one while you scroll. The steps come from the content: paste the code from the box below. Reveal Effect: Scrollytelling
How We Work
1 · Listen: we understand the market, the customers and the goal.
2 · Decide: we fix the position, in writing.
3 · Deliver: design, copy, website, all of a piece.
Marquee
A band of keywords that does not run by itself but is pushed by the scroll: scroll fast, run fast. The band comes from the content: paste the code from the box below. Reveal Effect: Marquee