Sliders

Hero Slider

This slider has 2 main layouts - full-width video or image with a text overlay and half-width video or image with text on the right.

Images can vary in size, however for a nicer experience I recommend keeping all slide images the same size. If you're utilising the half-width layout this should have the same height as your full width images and be half the width of your full width images.

It's best to provide a mobile friendly image and desktop image for each slide but the slider can manage if you only provide a desktop image.

Arrow keys can advance the slides and on mobile the slides can be changed with the slider arrows and swiping gesture.

Hint: Expand or shrink your browser width or use on your phone to see how this module behaves responsively.

Text Options

The text blocks on the slider can be configured several ways:

Colour can be black or white. However, it is always black on mobile.

Text Alignment can be left, centred or right, inside the text block.

Text Block Position

1. Top Left
2. Top Centre
3. Top Bottom
4. Middle Left
5. Middle Centre
6. Middle Right
7. Bottom Left
8. Bottom Centre
9. Bottom Right

Buttons can be black or white, solid or outlined.

 

Additional info for designers

While the text on this slider 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 / Slide 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

Category Slider

The purpose of this slider is to link to categories.

All slide images need to be the same size.

Desktop Images

• Mandatory
• Ratio 16:9
• Dimensions 720 x 405px
• Resolution 72 dpi

Mobile Images

• Mandatory
• Dimensions 300 x 374px
• Resolution 72 dpi

 

Additional info for designers

While the text on this slider is entered via the CMS and the font size 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

Category Title

• Font-size: Desktop 60px, Mobile 35px
• Line-height: Desktop 60px, Mobile 35px
• Font-weight Bold or 700
• Uppercase