Card

Overview

The Card component acts as a fundamental container and structural frame for your content. It provides a distinct visual boundary, organizing related information into a cohesive unit.

Unlike simple layout blocks, the Card comes pre-configured with dedicated slots for a Header, Body, and Footer, allowing you to rapidly build consistent interfaces without manually styling borders or padding. Its primary function is to serve as a parent container that holds other Avonni components.

---

Common Use Cases

Use Case	Description	Example
Dashboard Widgets	Group metrics and charts into distinct, digestible blocks.	A card containing a "Quarterly Sales" chart with a "Refresh" button in the header action slot.
Record Profiles	Display summary information for a person or object.	A "User Profile" card featuring an avatar, contact details, and quick links in the footer.
Product Displays	Showcase items in a grid layout (Gallery view).	A card showing a product image, description, price, and an "Add to Cart" button.
Form Organization	Group related input fields logically to improve form readability.	A card titled "Shipping Address" containing specific address input fields, separate from "Billing Info".

---

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.

Pro Tip

Removing the title text from the card component will reveal a slot for adding custom 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.