# 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`).

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FOduWkflrkMVIFuc2w5G2%2F2025-06-19_08-28-16%20(1).gif?alt=media&#x26;token=0b946cc0-38b1-4821-8546-d6d54f3092b8" alt=""><figcaption></figcaption></figure>

* **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.

{% hint style="success" %}

## Pro Tip

Removing the title text from the card component will reveal a slot for adding custom content.

<img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FSqnbVHnyiKa8VtB99qh6%2F2025-03-14_14-45-21%20(1).gif?alt=media&#x26;token=618a52cc-14cc-4abe-bc9c-5ad92ef3ca00" alt="" data-size="original">
{% endhint %}

### 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.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FmVVrXKEV8BtA1xMeO63N%2F2025-06-19_08-33-09%20(1).gif?alt=media&#x26;token=d63b2623-c26a-4023-ba90-9797da9111d8" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FggXlymGOLoRYVn4PZKeh%2F2025-06-19_08-30-32%20(1).gif?alt=media&#x26;token=602ea014-4525-427c-9e92-83b273a3c48a" alt=""><figcaption></figcaption></figure>

### 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".

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FyoeuIAKSEkPpLfIv26V4%2F2025-06-19_09-12-01.png?alt=media&#x26;token=2b5e49b0-6ecc-4483-803d-bdb8a5a2de87" alt=""><figcaption></figcaption></figure>

**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.