Card

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

Card Text Content

Headline

Add a headline attribute to add card headline title.

Subtitle

Add a subtitle attribute to add card subtitle.

Text

Add a text attribute to add text to the card.

<script setup lang="ts">
import { VCard } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCard text="The card can contain multiple lines of text." headline="Vivid Card Component" subtitle="Extra text below the card headline"></VCard>
</template>

Icon

Use the icon slot to display an icon from the icon library, which prefixes the Card’s headline.
To add custom icons or to postfix icons, use the graphic slot.

<script setup lang="ts">
import { VCard, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCard headline="Vivid Card Component" subtitle="Extra text below the card headline">
    <template #icon><VIcon name="chat-line" /></template>
  </VCard>
</template>

Clickable Cards

Card component supports two clickable modes:

Card as a Link

Use the href attribute to change the card wrapper to a link. When doing so, all of the native attributes of <a> are supported, including target.

<script setup lang="ts">
import { VCard } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCard headline="Vivid Card as a Link" subtitle="Clicking on this card will navigate you to the documentation homepage" href="https://api.vivid.vonage.com" target="_blank"> </VCard>
</template>

See Client-Side Navigation for more information on how to integrate with Vue Router.

Card as a Button

Setting the clickable-card attribute switches the card wrapper to a <button>, allowing you to trigger programmatic actions e.g. using the click event.

<script setup lang="ts">
import { VCard } from '@vonage/vivid-api-vue';

const headline = 'Vivid Card as a Button';

const onClick = () => {
alert(headline);
};

</script>

<template>
  <VCard :headline="headline" subtitle="Clicking on this card will trigger displaying its headline as an alert" type="button" clickable-card @click="onClick"> </VCard>
</template>

<vwc-card headline="Vivid Card as a Button" subtitle="Clicking on this card will trigger displaying its headline as an alert" type="button" clickable-card onclick="onClick(event)"> </vwc-card>

<script>
  function onClick(event) {
    const headline = event.currentTarget.headline;
    alert(headline);
  }
</script>

The HTML specification does not allow one interactive element to be nested within another. Therefore, you should not use any links or buttons inside slots when using the href or clickable-card attributes.

Appearance

The appearance attribute to change the card’s appearance.

<script setup lang="ts">
import { VCard, VLayout } from '@vonage/vivid-api-vue';
</script>

<template>
  <VLayout>
    <VCard appearance="elevated" headline="Elevated" subtitle="this is the card default appearance"></VCard>
    <VCard appearance="outlined" headline="Outlined" subtitle="this appearance set a border to the card same as elevation='0' "></VCard>
    <VCard appearance="ghost" headline="Ghost" subtitle="present the card template without background or shadow"></VCard>
  </VLayout>
</template>

<vwc-layout>
  <vwc-card appearance="elevated" headline="Elevated" subtitle="this is the card default appearance"></vwc-card>
  <vwc-card appearance="outlined" headline="Outlined" subtitle="this appearance set a border to the card same as elevation='0' "></vwc-card>
  <vwc-card appearance="ghost" headline="Ghost" subtitle="present the card template without background or shadow"></vwc-card>
</vwc-layout>

Elevation

Control the elevation depth by adding the elevation attribute.
The elevation is applied only with the default appearance (appearance='elevated').

<script setup lang="ts">
import { VCard, VLayout } from '@vonage/vivid-api-vue';
</script>

<template>
  <VLayout>
    <VCard elevation="2" headline="Elevation 2" class="card-elevated"></VCard>
    <VCard elevation="4" headline="Elevation 4 - default" class="card-elevated"></VCard>
    <VCard elevation="8" headline="Elevation 8" class="card-elevated"></VCard>
    <VCard elevation="12" headline="Elevation 12" class="card-elevated"></VCard>
    <VCard elevation="16" headline="Elevation 16" class="card-elevated"></VCard>
    <VCard elevation="24" headline="Elevation 24" class="card-elevated"></VCard>
  </VLayout>
</template>

<style scoped>
.card-elevated {
  margin: 16px;
}
</style>

<vwc-layout>
  <vwc-card elevation="2" headline="Elevation 2" class="card-elevated"></vwc-card>
  <vwc-card elevation="4" headline="Elevation 4 - default" class="card-elevated"></vwc-card>
  <vwc-card elevation="8" headline="Elevation 8" class="card-elevated"></vwc-card>
  <vwc-card elevation="12" headline="Elevation 12" class="card-elevated"></vwc-card>
  <vwc-card elevation="16" headline="Elevation 16" class="card-elevated"></vwc-card>
  <vwc-card elevation="24" headline="Elevation 24" class="card-elevated"></vwc-card>
</vwc-layout>

<style>
  .card-elevated {
    margin: 16px;
  }
</style>