Hero Carousel Banners
Create key marketing banners that work responsively and are automatically optimised for all devices. Use a maximum of 4 banners within a carousel for better UX.
Overview
The following article provides detailed information and UX recommendations for designing hero carousel banners, including how they work at different breakpoints and viewports.
Banner types
There are 2 banner types: Full width and Contained. It is decided at the design stage which one will be used and built as part of the theme.
Banner sizes
Voracio Manager allows you to use HiDPI (High Dots Per Inch) images that cater for retina displays and we recommend designing all banners at HiDPI. The following guide provides the widths for the banners at HiDPI as these are set as standard. Please refer to Voracio Manager for the heights of each banner.
Safe zones
When designing banners it is important to keep all content such as text, key parts of images and CTA’s (Call To Action) within the safe zone.
Text sizes
Because banners scale between breakpoints it is important to make sure text is legible when the banner is viewed at its smallest size.
On the following pages there are recommendations on the minimum sizes that should be used.
Desktop (Full width)
Desktop full width banners span the full width of the viewport and are used at 3 breakpoints: LG, XL & XXL. The banner retains the same height and is masked (left & right) between the breakpoints.
Desktop (Contained)
Desktop contained banners fill the width of the main website container and are used at 3 breakpoints: LG, XL & XXL. The banner scales down proportionally from XXL to LG.
Tablet
Tablet banners fill the width of the viewport at MD breakpoint and scale down proportionally.
Mobile
Mobile banners fill the width of the viewport and are used at 2 breakpoints: SM & XS. The banner scales down proportionally from SM to XS.
