How to set up the cards section

The cards section pairs images with text to showcase products, features, or content in a clean, structured layout.

Section settings

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

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

Heading alignment: Choose the alignment for the heading. This setting also applies to the subheading.

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: Control the space between this section and the sections above and below it in pixels.

Items per row: Set the number of cards displayed in a single row.

Columns gap: Adjust the spacing between columns. Options: Extra Small, Small, Medium, Large, Extra Large, Extra Extra Large.

Last row alignment: Choose whether cards should stack vertically on mobile devices for better responsiveness.

Stack on mobile: Choose whether cards should stack vertically on mobile devices for better responsiveness.

Cards

Card heading size: Select the font size for the card headings. Options: Extra Small, Small, Medium, Large, Extra Large.

Card description size: Select the font size for the card descriptions. Options: Extra Small, Small, Medium, Large, Extra Large.

Content alignment: Choose how the card content (heading, description, and button) should be aligned. Options: Left, Center, Right.

Font scale: Adjust the overall scaling of text in all cards, affecting both headings and descriptions proportionally.

Image ratio: Define the aspect ratio of card images. Options: Square (default), Landscape, Portrait.

Card border radius: Adjust the roundness of the card’s corners.

Button border radius: Adjust the roundness of the buttons inside the cards.

Styles

Section heading color: Set the color of the section heading.

Section subheading color: Set the color of the section subheading.

Section background color: Set the background color of the section.

Card

Image: Select an image to be displayed on the card.

Heading: Set the title of the card.

Card description: Add a text description for the card.

Button label: Set the text that appears on the card’s button.

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

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

Card Styles

Card heading color: Choose the color of the card’s heading.

Card text color: Set the color of the card’s description text.

Card background color: Choose the background color of the card.

Button text color: Select the color of the button’s text.

Button background color: Choose the color of the button’s background.

Badge Settings

Badge text: Set the text that appears on the badge.

Badge position: Select whether the badge appears on the left or right side of the card.

Badge text color: Choose the color of the badge’s text.

Badge background color: Set the background color of the badge.