CTA banner: how to use

Each CTA banner is a full-bleed Row with one variant class in Advanced › CSS Classes. The class is the Figma background plus alignment: cta-dark-blue-overlay-left, cta-dark-blue-overlay-center, cta-light-overlay-left, cta-light-overlay-center, cta-light-blue-overlay-left, cta-light-blue-overlay-center, cta-custom-dark-left, cta-custom-dark-center, cta-custom-light-left, cta-custom-light-center. Inside the Row is a Container holding the text Container (subtitle Text, Heading, description Text) and a Buttons element with Primary, Secondary and Link buttons. Copy the whole row onto your page, then change the text, links and image.

Backgrounds

• Overlay variants take a photo; the theme adds the colour wash (dark blue, white or light blue at 80%) and picks white or dark text to match.
• Custom variants show the designer's artwork as-is with no wash. Use custom-dark for dark artwork (white text) and custom-light for light artwork (dark text).

What to ask your designer for

• Overlay photo, desktop: JPG, exactly 1920 × 640 px (3:1), sRGB, under 250 KB. Name it <name>-desktop-1920x640.jpg. Row › Background › Image.
• Overlay photo, mobile: JPG, exactly 900 × 1200 px (3:4), under 150 KB. Name it <name>-mobile-900x1200.jpg. Set in the Mobile view; on phones the photo shows above the copy.
• Custom artwork: two PNG or JPG files, a desktop one at 2000 × 1200 px with the middle 1200 px kept clear for the copy, and a mobile one at 900 × 1200 px (portrait) with the top 200 px free for the artwork and the copy area clear below. Name them <name>-2000x1200.png and <name>-mobile-900x1200.png.
• Reference files in media/wysiwyg/components/ctabanner/: yard photo cta-yard-desktop-1920x640.jpg + cta-yard-mobile-900x1200.jpg (dark blue overlay), workshop photo cta-workshop-desktop-1920x640.jpg + cta-workshop-mobile-900x1200.jpg (light and light blue overlays), artwork cta-custom-dark-2000x1200.png + cta-custom-dark-mobile-882x1200.png, cta-custom-light-2000x1200.png + cta-custom-light-mobile-2000x1200.png.