Docs / Content Layouts / Scrolling Content
A two-column reading layout where a sticky left rail of icon + meta information stays in view while the right column scrolls through cards (image + title + subtitle + description + bullets + button). Use it for product update logs, feature rollouts, roadmap sections, case study indexes, or any list of entries where a meta column anchors a richer content card.
The most-used controls live here so editors can rebuild the section's structural shape without scrolling: section heading visibility, alignment, icon and bullet toggles, card background, gap between entries, column layout, image height, and how many entries to load.
Show or hide the section heading area (badge, title, description) that sits above the scrolling entry list. Turn off when the section follows a stronger heading from the row above and you want the entries to read as a continuation.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area on mobile devices (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.
left Left-alignedcenter Centered (default)right Right-alignedShow or hide the icon next to each entry's title in the left (meta) column. Turn off when the left column should read as plain text only.
Enables card background styling on the right-side content cards (background color, border, shadow, padding). Turn off for a flat, borderless look where the image and text sit directly on the section background.
Show or hide the bullet point list inside each entry's card. Turn off if you only want the title + subtitle + description + image, and bullets feel like clutter.
Vertical spacing between each entry in the scrolling list. Larger gaps give each entry more breathing room and make the sticky left rail more obvious as it transitions between entries.
Left (meta) / Right (content) width distribution on desktop using a 12-column grid. The left column holds the icon, title, subtitle, and bullet list; the right column holds the image, description, and button.
3-9 3 / 9 (narrow meta, wide content)4-8 4 / 8 (default)equal 6 / 6 (equal split)8-4 8 / 4 (wide meta, narrow content)9-3 9 / 3 (very wide meta)Fixed height for every entry's image. All images render at this exact height with object-fit: cover for consistency, so mixed aspect ratios still align cleanly down the list.
Controls how entries are revealed when the list is long.
none None (Show All) - every entry renders immediatelyload_more Load More Button (default) - only the first N entries show; the rest reveal on clickConfigures the Load More button behavior. Contains four sub-fields:
The label rendered on the button.
How many entries are visible when the page first loads.
How many additional entries are revealed each time the button is clicked.
Which theme CTA style to apply to the Load More button. Colors are configured in Theme Settings > Buttons.
cta-primary Primary (default)cta-secondary Secondarycta-tertiary Tertiarycta-four Fourcta-five Fivecta-six SixEverything visitors actually read or look at: the section heading, the scroll-in animation, and the repeating list of entries (each with icon, title, subtitle, description, bullets, image, and optional button).
The badge + title + description block above the scrolling entry list. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
Entrance animation applied to the section heading and content as it scrolls into view.
none None (default)fade-up Fade Upfade-down Fade Downfade-left Fade from Leftfade-right Fade from Rightfade Fade Only (no slide)The repeating list of entries that scroll. Each entry produces one row in the layout (sticky meta on the left, content card on the right). Add, remove, and reorder entries with the HubSpot repeater controls. Each entry exposes the following sub-fields:
The icon rendered to the left of the entry's title in the meta column. Pulls from the FontAwesome 6.4.2 icon set bundled with the theme.
The primary label for the entry, rendered in the meta column next to the icon. Keep it short (one line) so it reads as a heading at a glance.
A short secondary line under the title (timestamp, release tag, category, etc.). Optional - leave empty to hide.
The longer-form copy for the entry, rendered inside the content card below the image. Supports paragraphs, links, and inline formatting.
Optional bullet list shown when the entry is active. Use it for feature checklists, sub-points, or quick scanning. The bullet dot uses the Bullet Dot Color set under Content Style.
The image rendered at the top of the content card. All images use object-fit: cover and the global Image Height set in Start Here, so different aspect ratios still align cleanly.
Tip: Use a unique filename when you replace this image; HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.
Show or hide a CTA button at the bottom of the entry's content card.
The label rendered inside the entry's CTA button.
Where the button links. Supports external URLs and internal HubSpot content pages. Includes the standard HubSpot "Open in new tab" and "No-follow" toggles.
Which theme CTA style to apply to this entry's button. Colors come from Theme Settings > Buttons.
cta-primary Primary (default)cta-secondary Secondarycta-tertiary Tertiarycta-four Fourcta-five Fivecta-six SixDeveloper hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #about) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: icon styling, card styling, content (bullet + image radius), badge, section dividers, and the row's background/width/spacing.
Controls for the icon container that sits next to each entry's title.
Background color of the icon container when the entry is not active.
Color of the icon glyph itself in the inactive state.
Background color of the icon container when its entry is the focused / active one in the scrolling list.
Icon glyph color when its entry is the active one.
Width and height of the square icon container. Bumps the icon up or down without changing the glyph size itself.
Corner radius of the icon container. 0% = square corners, 50% = perfect circle.
Controls for the right-side content card (background, border, shadow, padding).
Background fill color of the content card.
Rounded corners on the card. 12px matches the theme's default tile rounding.
Outer padding around the entire card (including the image). 0 lets the image bleed flush to the card edges; raise it for a framed look.
Padding around the text content area below the image (description, bullets, button).
Master toggle for the card border.
Color (and opacity) of the card border.
Thickness of the card border.
Master toggle for the card drop shadow.
Color and opacity of the card shadow. Stay under 15% opacity for tasteful shadow; above that the cards start to feel heavy.
Styling for bullet dots inside entries and the radius applied to entry images.
Color of the custom bullet dot rendered next to each item in an entry's bullet list.
Rounded corners on each entry's image. 0 keeps the image flush to the card edges (which is usually what you want when card padding is 0).
Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Colors and styling are configured in Theme Settings > Badge.
Picks the badge tier. Colors are configured in Theme Settings > Badge.
badge-primary Primary (default)badge-secondary Secondarybadge-three Threebadge-four Fourbadge-five Fivebadge-six SixDecorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Decorative shape rendered at the top of the section. The shape renders as an inline SVG colored with Top Divider Color.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleFill color of the top divider shape. Set this to match the background color of the section above so the divider visually blends.
Height of the top divider shape. Larger values give the divider more visual weight.
Height of the angled top divider. Only used by the tilt divider type.
Mirrors the top divider shape horizontally.
Decorative shape rendered at the bottom of the section. Same 9 options as the top divider.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleFill color of the bottom divider shape. Set this to match the background color of the section below.
Height of the bottom divider shape.
Height of the angled bottom divider. Only used by the tilt divider type.
Mirrors the bottom divider shape horizontally.
Places the bottom divider behind the content so buttons and links overlapping the divider remain clickable.
The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (5-point select), Enable Overlay toggle, Overlay Color, Enable Blur toggle, Overlay Blur amountNote: The "Background" group is labeled "Image, Video, Color, Etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.
Standard and Slim widths are set in Theme Settings > Layout.
standard Standard (uses theme's standard container width)slim Slim (narrower variant, also from Theme Settings)custom Custom - reveals a Custom Width number input (600-1920px, step 10, default 1200)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:
desktop 100px top, 100px bottom, 0 left, 0 righttablet 60px top, 60px bottom, 0 left, 0 rightmobile 40px top, 40px bottom, 15px left, 15px right