V3 Hub Specifications and Image Sizes

This document gives you an idea of the Hub Specifications.

Hub Container Width 

Hushly uses responsive design for the Hubs, the width of the hub container changes based on the screen resolution.

General Image Guidelines 

• Image formats: PNG (recommended), JPG, JPEG, GIF, SVG and WebP
  
  
• Maximum File Size: 1.5 MB.
  
  

Hub Appearance Elements 

These images are part of the general appearance of your Hub. 

• Fav Icon: 200px wide x 200px high.

Note: A Fav Icon is a small image that is located in the browser tab to the left of a webpage’s title, in Hushly you can upload the fav icon image URL directly instead of an Image at the Hub > Branding > Fav Icon.

Stream Item Image:

These images appear as part of your Hub content. 

• Thumbnails: 500px wide x 272px high.

• CTA Background Image: 365px wide x 475px high.

Hub Item Tiles are responsive, and resize automatically to fit different screen sizes. By default, standard Tiles are 500px wide by 272px high.

These guidelines provide recommendations for designing images to be used as tile thumbnails or CTA (Call to Action) backgrounds. Here's a breakdown of each recommendation:

Avoid Placing Important Elements at the Bottom:

When designing images for Tile thumbnails or CTA backgrounds, it's advised to avoid placing essential elements, such as text or crucial visual elements,  too close to the bottom of the image may risk them being cut off or obscured, especially on smaller screens or when the image is cropped for display.

Note: If your image includes logos or key graphics, ensure they are centered within the image.

Tile UI Customization 

The Tile UI can be customized by writing custom CSS classes. 

Banner Configuration at Stream Level:

The Hero Banner or the Stream Banner can be configured at the Stream Level (Hub > Streams > Configure - Banner and Header section).

• Max Size: 2MB
  

• Recommended: 1920px x 200px.

Banners too are dynamically resized. The emphasis on dynamic resizing highlights the importance of responsiveness in design that stream tiles and banners effectively adapt to the diverse landscape of digital platforms and devices.

Banner are always displayed as 200px high and are adjusted horizontally to fit the width of the screen as required, if size width is 500px, what happens in dynamic resizing is, the image is center aligned and the focus is on the center. The banner will be cropped on the left and the right while the focus remaining in the center. Hence you need to have your content within 200px center of the image.  

Size and Dimensions: Stream banner images should be sized to be 200 pixels tall. The width of the banner should be wider than most screens, approximately 1920 pixels. This ensures that the banner fills the screen width on various devices without losing quality or appearing stretched.

Logos and Key Graphics: If your banner includes logos or key graphics, ensure they are centered within the banner.

Logos or key graphics should not exceed 30% of the image's width. This helps maintain a balanced composition and prevents overcrowding of visual elements.