Desktop view
Banner image 50%
Banner image 50%
Banner image 60%
Banner image 60%
Banner image 40%
Banner image 40%
Banner image 50%, with action stamp
Banner image 50%, with action stamp
Mobile view
How it works
How it works
- The component can be displayed in the following widths
- Full bleed 鈥 displayed outside of the grid boundaries (full bleed).
- Normal 鈥 displayed within the grid boundaries.
- The component allows additional configuration to be applied
- Image position: left, right
- Image span: 40%, 50%, 60%.
- Image ratios:聽16:9, 4:3, 1:1, 2:1, 21:9
- Action stamp
- Airy spacings (left and right)
- Different image for mobile and desktop viewports
- Styles:聽Image Fill (image can fill all container available) and聽Content Alignment (content/text is centered)
- The standard button can be configured for the component with all options it offers.
- Title font size can be small, regular or large
- Action stamp can be added
Guidelines for usage on the Swiss homepage
Guidelines for usage on the Swiss homepage
- Image span 50%
- Image positioning alternately: first right, second left, third right, etc.
- Background color alternately: first none, second ivory, third none, etc.
- Rules for background colors:
- First banner
The background color for first banner must be set always to none to separate nicely from the capabilities section above. - Middle banner(s)聽
- if four teasers, second background color must be set to ivory and third must be set to none
- If three teasers, second must be to set to none
- Last banner
The background color for the last banner must be set always to ivory to separate nicely from key figures below, which can only be displayed on white background.
- First banner
- Rules for background colors:
Reference for publisher
Banner / Teaser composition - Homepage Switzerland
Banner / Teaser composition - Homepage Switzerland
聽Background color rules - Homepage Switzerland
聽Background color rules - Homepage Switzerland
All available styles
All available styles
