📖 Overview
The Image block displays a single image with full control over aspect ratio and object-fit behaviour for both desktop and mobile. It supports separate images for different screen sizes and optional captions.
✏️ Content Options
Desktop Image
| Field |
Type |
Required |
Description |
| Image |
Image |
No |
The main image to display. Caption from media library is used if available |
| Aspect Ratio |
Select |
No |
Set the aspect ratio for the image (e.g., 16:9, 4:3, 3:2, 1:1, 3:4, 2:3, 9:16) |
| Fit |
Select |
No |
How the image fills its container: Auto, Cover, or Contain |
Mobile Image
| Field |
Type |
Required |
Description |
| Image |
Image |
No |
Alternative image to display on mobile devices |
| Aspect Ratio |
Select |
No |
Set the aspect ratio for the mobile image |
| Fit |
Select |
No |
How the mobile image fills its container |
| Display on mobile? |
Toggle |
No |
Whether to display the image on mobile devices (default: On) |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable |
Default Value |
--block-image-figure-gap |
var(--spacing-xxs) |
--block-image-caption-padding-left |
var(--spacing-xxxs) |
--block-image-caption-border |
0.2rem solid var(--colour-brand-neutral-1) |
--block-image-caption-mobile-margin |
0 var(--layout-body-mobile) |
