Card

Overview

The Avonni Card is a flexible building block or frame for your content. Its primary purpose is to hold other components, providing a clear visual boundary and a dedicated header and footer.

Key Features

• Content Container: The main body of the Card is a slot where you can place any other Avonni component (or multiple components).

• Built-in Header & Footer: Includes dedicated areas for a title, icon, actions, and footer content.

• Layout Organization: Helps structure your page content into clear, logical sections.

• Visual Appeal: Presents information in an organized, modern, and easily digestible format.

• Media Integration: Allows you to place an image as a background or alongside your content.

Use Cases

• Dashboard Widgets: Presenting key metrics, charts, or data visualizations in an organized way on a Home or App Page.

• Profile Summaries: Displaying key information for a customer or user profile, such as a name, photo, and quick links.

• Product Cards: Showcasing product details, images, and pricing in a list or grid format.

• Organizing Forms: Grouping related input fields together within a form.

• Displaying individual records in a gallery-like view.

Adding the Card Component

Drag and Drop: From the Component Library (left panel), find the "Card" component and drag it onto your canvas.

Configuration

Select the Card component on the canvas to access its properties in the Properties Panel.

Header Configuration

The Card's header provides a space for a title and interactive elements.

• Title: (Text) Enter a clear and concise title that appears prominently at the top of the Card.

• Icon Name: (Text, Optional) Add an icon next to the title to enhance visual context (e.g., standard:account).

• Actions Slot: The header includes a dedicated actions slot (usually in the top-right). Drag components, such as Button or Button Menu, here to provide users with actions related to the card's content.

Content & Footer Slots (The Power of Slots)

What truly makes the Card powerful is its ability to contain other components.

• Content Slot: The main body of the Card is a flexible slot. You can drag any other Avonni component here – from simple Text and Metric components to complex Data Tables, Charts, or even another Dynamic Component.

• Footer Slot: The Card also includes a footer slot. This area is ideal for adding action links (such as "View All") or summary information.

Media & Appearance

You can make your Card more visually engaging by including an image.

• Media Image: Provide a URL for an image you want to associate with the card.

• Media Position: Choose how the image is displayed:

  • Left, Top, Right, Bottom: Places the image alongside the main content area.

  • Background: Uses the image as a background for the entire card.

  • Overlay: Overlays the image on top of the card's content.

Behavior & Visibility

• Visible: (Boolean) Controls whether the entire Card component is visible on the page. You can bind this to a Variable or Formula for dynamic show/hide logic.

Example: Building a "Key Metric" Widget

1. Add a Card: Drag a Card component onto the canvas.

2. Configure Header:

   • Set the Title to "Quarterly Sales Performance".

   • Set the Icon Name to standard:dashboard.

   • Drag a Button Menu into the actions slot with options like "Refresh" and "Export".

3. Add Content:

   • Drag a Metric component into the main content slot and configure it to show total sales revenue.

   • Drag a Chart component below the Metric (still inside the content slot) to show a sales trend line.

4. Add Footer:

   • Drag a Text component into the footer slot. Set its Value to display a link like "View Full Report".

Result: You've quickly assembled a self-contained, organized dashboard widget with a clear title, actions, and multiple components inside.

Key Considerations

• As a Container: Remember that the Card's primary role is to organize and provide a visual frame. Its power is realized by the components you place inside its slots.

• Layout: Combine Cards with the Columns component to create sophisticated, grid-based page layouts.

In Summary

The Avonni Card is a versatile and essential layout tool for creating organized, visually appealing, and functional sections within your Dynamic Components. By leveraging its header, content, and footer slots, you can easily build complex arrangements of other components.