How to set up the expandable cards section

The expandable cards section displays media with text and allows users to expand cards for more details or interactive content.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.

Expandable cards

Cards height on desktop: Adjust the height of the cards when displayed on desktop.

Open button link in new window: Choose whether the link should open in a new tab or the same tab.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels

Styles

Image heading size: Select the size of the heading inside the expandable card. Options: Extra Small, Small, Medium, Large, Extra Large.

Image description size: Select the size of the description inside the expandable card. Options: Extra Small, Small, Medium, Large, Extra Large.

Font scale: Adjust the overall text scaling for the expandable card, affecting the heading, description, and other text elements.

Section background color: Choose the background color for the section.

Image content text color: Choose the color of the text inside the expandable cards.

Image content background color: Select the background color for the expandable cards.

Image content background opacity: Adjust the transparency of the background color for the expandable cards.

Button border radius: Adjust the roundness of the button corners.

Expandable card

Image: Select or upload an image for the expandable card. You can also browse free images via the “Explore free images” link.

Heading: Set the title for the expandable card.

Description: Add a description for the expandable card.

Button label: Set the text that appears on the button.

Button link: Set the destination for the button (e.g., page, collection, product, external link, etc.).

Button text color: Choose the color of the text inside the button.

Button background color: Select the background color of the button.