Three Cards Media
A flexible section that renders three side-by-side content cards, each with an image, heading, and description. Built with nested container blocks for full layout control.
Configure the Section
- In the theme editor, click Add section.
- Select Three cards media from the General category.
- Each card is a Container block containing Image, Text, and other child blocks.
Section Settings
Layout
| Setting | Description |
|---|---|
| Width | Page width, Full width, or Custom (60–100%). Default: Page width. |
| Height | Auto, Full screen, or Custom (small/medium/large/custom input). Default: Auto. |
| Direction | Horizontal (side by side) or Vertical (stacked). Default: Horizontal. |
| Stack on mobile | Collapse horizontal layout to vertical on mobile. Default: On. |
| Alignment | Horizontal alignment — Left, Center, Right, or Space between. Default: Center. |
| Position | Vertical alignment — Top, Center, or Bottom. Default: Center. |
| Gap | Spacing between cards. Range: 0–100px. Default: 12px. |
| Padding | Top and bottom padding. Range: 0–100px. Default: 32px. |
Block Types
This section accepts any theme block (@theme) and app blocks (@app), making it highly flexible. The default preset uses three Container blocks, each containing:
- Image — A media block for the card visual.
- Text — Heading and body text.
You can also add Button, Custom Liquid, or any other available block inside each container.
Responsive Behavior
When direction is horizontal and “Stack on mobile” is enabled, the cards stack vertically on screens narrower than 750px.