Purpose: This block is designed to show image and media content. We put issue/overview content with pictures of supporters, activists and the general public, reinforcing the notion that nothing can be saved or protected without people. In practical terms, an image of something happening in the world should be constantly juxtaposed with the people who are taking action and creating positive change.

Pages: Home (at top) – see page layouts and blocks

For content images the max width is 1140px. To ensure quality please supply images with a width of no less than 1140px. An ideal width would be 1440 pixels to allow for any minimal cropping – more on Image Ratio and visuals.

The Header Carousel can be swiped left for S/M sizes on both Right-to-Left and Left-to-right effects, depending on your alphabet..

 
carousel-header

Style #1 – Zoom and Slide to grey

This style provides a smooth fading transition, and a preview for the next slide in an oblique shape. Working very well on mobile (“swipe” effect), it has both Right-to-Left and Left-to-right effects, depending on your alphabet..

Zoom and Slide edit mode

Zoom and Slide frontend

Carousel Header – “Zoom and Slide to grey” style

Style #2 – Full width classic

This style allows a carousel spanning across the full page width using a classic look: big slides, fade transition, and no sub-headers. See all screens here.

Full width classic edit mode

Full width classic frontend


Block elements

Carousel Autoplay

Select file image

Click on Select Image and focal point and choose one of the options available:

Select focus point for image

You will see a circle with blue margins on the image. Drag and drop it on the image where you want the focus point to be OR add numbers in the Horizontal Pos. and Vertical Pos. spaces.

Text – Link fields

Character number limitation


Do’s & Don’ts

Do’s:

You should use as much as possible:

Examples:

Dont’s:

To secure the text and call to action legibility, you should avoid using as much as possible:

Examples:


Design Files

Here you can find all the Design specifications


Links & Resources