We support 6 story templates. Each template is designed for different scenarios.
- Hero Priority
- Headline Priority with aside space
- Hero Vertical
- Hero Overlay
- Hero and Headline Priority
- Hero Priority with aside space
"Hero Priority" gives more emphasis on hero image. Layout will have hero image at beginning. Ads will only be supported row wise.
Hero image with image within container and ration 16:9
Full bleed hero image with image ratio ⅓
Hero Priority with aside space
"Hero Priority with aside space" will start with a hero image. This template gives more emphasis on the hero image. Also, it will have a side space where related story collection, ads and widgets perfectly fit.
Hero image with image within container and ratio 16:9
Full bleed hero image that handles 16/9 image without cropping much.
Full bleed hero image with image ration 1/3 on desktop and mobile
Headline Priority with aside space
"Headline Priority with aside space" will start with a Story head. This layout showcase ads/collections with the story in the loaded first screen. The intend is to divert audience attention to aside space even if the story is not interesting.
To give a similar experience on mobile after the first card there will be a load more button. Below that immediately comes the ads/collections
Hero Vertical will have an image on one side and a head on the other side on the desktop. It's primarily focused on mobile surfaces. Since horizontal images with 16:9 and the ratios below look too small on mobile, we need to support vertical images as well.
This layout supports 3 designs ref : https://www.vogue.in/culture-and-living/content/5-free-online-courses-on-sketching-that-will-help-you-channel-your-creative-energy
Hero Image with 3:4 ratio. Image switches to both sides.
Hero Image with 1:1 ratio. Image switches to both sides.
A design for stories with low resolution hero image. Also it gives more emphasis for the headline.
Headline Hero and priority
Story head comes first. Layout gives equal importance for both headline and hero image.