The hompage gallery consists of two images per slide. The dimensions of the images are highlighted below as well as examples of how the content reacts responsively. The transparent png image will move across the component and therefore half the image on the right hand side needs to be as clear as possible for the text to remain readable. The area marked as ‘safe area’ is highlighted to show the section of the background image that will always be visible on any device. It is recommended that all 3 background image slides should not exceed 350k as a collective total.

The other point to consider as a priority when selecting background images for this component is the emphasis on the search form. The search form should always be readable and clear to see on the page. So complex images behind the search form may result in it being missed and therefore clarity needs to be kept in mind as a priority 1 when selecting images. The search form only overlays the main hero image on 1024px+ width devices.

The PSD template is available to download below: 

The Interactive holiday types component primarily consists of two images and a button per slide. The first slide has reevoo place in the right quarter of the component and the correponding slides have a text block. The dimensions of the images are highlighted below as well as examples of how the content reacts responsively. The png image moves across to the center of the component and therfore clarity of typography placed on the background image need to be considered at all times. Please see Typography in images for more details. The area marked as ‘safe area’ is highlighted to show the section of the background image that will always be visible on any device.

Each tab on this component consists of a icon from the icon font, and text description of the tab. Each tab holds a maximum of 20 characters per tab

The Full width promo component can be presented as a single slide, or multiple slides which activates tabs. It is recommended to use the single slide option in most senarios as it is commonly known that hidden slides often get missed by users. Each slide of the component is made up of 2 images, a button and a tab (if more than one slide is activated). The image dimensions and how they react reposively are detailed below. The key pointers to consider when designing for this component is clarity and simplicity. The safe area on this component changes according to the use of just one frame, or if multiple frames (tabs) are introduced. It’s generally the right half of the main image which is safe, and the left hand needs to stay as clear and uncluttered as possible. Please see Typography in images for more details.

Other considerations to keep in mind are the length of text in tabs and buttons. Tabs hold a maximum of 1 characters in this component. Buttons don’t have a maximum character count, however it is recommended to be short and consise when adding a description to any buttons across the site

The PSD template is available to download below: 

The Full width promo components offer 5 different styles for a content editor to apply. The five styles apply different tab and button colours to the component and each colour has a designated distressed edging style assigned to them. The distressed edge therefore is part of the compoent so their is no need to export the background image with the distressed edge. The background image is exported as a retangular letterbox shape (1176px × 210px) so that it can be used in all template styles if a content editor decides to change the style, or utilise the image on another area of the website.

The mobile view of this component has a solid background colour (no image). This colour is defined per component, so it’s good to keep this in mind when selecting type colour in the png image.

Download Template >

The half width promo component consists of 2 images, and a button. The image dimensions for the background image is 552px X 310px . The key pointers to consider when designing for this component is clarity of message. Please see Typography in images for more details. Another point to consider is that the button remains the same size and therfore can take up half the component size on a mobile device.

The Full width promo components offer 5 different styles for a content editor to apply. The five styles apply different tab and button colours to the component and each colour has a designated distressed edging style assigned to them.

The PSD template is available to download below: 

Download template >