Docs / Lists & FAQs / Feature Accordion
An expandable accordion paired with a sticky image panel that swaps in a new visual every time a different item opens. Reach for it when building feature walkthroughs, product tours, or "how it works" sections that need each step to land with its own supporting image.
The most-used controls for shaping the accordion: which item opens by default, whether the heading is visible, the heading alignment, the list-vs-card layout, and the heading width.
Which accordion item is open when the page loads. Pick 0 (None) for a fully collapsed start, or 1-10 to open a specific item by its position. Opening item 1 by default gives visitors an immediate preview of what's inside without forcing a click.
0 None (all collapsed)1-10 Open the matching item by position (default 1)Controls whether the section heading area (badge h6, title h2, description p) appears above the accordion + image layout. Turn it off when the section sits under a stronger heading from the row above and the accordion should read as a continuation.
Horizontal alignment of the section heading on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area below 992px. Set independently from desktop so editors can keep the heading centered on phones while running left-aligned on desktop.
Switches the accordion between a clean list with horizontal dividers and a card layout where each item sits inside a styled box with hover and active states. List feels lighter and works well in dense pages; card pulls more attention and is better for short feature lists where each item should feel like a tile.
list List (Dividers) - defaultcard Card (Boxed)Caps the heading area's width on desktop so long titles wrap into balanced lines instead of stretching edge to edge. Range 0-1920px in 10px steps. Set to 0 to let the heading fill the full container. Mobile always uses full width.
The section heading plus the repeater of feature items. Each item has its own title, image, and rich-text description; the image is what swaps into the sticky image panel as different items open.
The badge + title + description block above the accordion. Default markup is <h6> (rendered as a pill badge when Badge Style is on), <h2> for the title, and <p> for the supporting line. Keep the h6 short (2-4 words) so the badge pill stays compact.
The list of accordion items. Each feature is a self-contained group with three sub-fields. Minimum 2 items, maximum 10. Editors can drag to reorder; reordering automatically remaps the Default Open Item index.
On desktop, opening an item swaps its feature_image into a sticky panel pinned alongside the accordion - so as a visitor scrolls or clicks through items, the image updates in place. On tablet and mobile the sticky panel collapses and each item's image renders inline inside the expanded body.
The trigger text shown in the accordion row (the part visitors click to expand). Keep it tight - one line reads best across all layout styles.
The image paired with this item. On desktop it swaps into the sticky image panel when the item opens; on tablet and mobile it renders inline inside the expanded item. Recommended size is 800×600 (landscape) so every image has consistent framing in the panel.
Tip: Upload replacement images with a unique filename. HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.
The body content shown inside the expanded item. Supports headings, paragraphs, lists, links, and CTA buttons (use the theme's cta-primary / cta-secondary / etc. classes on inline links to render styled buttons).
Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity. Respects prefers-reduced-motion: reduce - reduced-motion visitors see the section fully visible from the start.
none No animation (default)bottom Fade Up (from bottom)top Fade Down (from top)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Developer 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. #how-it-works) and JS targeting.
Additional classes (space-separated) appended to the section's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: accordion colors and dividers, the per-state card backgrounds, the badge tier, the sticky image panel's corners and shadow, decorative section dividers, and the row's background, width, and spacing.
Colors for the accordion text and dividers. Card-specific colors only appear when Layout Style is set to Card.
Color of inactive accordion titles - the items not currently open.
Color of the currently open item's title. Pair a dark active color with a lighter inactive color to make the open state obvious at a glance.
Color of the description text inside expanded items.
Color of the horizontal border between accordion items. Only used in list mode - card mode uses gaps instead of dividers.
Background color of cards in their default (inactive) state.
Background color of the card when it is open. The default uses a strong black so the active card stands clearly apart from inactive cards.
Title color while the card is open. Pair this with Card Active Background for sufficient contrast (white-on-black by default).
Description color while the card is open. The default 85% opacity softens the body text against the active background without losing legibility.
Background color shown when hovering an inactive card. Use a tint close to the default card background for a subtle hover feedback.
Roundness of card corners. 12px matches the theme's default tile rounding.
Vertical space between cards.
Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Badge color/border come from the chosen badge tier plus the theme's badge settings.
Picks the badge tier. Colors are configured in Theme Settings > Badge.
badge-primary Primarybadge-secondary Secondarybadge-three Threebadge-four Fourbadge-five Fivebadge-six SixAppearance of the sticky feature image panel.
Roundness of the image panel's corners. 0 for hard edges, 40 for very rounded.
Adds a soft drop shadow under the image panel.
Color + opacity of the image shadow. Stay under 15% opacity for tasteful shadow; above that the panel starts to feel heavy.
Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.
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 TriangleEach divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px, default 100), Flip Divider (mirror horizontally), and for the bottom divider: Divider Under Content (puts the divider behind content so buttons stay 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 (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount (0-20px)Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - Background Type only exposes none/color/gradient/image.
standard Standard (uses the theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Container Width input (600-1920px, 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