Card

A card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card

import { VCard } from '@vonage/vivid-vue';

import { registerCard } from '@vonage/vivid';

registerCard('your-prefix');

This is the slot for any content that you need to display after header content (Headline, Subtitle). It can be used instead of, or in conjunction with the text attribute.

Use the graphic slot for Icons or custom images. The graphic slot overrides the icon property.

The media slot can be used to display images or video content above the card header.

The meta slot is for action content in the card header.

The footer slot is for content in the card footer.
Use it for adding buttons or action items.
By default - items inside footer slot are aligned to the end.

Card has predefined content style template.
Use the main slot to fully override a card's predefined template with your own. When using main - only appearance and elevation are applied on the card.

The card border color can be customized using --card-border-color.

Note: this variable works only with outlined appearance.

The card headline can be trimmed to your preferable number of lines. The number of lines is controlled by the css variable --headline-line-clamp.

The card subtitle can be trimmed to your preferable number of lines. The number of lines is controlled by css variable --subtitle-line-clamp.