Card
A card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card
import '@vonage/vivid/card';
or, if you need to use a unique prefix:
import { registerCard } from '@vonage/vivid';
registerCard('your-prefix');
<script setup lang="ts">
import { VCard } from '@vonage/vivid-vue';
</script>
<template>
<VCard headline="I'm a card" />
</template>
The graphic slot overrides the icon property.
Use the slot if a colored icon is needed or an icon with different dimensions.
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 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.
| Name | Type | Description |
|---|---|---|
| appearance | elevated (default), outlined, ghost |
Sets the element's appearance. |
| elevation | 2, 4 (default), 8, 12, 16, 24 |
Sets the element's elevation. |
| headline | string |
Sets the element's headline. |
| icon | string |
Sets the element's icon. |
| subtitle | string |
Sets the element's subtitle. |
| text | string |
Sets the element's text. |
| clickable-card | boolean |
Indicates whether card should be a <button>. |
| href | string |
Sets the element's href, changes card tag to <a> . |
| download | string |
Sets the element's download. |
| hreflang | string |
Sets the element's hreflang. |
| ping | string |
Sets the element's ping. |
| referrerpolicy | string |
Sets the element's referrerpolicy. |
| rel | string |
Sets the element's rel. |
| target | Enum:_self_blank_parent_top |
Sets the target's rel. |
The following events are available when the clickable-card attribute is set:
| Name | Event Type | Description |
|---|---|---|
| click | MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus | FocusEvent |
Fires when the element receives focus. |
| blur | FocusEvent |
Fires when the element loses focus. |
| keydown | KeyboardEvent |
Fires when a key is pressed. |
| keyup | KeyboardEvent |
Fires when a key is released. |
| input | Event |
Fires when the value of an element has been changed. |
| Name | Description |
|---|---|
| Graphic | Add graphic element to card. Overrides the icon property |
| Media | Use to display images or video content above the card header |
| Meta | Use for adding action content, of info in the card header |
| Footer | Content in the card footer. |
| Main | Override a card's predefined template |