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.
This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
Configuring the Avonni Card
Add a card title
Give your Avonni Card a clear and informative title to help users quickly identify its content. Here's how:
Find the "Card Title" attribute: This setting is within the Avonni Card component's configuration options in your Experience Cloud site builder.
Enter your title: Type in the text you want to display as the title. Keep it concise and descriptive.
Placement: The title will automatically appear on the left side of your Avonni Card, providing a visual anchor point.
Example:
If your Avonni Card displays product information, you could use a Card Title like "Location".
Show Header
Enable the "Show Header" attribute to add a versatile container at the top right of your Avonni Card. This lets you:
Customize card content: You can drag and drop other components, such as buttons, icons, or additional text, directly into the header.
Create flexible layouts: Arrange elements within the header to achieve your card's perfect look and functionality.
Example: Add a "Create New Case" button on a customer account page. Clicking this button would trigger a flow dialog that guides the user through submitting a new support case and collecting all necessary information.
Show Footer
This option enables a footer section at the bottom of your Avonni Card. You can use the provided footer slot to add content like links, buttons, or additional text.
Content Pull Padding
Adjust the spacing around the content within your card. Use this setting to create a tighter layout with the content flush against the border or add more breathing room.
Tutorials
| Name | Description |
|---|---|
Learn to create a MapCard Showcase with Avonni Card and Map components |
Appareance
Size
Width: Controls the horizontal width of the card. You can use fixed widths (pixels, percentages) or allow the card to adapt to its content or container size.
Height: Controls the vertical height of the card. Similar to width, you can use fixed or flexible height settings.
Overflow: Dictates how the card handles content that exceeds its dimensions. Options might include:
Visible: Content flows outside the card's boundaries.
Hidden: Content is clipped at the card's edges.
Scroll: Adds scrollbars to the card if content overflows.
Header
Background Color: Sets the background color of the card's header area.
Text Color: Sets the color of any text elements within the header.
Font Size: Controls the size of the header text.
Font Weight: Sets the boldness of the header text (e.g., normal, bold, light).
Font Family: Specifies the typeface used for the header text.
Border Bottom Size: Sets the thickness of the bottom border separating the header from the main card content.
Border Bottom Color: Sets the bottom border color in the header.
Media
Width: Controls the width of the card's media section (likely for images or videos).
Height: Controls the height of the card's media section.
Object Fit: Determines how an image or video should be resized to fit within its container. Options include:
Fill: Stretches the content to fill the space, potentially distorting aspect ratio.
Contain: Scales the content to fit fully within the space, potentially leaving blank areas.
Cover: Scales the content to cover the entire space, potentially cropping.
None: Displays the content at its original size.
Scale Down: Content scales down if it would exceed container dimensions, otherwise displays at original size.
Border Size: Controls the thickness of the border around the media element.
Border Color: Sets the color of the border around the media element.
Border
Size: Sets the overall thickness of the border surrounding the entire card.
Radius: Controls how rounded the corners of the card are.
Color: Sets the color of the card's border
Last updated
