Agencies
Services
Icon Card
The Icon Card component highlights key content in a visually engaging way and can direct users to related pages or resources.
It displays as a flexible rectangular card that can include a title, description, and either an icon or an image, with an optional call-to-action (CTA) button or clickable link.
Use the Icon Card to visually emphasize important information or links within a page.
Authors can customize the card by adding text, selecting an icon or uploading an image, choosing a background color, and deciding whether the card should function as a clickable link or simply as a visual element.
Configuring the Properties tab
Title – Enter a short, descriptive title for the card.
Description – Add supporting text that provides more detail about the content.
Background Color – Select a background color that fits your page design.
Icon Selector – Choose an icon from the Font Awesome library to visually represent the content.
- Image – Drag an image to add or click the image icon to choose from Assets Dam.
Image is Decorative :
If checked, the image will be ignored by screen readers. Use this option only if the image conveys no meaningful content.Image Alt Text:
Provides accessible alternative text for the image.Get Alternative Text from DAM:
If checked, the system automatically uses the DAM asset’s alt text metadata.
Configuring the Card Link tab
- Card Link Type: Choose between two options:
- Full Card Clickable: Makes the entire card a single clickable area.
- Button: Displays a separate button within the card for users to click.
- Button Label: Enter the text that appears on the button
- Button Aria Label: Enter an accessible label that provides more context for screen readers.
- Link: Provide the internal or external URL where the card or button should lead.
- Open in New Tab: Check this option to open the link in a new browser tab when clicked.
Configuring the Styles
Text Color – Adjust the card text color as needed.
Use white text for dark backgrounds and dark text for light backgrounds.
- Card Width – The card width automatically adjusts based on layout and container settings.
Usage Notes
The Icon Card supports display without a link.
When the Link field is empty, the card will render normally but will not include a hyperlink tag.
This allows authors to use the Icon Card for visual or decorative purposes only, without navigation.