Scroll-driven sections

The theme ships two sections built for long-form stories that respond to scrolling. Each one pairs text with media in its own way.

Scrolling content is a full-bleed card: a field of images drifts behind a column of text as the page scrolls, and the section after it can slide over the top.
Vertical tabs stacks tabs on the left and swaps the panel on the right as the reader clicks through.

Each section is built from blocks. The text, images, and buttons inside come from the theme's shared content blocks, covered in Content blocks reference. This article documents what is unique to each section.

Scrolling content

A large rounded card that fills the page width. Behind it, your images tile across a tilted field that drifts as the reader scrolls. On top of it sits a column of editorial text. Most of the tiles are faded back so the text stays readable, and the ones nearest the text are the sharpest.

In the editor, Scrolling content appears in the Add section list under the Storytelling group.

Add it

Open the page you want in the theme editor.
Click Add section.
Choose Scrolling content.
Edit the text and swap the images in the section's blocks.

How it is built

The section holds a single block called Image rail, and everything else sits inside it:

Content: a content slot with the editorial column. It comes prefilled with an Eyebrow, an Accent text heading, a Rich text paragraph, and a Button. Edit, reorder, or remove these like any content blocks.
Nine Image blocks. These are the pictures the field is built from. Add, remove, or reorder them; there is no count setting.

The theme repeats your images across the field, so you do not need a picture per tile. Fewer images means more repetition, and the pattern reads best when neighboring tiles are not the same shot.

Image block

Each Image block has its own settings under Media.

Image: the picture for that tile. Left empty, the block shows a placeholder.
Mobile image: an alternate picture for small screens. It falls back to the desktop image when not set.

The Image block also uses the standard Padding controls. See Common section settings.

Image rail settings

Select the Image rail block to shape the card.

Corner radius: how rounded the card's corners are, from 0 to 100 pixels. Default is 40.
Height: the card's height as a percentage of its natural size, from 60 to 160.
Content width: how wide the text column runs, from 60 to 160 percent of its normal width. Default is 100. Raise it when the copy is long, lower it to leave more of the image field showing.
Image size: how large each tile is drawn, from 60 to 160 percent. Larger tiles mean fewer are visible at once.
Image position: puts the text column on the Left or the Right of the card.
Faded strips opacity: how visible the dimmed rows of tiles are, from 0 to 60 percent. Default is 26. Raise it for a busier card, lower it if the text is hard to read.
Inherit color scheme: off by default, so the card carries its own Color scheme separate from the section around it. Turn it on to follow the section.

Next section

The section can hand off to whatever comes after it.

Overlap with section below: on by default. The next section slides up over the card as the reader scrolls, so the two read as one movement. Turn it off to keep them as separate stacked sections. While it is on, the section's bottom padding and margin are ignored, because the next section's edge lands on the card.
Edge shadow: draws a soft shadow along the incoming edge so the next section reads as a separate layer. Available while Overlap with section below is on.

This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings.

Vertical tabs

A row of tabs down the left side with a content panel on the right. The tab list stays in view as the page moves through the panels. On small screens the panels reflow into an accordion. A section header (eyebrow, heading, subtitle) sits above the tab list.

In the editor, Vertical tabs appears in the Add section list under the Storytelling group.

Add it

Open the page in the theme editor.
Click Add section.
Find Vertical tabs under Storytelling and choose it.
It starts with a header, three tabs (Tab one, Tab two, Tab three), and a footer. Edit each, or add more tabs with Add block.

The section has two static content slots: a Header above the tab list, prefilled with an eyebrow, a heading, and a subtitle, and a Footer below it holding a closing note. Edit either like any other content, or empty it if you do not want it.

Tab block

Each Tab block is one entry in the tab list plus the panel it opens. The panel holds its own content: by default an Illustration and a Parallax photo pair block. Add anything else the theme offers to build a richer panel.

Tab

Title: the main label in the tab list.
Caption: a short line under the title.
Description: a longer supporting line that shows when the tab is open.

Layout

The panel is laid out like a group, so a tab carries the full Direction, Gap, and alignment controls, plus Use different layout on mobile to set a separate arrangement for phones. These are the shared layout controls: see Common section settings.

The tab also has a Color group with Inherit color scheme (on by default, so the panel uses the section's colors) and a Color scheme that appears when you turn inheritance off, plus the standard Padding controls for space inside the panel.

Settings

This section uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings.

Tips

These sections read their layout from the number and order of their blocks. Reorder or remove Image or Tab blocks to change the story instead of looking for a count setting.
If the header menu washes out over a dark section image, turn on Use dark header theme over this section in the section's Color group.