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.

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

<!-- 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 [email protected] for assistance.