Card

Overview

The Avonni Card Component is designed to showcase various content in a structured, visually appealing manner. Cards are instrumental in creating well-organized, easily digestible content layouts for displaying product details, profiles, articles, and more.

An essential feature of the Avonni Card Component is its slot functionality, which allows embedding other Experience Cloud Components. This flexibility ensures that each card can be a rich, multifunctional element, hosting various content and actions to enhance user interactions.

Tutorials

NameDescription

Learn to create a MapCard Showcase with Avonni Card and Map components

Properties

NameDescriptionUsage

Title

Set the title of the card.

Enter a relevant title that succinctly describes the content or purpose of the card.

Title Text Style

Customize the text style of the title.

Adjust text properties such as font size, weight, and style to make the title prominent and aligned with the design aesthetics.

Icon Name

Choose an icon to display alongside the title.

Select an icon that visually complements the title and enhances the overall presentation of the card.

CMS Image

Choose an image from the CMS to display within the card.

Select a relevant image to enrich the visual appeal and content relevance of the card.

Image URL or Experession

Define the URL of an image or a dynamic expression to fetch and display an image.

Enter a valid URL or expression to source and incorporate an image that enhances the card’s content

Media Position

Determine the position of the media (image/icon) within the card.

Choose a position that harmoniously integrates the media within the card layout, ensuring visual balance and focus.

Show Header

Control the visibility of the card’s header.

Toggle to display or hide the header, allowing for variations in card design based on content needs.

Show Footer

Adjust the padding around the card’s content.

Modify the padding to achieve the desired spacing and alignment of the card’s internal content.

Content Pull Padding

Control the padding around the content within the card.

This setting is important for adjusting the spacing between the card's content and its boundaries.

Style

Apply custom styles to the card.

Define CSS rules or class names to customize the card’s appearance and ensure it aligns with the overall design language of the webpage.

Slots

The card component comes with slots for title, actions, and content.

Embed other Digital Experience Cloud Components, including Avonni Components, within these slots to create a rich, integrated content presentation within each card.

Last updated