Show case - Comparison of mortgages products
Desktop view
Desktop view
Mobile view
Mobile view
How it works
How it works
- Comparison container has been created to display products in a carousel.
- Each product is a container (Product Container) allowing to configure a set of sub-components:
- Text and Image
- Text List
- Link list
- Button
- Horizontal line
- Background color can be selected.
- When the component is rendered, the length of all products is aligned automatically. All are adjusted to the length of the longest product.
- Highlight/recommend a product is available
- A title is required to be displayed as a label on top of the highlighted product.
- The highlighted product is differenciated due to a border and the title label.
- The highlighted product is displayed on page load independtly of its position on mobile.
How to use it
How to use it
- Use the same subcomponents and follow the same order so that all products have a uniform appearance
- Images should have the same aspect-ratio, otherwise a misalignment may happen
Reference for publisher
Edit container for integrate title and change background color
Define recommended product
Open the selected product container.