Image & text: how to use

Each section is a full-bleed Row with one variant class in Advanced › CSS Classes. The class is the Figma background plus image position: image-text-white-left, image-text-white-right, image-text-light-slate-left, image-text-light-slate-right, image-text-light-blue-left, image-text-light-blue-right. Inside the Row is a two-column Column Group: one column holds the Image, the other holds the subtitle Text, the Heading, the description Text, a bullet-list Text and a Buttons element. For the right variants the image column simply comes second; below 1100 px (the Figma SM and MD viewports) both variants stack with the image on top; the columns sit side by side from 1100 px. Copy the whole row onto your page, then change the text, links and image.

Bullet list

• The bullets are a Text element containing a normal list, with one class in its Advanced › CSS Classes: bullets-plus (blue plus, the Figma default), bullets-check (orange tick) or bullets-cross (red cross). On the blue background the icons turn white automatically.
• To mix icons in one list, give an individual item its own class in the Text's code view: <li class="bullet-check">, <li class="bullet-plus"> or <li class="bullet-cross">. Items without a class keep the list's icon. The last row on this page mixes ticks (what is included), pluses (optional extras) and a cross (what is not included).

What to ask your designer for

• Photo, desktop: JPG, exactly 1200 × 900 px (4:3), sRGB, under 250 KB. Name it <name>-desktop-1200x900.jpg. The photo always fills the height of the text beside it and is cropped from the centre, so a little of its top and bottom (short text) or sides (long text) may be trimmed. Keep the subject in the middle.
• Photo, mobile (optional): JPG, 1160 × 700 px (580:350), under 150 KB. Name it <name>-mobile-1160x700.jpg. Set it in the Mobile view of the Image element.
• Reference files in media/wysiwyg/components/imagetext/: image-text-desktop-1200x900.jpg, image-text-mobile-1160x700.jpg.