The banner module has been designed to support featured content that attracts the visitor attention to a particular action.

Last updated: 2019

Good examples

Examples of how this module can be used to be the most effective on sightsavers.org

Hero title top

Hero title

Hero sub-title

Module test examples

The below are used solely to test the variables with the module and not to be used as good examples of how to this module.

This area is specifically for assigned internal testers.

Hero title top

Hero title

Hero sub-title: Image focus position: Left, Hero content position: Left

Hero title top

Hero title

Hero sub-title: Image focus position: right, Hero content position: right, Enable full screen video: Yes

Hero title top

Hero title

Hero sub-title: Image focus position: right, Hero content position: top, Enable full screen video: Yes

Hero title top

Hero title

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes

Hero title top

Hero title

Hero sub-title: Image focus position: right, Hero content position: right, Enable full screen video: Yes, Enable hero CTA: Yes

Hero CTA title

Hero CTA copy (Button type: Normal, Hero CTA: left)

Hero CTA link copy

Hero title top

Hero title

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes, Enable hero CTA: Yes

Hero CTA title

Hero CTA copy (Button type: Normal, Hero CTA: Right)

Hero CTA link copy

Hero title top

This is what happens when the 'hero title' is so long that it goes over multiple of multiple lines of this hero space.

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes, Enable hero CTA: Yes

Hero CTA title

Hero CTA copy (Button type: Normal, Hero CTA: Right)

Hero CTA link copy

Hero title: No hero title top

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes, Enable hero CTA: Yes This is what happens when the 'hero sub-title' is so long that it goes over multiple of multiple lines of this hero space.

Hero CTA title

Hero CTA copy (Button type: Normal, Hero CTA: Right)

Hero CTA link copy

We protect sight, fight disease and make sure everyone can claim their rights.

Find out how your support can make a huge difference and change lives.

Hero: Full screen media

Good examples

Hero title

Hero sub-title

Module test examples

Hero title

Hero sub-title: Image focus position: Left, Hero content position: Left

Hero title

Hero sub-title: Image focus position: right, Hero content position: right, Enable full screen video: Yes

Hero title

Hero sub-title: Image focus position: right, Hero content position: top, Enable full screen video: Yes

Hero title

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes

Hero title

Hero sub-title: Image focus position: right, Hero content position: right, Enable full screen video: Yes, Enable hero CTA: Yes

Hero CTA title

Hero title

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes, Enable hero CTA: Yes

Hero CTA title

This is what happens when the 'hero title' is so long that it goes over multiple of multiple lines of this hero space.

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes, Enable hero CTA: Yes

Hero CTA title

Hero title: No hero title top

Hero sub-title: Image focus position: right, Hero content position: bottom, Enable full screen video: Yes, Enable hero CTA: Yes This is what happens when the 'hero sub-title' is so long that it goes over multiple of multiple lines of this hero space.

Hero CTA title

Protecting sight, fighting disease and promoting equality for all