Image Modules
Full Width Image or Video with Text Overlay
Images can vary in size, if you want a full screen takeover look go for an image ratio of 16:9.
It's best to provide a mobile friendly image and desktop image but you can just supply a desktop image and in the case of video this will probably be more convenient.
Text Options
The text blocks on this module can be configured several ways:
Colour can be black or white.
Text Alignment can be left, centred or right, inside the text block.
Text Block Position
- Top Left
- Top Centre
- Top Bottom
- Middle Left
- Middle Centre
- Middle Right
- Bottom Left
- Bottom Centre
- Bottom Right
Additional info for designers
While the text on this image is entered via the CMS and the title font adjusts in size based on the screen size that it's viewed on, for mockup purposes the following might be helpful:
Global Font Proxima Nova
h1 / Image Title
- Font-size: Desktop 60px, Mobile 47px
- Line-height: Desktop 60px, Mobile 47px
- Font-weight Bold or 700
- Uppercase
Body & Date Available Text
- Font-size 15px
- Line-height 22px
- Font-weight Normal or 400
- Sentence Case
Button Text
- Font-size 15px
- Line-height 22px
- Font-weight SemiBold or 600
- Capitalised
Two Images or Videos to a Row
Any image/video ratio/size can be used, however they must be the same dimensions as their row counterpart.
Text Options
The text blocks on this module can be configured several ways:
Visibility can be displayed on hover only or all the time.
Colour can be black or white.
Text Alignment can be left, centred or right, inside the text block.
Text Block Position
- Top Left
- Top Centre
- Top Bottom
- Middle Left
- Middle Centre
- Middle Right
- Bottom Left
- Bottom Centre
- Bottom Right
Additional info for designers
While the text on these image and video modules is entered via the CMS and the title font adjusts in size based on the screen size that it's viewed on, for mockup purposes the following might be helpful:
Hover Text
- Font-size 33px
- Line-height 33px
- Font-weight Bold or 700
- Uppercase
Image & Video Size for Mockups
Please keep in mind this is just get you started. Images and videos can be whatever size you like as long as they're same dimensions or ratio as image or video on the same row.
- Ratio 16:9
- Export size: Desktop - 1440 x 810px (retina screens).
- Export size Mobile - 750 x 422px (crisper imagery for devices).
- Mockup size: Desktop - 720 x 405px
- Mockup size for Mobile - 375 x 211px
