> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/card.md).

# Card

`avonni-card`

A flexible container that groups related content and actions into a single surface, with optional header, footer and media.

## Overview

**Card** is a Lightning Web Component that provides a flexible container to organize related information into a structured, visually distinct layout.

Use it in your own Lightning Web Components to compose headers, media, body content, actions, and footers. You control the title, icon, and media position through attributes, and fill the regions through named slots.

### Use Cases

* **Record summaries:** Group a record's key fields under a titled header.
* **Media tiles:** Show an image or icon with supporting text.
* **Dashboards:** Lay out KPIs or content blocks in consistent containers.
* **Call-to-action panels:** Combine body content with footer buttons.
* **Galleries:** Use background or overlay media for rich visual cards.

***

## Use Case Examples

### Example 1: Titled card with actions and footer

**Scenario:** Summarize an account with a header icon, a favorite action, body text, and a footer button.

```html
<!-- accountCard.html -->
<template>
    <avonni-card icon-name="standard:account" title="Acme Corporation">
        <lightning-button-icon
            slot="actions"
            icon-name="utility:favorite"
            alternative-text="Favorite"
            variant="bare"
            onclick={handleFavorite}
        ></lightning-button-icon>

        <p class="slds-text-body_regular">Primary account in the West region.</p>

        <lightning-button
            slot="footer"
            label="View details"
            variant="brand"
        ></lightning-button>
    </avonni-card>
</template>
```

**Result:** A card with an account icon and title, a favorite button in the header, body text, and a footer action.

### Example 2: Media tile with left-positioned media

**Scenario:** Show an icon to the left of a title and short description.

```html
<!-- eventTile.html -->
<template>
    <avonni-card media-position="left">
        <div
            slot="media"
            class="slds-align_absolute-center slds-box slds-theme_shade slds-p-around_medium"
        >
            <lightning-icon icon-name="standard:event" size="large"></lightning-icon>
        </div>

        <span slot="title" class="slds-text-heading_small">Quarterly Review</span>
        <p class="slds-text-body_small">Scheduled for next Tuesday at 10 AM.</p>
    </avonni-card>
</template>
```

**Result:** A card with an event icon on the left and the title and description on the right.

***

## Specifications

### Attributes

| Name                     | Description                                                                                                                                                                                                          | Type   | Default | Required |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------- | -------- |
| `icon-name`              | The Lightning Design System name displayed left of the title in the header. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. | String | —       |          |
| `media-alternative-text` | The alternative text for the media.                                                                                                                                                                                  | String | —       |          |
| `media-position`         | Position of the media relative to the card. Valid values are "top", "center", "left", "right", "bottom", "background", and "overlay".                                                                                | String | `"top"` |          |
| `media-src`              | Source for the image or media.                                                                                                                                                                                       | String | —       |          |
| `title`                  | The title in the header of the card, right of the icon. The title attribute supersedes the title slot.                                                                                                               | String | —       |          |

### Slots

