Promotion cards
Overview:
The Promotion Cards section displays a visually rich, staggered grid of promotional cards that can link to any internal or external page. Each card can feature an image, and the entire layout supports dynamic spacing, sticky heading animation, and responsive alignment. Ideal for showcasing categories, promotions, or featured collections in a compact and engaging format.
Section Configuration:
Content
| Setting | Description |
|---|---|
| Section Heading | Sets the main heading text for the section. |
| Heading Size | Controls the visual size of the heading (H1–H6). |
| Heading Weight | Sets the font weight of the heading, ranging from light (300) to black (900). |
| Section Description | Optional subtext below the heading. Displayed as a paragraph. |
| Description Size | Controls the text size of the description—available in small or large. |
| Description Weight | Adjusts the font weight of the description text. |
Overlay Animation
| Setting | Description |
|---|---|
| Enable Overlay Animation | When enabled, the heading becomes sticky and overlays the grid as users scroll through the cards. |
Layout
| Setting | Description |
|---|---|
| Image Aspect Ratio | Defines how each card image is displayed: adapt, square, portrait, or landscape. |
| Content Width (%) | Sets the maximum width of the content container as a percentage of the page width. |
| Grid Gap | Controls the spacing between the cards. |
| Container Layout | Determines whether the section content is contained within the page or full-width. |
| Container Padding | Toggles horizontal padding inside the container. Disabling this removes default side spacing. |
Text Alignment
| Setting | Description |
|---|---|
| Text Alignment (Desktop) | Sets horizontal alignment for content on larger screens. |
| Text Alignment (Mobile) | Sets horizontal alignment for content on mobile devices. |
Color Scheme
| Setting | Description |
|---|---|
| Color Scheme | Applies a predefined color palette to the background and text of the section. |
Spacing
| Setting | Description |
|---|---|
| Top Padding | Adds vertical spacing above the section. |
| Bottom Padding | Adds vertical spacing below the section. |
Block Configuration:
Card
Each Card block represents one promotional card in the grid layout.
| Setting | Description |
|---|---|
| Image | Uploads the image displayed on the card. |
| Link URL | Sets the destination URL for the card when clicked. |
| Open in New Tab | When enabled, opens the link in a new browser tab. |