The Hero Rail Cards Carousel is a component that displays a carousel of larger banners compared to the Article Rail, which can show text and buttons within the images, similar to a Hero Banner. It can display up to 12 banners, and the image sizes for mobile and desktop are different.
Disclaimer:
- At least 3 banners must be included for this component.
- It is recommended to use the same look and feel across all banners in the Hero Rail Cards Carousel.
- The images for desktop and mobile are different.
The Hero Rail Cards Carousel is composed of multiple Hero Card Rails, each with its own individual properties such as: Tag, Title, Description, Button Text, and Redirect Link.
Desktop
Width: 886px
Height: 710px
Resolution: 300 dpis
Mobile
Width: 650px
Height: 650px
Resolution: 300 dpis
Properties
Urgency Tag - Use for messaging like "Solo Hoy" or "Proximamente" - MAX 25 Characters
Title - Title, required - Use clear and succinct language - MAX 35 Characters
Description - Use to provide context to the Title - MAX 35 Characters
Button Label - Text Used to redirect the user to another part of the site
Redirect - Where the CTA should redirect to. Ex: /marcas/morphe , /comprar/cuidado-del-cabello
By default the texts color placed in AEM to the Hero Rail Cards Carousel is Black(#000000)
⚠️❗IMPORTANT❗⚠️
Hero Rail Cards Carousel Desktop Version
Bottom Safe Area: Se debe respetar un margen inferior del 50% (equivalente a 355px en un lienzo de 710px de altura).
Hero Rail Cards Carousel Mobile Version
Bottom Safe Area: Se debe respetar un margen inferior del 42% (equivalente a 273px en un lienzo de 650px de altura).