| Slot            | Description                                                                                                                                                                                                                  |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`         | Placeholder for the card title. The title is displayed next to the icon at the top of the content and relative to the media. Alternatively, use the title attribute if you don't need to pass in extra markup in your title. |
| `media`         | Placeholder for card media. The media is placed relative to the content. The media can be placed to the left, right, top, bottom, center, background or overlay using the mediaPosition attribute.                           |
| `media-actions` | Placeholder for card media-actions. The media-actions is placed top right of the media. To place it elsewhere, place it directly in the media slot.                                                                          |
| `actions`       | Placeholder for card actions. the action is displayed to the right of the title.                                                                                                                                             |
| `footer`        | Placeholder for card footer. The footer is always placed at the bottom of the card.                                                                                                                                          |
| `default`       | Placeholder for card default content. The default content is placed below the header and relative to the media.                                                                                                              |

### Styling Hooks

| CSS Variable                                        | Type      | Default                                                                                        |
| --------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------- |
| `--avonni-card-shadow`                              | string    | `0 2px 2px 0 rgba(0, 0, 0, 0.1)`                                                               |
| `--avonni-card-text-color`                          | color     | —                                                                                              |
| `--avonni-card-radius-border`                       | dimension | `0.25rem`                                                                                      |
| `--avonni-card-color-border`                        | color     | `#c9c9c9`                                                                                      |
| `--avonni-card-styling-border`                      | styling   | `solid`                                                                                        |
| `--avonni-card-sizing-border`                       | dimension | `1px`                                                                                          |
| `--avonni-card-header-color-background`             | color     | —                                                                                              |
| `--avonni-card-header-font-weight`                  | string    | `700`                                                                                          |
| `--avonni-card-header-font-size`                    | dimension | `1rem`                                                                                         |
| `--avonni-card-header-font-style`                   | font      | —                                                                                              |
| `--avonni-card-header-font-family`                  | font      | `'Salesforce Sans', Arial, sans-serif`                                                         |
| `--avonni-card-header-line-height`                  | dimension | —                                                                                              |
| `--avonni-card-header-letter-spacing`               | dimension | —                                                                                              |
| `--avonni-card-header-sizing-border-bottom`         | dimension | `0px`                                                                                          |
| `--avonni-card-header-styling-border-bottom`        | styling   | `solid`                                                                                        |
| `--avonni-card-header-color-border-bottom`          | color     | `#c9c9c9`                                                                                      |
| `--avonni-card-header-text-color`                   | color     | `#181818`                                                                                      |
| `--avonni-card-spacing-block-start`                 | dimension | `0px`                                                                                          |
| `--avonni-card-spacing-block-end`                   | dimension | `0px`                                                                                          |
| `--avonni-card-spacing-inline-start`                | dimension | `0px`                                                                                          |
| `--avonni-card-spacing-inline-end`                  | dimension | `0px`                                                                                          |
| `--avonni-card-header-spacing-block-start`          | dimension | `0.75rem`                                                                                      |
| `--avonni-card-header-spacing-block-end`            | dimension | `0.75rem`                                                                                      |
| `--avonni-card-header-spacing-inline-start`         | dimension | `1rem`                                                                                         |
| `--avonni-card-header-spacing-inline-end`           | dimension | `1rem`                                                                                         |
| `--avonni-card-body-height`                         | dimension | —                                                                                              |
| `--avonni-card-body-spacing-block-start`            | dimension | `0.75rem`                                                                                      |
| `--avonni-card-body-spacing-block-end`              | dimension | `0.75rem`                                                                                      |
| `--avonni-card-footer-spacing-block-start`          | dimension | `0.75rem`                                                                                      |
| `--avonni-card-footer-spacing-block-end`            | dimension | `0.75rem`                                                                                      |
| `--avonni-card-footer-spacing-inline-start`         | dimension | `1rem`                                                                                         |
| `--avonni-card-footer-text-align`                   | alignment | `center`                                                                                       |
| `--avonni-card-footer-sizing-border`                | dimension | `1px`                                                                                          |
| `--avonni-card-footer-color-border`                 | color     | `#c9c9c9`                                                                                      |
| `--avonni-card-background-media-overlay-background` | string    | `linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%)` |
| `--avonni-card-background-media-text-color`         | color     | `white`                                                                                        |
| `--avonni-card-overlay-media-overlay-background`    | string    | `linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%)` |
| `--avonni-card-overlay-media-text-color`            | color     | `white`                                                                                        |
| `--avonni-card-left-media-width`                    | dimension | —                                                                                              |
| `--avonni-card-right-media-width`                   | dimension | —                                                                                              |
| `--avonni-card-media-sizing-width`                  | dimension | `100%`                                                                                         |
| `--avonni-card-media-sizing-height`                 | dimension | `100%`                                                                                         |
| `--avonni-card-media-object-fit`                    | string    | —                                                                                              |
| `--avonni-card-media-color-border`                  | color     | `#e5e5e5`                                                                                      |
| `--avonni-card-media-sizing-border`                 | dimension | `1px`                                                                                          |
| `--avonni-card-color-background`                    | color     | `white`                                                                                        |
| `--avonni-card-footer-padding-right`                | dimension | `1rem`                                                                                         |

## Key Considerations

* **Title precedence:** The `title` attribute overrides the `title` slot.
* **Media position:** `background` and `overlay` place media behind/over content; `top`/`left`/`right`/`bottom` place it adjacent.
* **Slots are optional:** Render only the regions you need (e.g. omit `footer`).
* **Media actions:** Use the `media-actions` slot for controls over the media, separate from header `actions`.
* **Best Practice:** Use the `title` attribute for plain titles; use the `title` slot only when you need custom markup. Choose `media-position` to match the layout (e.g. `left` for list-style cards, `background` for hero tiles).

***

## Troubleshooting Common Issues

* **Title not showing:** If both are set, the `title` attribute wins over the `title` slot—use one.
* **Media not positioned as expected:** Confirm `media-position` is one of the accepted values and the content is in the `media` slot.
* **Footer in the wrong place:** Footer content must be in the `footer` slot; it always renders at the bottom.
* **If issues persist:** Contact our support team at <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/lwc-components/core-components/card.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.