Sectors No Card Image: how to use

Items straight on the background (no white card), each with an optional photo and/or icon. Each section is a full-bleed Row with one variant class in Advanced › CSS Classes: sectors-no-card-image-white-center, sectors-no-card-image-light-slate-center, sectors-no-card-image-light-blue-center, sectors-no-card-image-white-left, sectors-no-card-image-light-slate-left, sectors-no-card-image-light-blue-left. The Row holds a Container with the intro (subtitle Text, Heading, intro Text); then a Column Group where each column is one item. Copy the row that is closest to what you need, then change the text, links and images.

Items

• Photo: an Image at the top of the item fills the item’s width at a fixed shape (like Recent Articles); the photo is cropped to fit. Leave it out for no photo.
• Icon: an Image with icon in its Advanced › CSS Classes is shown at 50 px on an orange disc. It can go under the photo or on its own. Leave it out for no icon.
• Then subtitle Text (optional), Heading (H3, or H2 for a larger 28 px title), Text and one Button. The buttons line up across the row even when the text lengths differ. Button colour = Button Type: Primary orange, Secondary blue (white outline on light blue), Link white with a blue outline.
• Use 4, 3 or 2 columns; from 1100 px items share the row as set, rows of four go two per row on tablets (991–1099 px), every item stacks on phones (up to 990 px). For more items, add a second Column Group.

Rows on this page

• Rows 1–6: the six variants with photos. Then: photo + icon, icon only, text only, and items without the intro.

What to ask your designer for

• Photo: JPG, 800 × 426 px (or larger, same shape), under 150 KB, subject centred. Name it after the page and subject.
• Icon: PNG, transparent background, white line artwork, 400 × 400 px, under 20 KB.
• Sample files in media/wysiwyg/components/sectors-no-card-image/. The text on this page is placeholder copy.