Possible online services disruption due to Internet related outage
Image Card V2
Description
Image Card 2 is a component designed to frame and call attention to content and drive traffic through graphic means. It offers two different types of CTA settings (button vs. card).
Authoring
The Image Card V2 component is a flexible-width rectangle with an author-defined background color and image, containing information such as title, description, and two different types of CTA settings (button vs. card). By selecting one of the CTA options, either a full card is clickable without a button or just a button is clickable.
Configuring the Properties tab
- Enter the card title.
- Enter a description for the card.
- Configure the background color.
Configuring the Desktop tab
- Drop an image of your choice for the desktop breakpoint.
- Disable Dynamic Media for Desktop: For PNG images that require transparency, you will need to select this option.
- Configure the image placement to change the focal point of the image.
Configuring the Mobile tab
- Drop an image of your choice for the mobile breakpoint.
- Disable Dynamic Media: For PNG images that require transparency, you will need to select this option.
- Configure the image placement to change the focal point of the image.
Configuring the CTA tab
- Configure a CTA button by putting the link and button label.
- Link: Enter a URL or a file path to an image or asset.
- Aria label optional.
Configuring the Styles
- Adjust the card text color as needed. Select white text style if you have configured a dark background color and vice versa.
Examples
Dark Text & Light Background Color - Differing Images For Desktop And Mobile
Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dark Text (Default) - Differing Image Positioning
Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
White Text - Different Image Positioning
Dark Text (Default) - More Variations
No title Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.