Banner component

Desktop view

Image position right

Image position left

With action stamp and airy spacing

Mobile view

Live example

Created example

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
- Resize the icon and illustration asset
- Vertically and horizontally align the icon and illustration asset
- Supports an anchor link
The standard button can be configured for the component with all options it offers.
Title font size can be small, regular or large

How to use it

The component allows creation of specific layouts with using less effort compared to using the Text & Image / teaser components within a grid control.