Components
Image Card
Card with an image. The only purpose is to present the image, it does not accept any type of text. You can also add an animation and place a hyperlink in the image.
This component can be used inside the slider container or slider advanced.
Edited 1 year 5 months ago
Desktop
Mobile
Step by step:
Component Structure in Canvas Layout:
1. On the page you want to add the banner, click on the "+" of the Layout Canvas;
2. Look in the list for the component "Slider Container" to create the carousel and add it by grabbing the component and dragging it to the Layout Canvas;
**Note: It doesn't matter if you want to add only one image card or N image cards, you need to add the container above.
3. And inside the "Slider Container", insert the "Image Card", which can be n (variable by the number of items you want inside the carousel).
NOTE: If you want a carousel with callout text on the side, view the "Title and CTA Container" manual, which shows how to add.
Component customization:
1. Click twice on the component to customize it.
Background:
• Image: Upload the card image.
• Image Title: important for accessibility features.
• Image Alt: Important for SEO, it will show in the HTML code.
• Border and Margin: change to "ON" to select a border radius and margin custom option.
• Link: Change to “ON” and fill the field with the link, also choose if the link will open on the same page.
• Card Style: Select "ON" for both, if you want animation on hover (cursor positioned on the card) and a shadow behind the card.
• Data Layer: It should contain the basic data layer, and when there is a Link apply the data layer for events.
2. Click on "Apply" to save.
To choose the type, color and font of the button In your brand documentation, go to Components > Buttons > Applications > Click to inspect the image of Mouse Interactions.
