Card

<template>
  <VCard headline="I'm a card"></VCard>
</template>

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

<script type="module">
  import { registerCard } from '@vonage/vivid-api';
  registerCard('your-prefix');
</script>

<your-prefix-card headline="I'm a card"></your-prefix-text-card>

<script setup lang="ts">
import { VCard, VTable, VTableHead, VTableBody, VTableRow, VTableCell, VTableHeaderCell } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCard headline="Vivid Card Component (headline)" subtitle="Extra text below the card headline (subtitle)">
    <template #body>
      <VTable>
        <VTableHead>
          <VTableRow>
            <VTableHeaderCell>Name</VTableHeaderCell>
            <VTableHeaderCell>Job Title</VTableHeaderCell>
          </VTableRow>
        </VTableHead>
        <VTableBody>
          <VTableRow>
            <VTableCell>Marty McFly</VTableCell>
            <VTableCell>Student</VTableCell>
          </VTableRow>
          <VTableRow>
            <VTableCell>Dr Emit Brown</VTableCell>
            <VTableCell>Scientist</VTableCell>
          </VTableRow>
        </VTableBody>
      </VTable>
    </template>
  </VCard>
</template>

<vwc-card headline="Vivid Card Component (headline)" subtitle="Extra text below the card headline (subtitle)">
  <vwc-table slot="body">
    <vwc-table-head>
      <vwc-table-row>
        <vwc-table-header-cell>Name</vwc-table-header-cell>
        <vwc-table-header-cell>Job Title</vwc-table-header-cell>
      </vwc-table-row>
    </vwc-table-head>
    <vwc-table-body>
      <vwc-table-row>
        <vwc-table-cell>Marty McFly</vwc-table-cell>
        <vwc-table-cell>Student</vwc-table-cell>
      </vwc-table-row>
      <vwc-table-row>
        <vwc-table-cell>Dr Emit Brown</vwc-table-cell>
        <vwc-table-cell>Scientist</vwc-table-cell>
      </vwc-table-row>
    </vwc-table-body>
  </vwc-table>
</vwc-card>

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

<vwc-card headline="Vivid Card Component" subtitle="Extra text below the card headline">
  <vwc-icon slot="icon" name="chat-line"></vwc-icon>
</vwc-card>

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

<template>
  <VCard headline="Vivid Card Component" subtitle="Extra text below the card headline">
    <template #graphic>
      <VBrand name="android" variant="mono" style="font-size: 44px; color: #A4C439"></VBrand>
    </template>
  </VCard>
</template>

<vwc-card headline="Vivid Card Component" subtitle="Extra text below the card headline">
  <vwc-icon slot="graphic" name="android-mono" style="font-size: 44px; color: #A4C439"></vwc-icon>
</vwc-card>

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

<template>
  <VCard headline="Card with Media Slot" subtitle="Extra text below the card headline" class="card-media">
    <template #media>
      <img src="https://doodleipsum.com/300x150/flat?bg=EB765D&amp;i=7d5ed3bc0c215d1359b2a63d03cf1540" alt="Sitting on Floor" style="width: 100%; height: 150px; object-fit: cover;" />
    </template>
  </VCard>
</template>

<style scoped>
.card-media {
  max-inline-size: 300px;
}
</style>

<vwc-card headline="Card with Media Slot" subtitle="Extra text below the card headline" class="card-media">
  <img slot="media" src="https://doodleipsum.com/300x150/flat?bg=EB765D&amp;i=7d5ed3bc0c215d1359b2a63d03cf1540" alt="Sitting on Floor" style="width: 100%; height: 150px; object-fit: cover;" />
</vwc-card>

<style>
  .card-media {
    max-inline-size: 300px;
  }
</style>

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

<template>
  <VCard headline="Card with Meta Slot" subtitle="Extra text below the card headline">
    <template #meta>
      <VMenu aria-label="Card options" placement="bottom-start">
        <VButton slot="anchor" aria-label="Open menu" appearance="outlined">
          <template #icon><VIcon name="more-vertical-line"></VIcon></template>
        </VButton>
        <VMenuItem text="save card"></VMenuItem>
        <VMenuItem text="remove card"></VMenuItem>
      </VMenu>
    </template>
  </VCard>
</template>

<vwc-card headline="Card with Meta Slot" subtitle="Extra text below the card headline">
  <div slot="meta">
    <vwc-menu aria-label="Card options" placement="bottom-start">
      <vwc-button slot="anchor" aria-label="Open menu" appearance="outlined">
        <vwc-icon slot="icon" name="more-vertical-line"></vwc-icon>
      </vwc-button>
      <vwc-menu-item text="save card"></vwc-menu-item>
      <vwc-menu-item text="remove card"></vwc-menu-item>
    </vwc-menu>
  </div>
</vwc-card>

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

<template>
  <VCard headline="Card with Footer Slot" subtitle="Extra text below the card headline">
    <template #footer>
      <VButton shape="pill" label="Action" appearance="outlined" icon-trailing>
        <template #icon><VIcon name="arrow-bold-right-line"></VIcon></template>
      </VButton>
    </template>
  </VCard>
</template>

<vwc-card headline="Card with Footer Slot" subtitle="Extra text below the card headline">
  <vwc-button slot="footer" shape="pill" label="Action" appearance="outlined" icon-trailing>
    <vwc-icon slot="icon" name="arrow-bold-right-line"></vwc-icon>
  </vwc-button>
</vwc-card>

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

<template>
  <VCard>
    <template #main>
      <VLayout gutters="small"> Assign custom template using "main" slot. </VLayout>
    </template>
  </VCard>
</template>

<vwc-card>
  <vwc-layout gutters="small" slot="main">
    {' '}
    Assign custom template using "main" slot.{' '}
  </vwc-layout>
</vwc-card>

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

<template>
  <VCard class="vwc-card" appearance="outlined" headline="Card with a custom border color" />
</template>

<style scoped>
.vwc-card {
  --card-border-color: #30a849;
  max-inline-size: 42ch;
}
</style>

<vwc-card class="vwc-card" appearance="outlined" headline="Card with a custom border color"></vwc-card>

<style>
  .vwc-card {
    --card-border-color: #30a849;
    max-inline-size: 42ch;
  }
</style>

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

<template>
  <VCard class="vwc-card" headline="Card with long headline that has trim into one line"></VCard>
</template>

<style scoped>
.vwc-card {
  --headline-line-clamp: 1;
  max-inline-size: 42ch;
}
</style>

<vwc-card class="vwc-card" headline="Card with long headline that has trim into one line"></vwc-card>

<style>
  .vwc-card {
    --headline-line-clamp: 1;
    max-inline-size: 42ch;
  }
</style>

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

<template>
  <VCard class="vwc-card" headline="Card with Trimmed Subtitle" subtitle="This subtitle is extremely long and will be trimmed after 2 lines. This way you can control the size of the card."></VCard>
</template>

<style scoped>
.vwc-card {
  --subtitle-line-clamp: 2;
  max-inline-size: 42ch;
}
</style>

<vwc-card class="vwc-card" headline="Card with Trimmed Subtitle" subtitle="This subtitle is extremely long and will be trimmed after 2 lines. This way you can control the size of the card."></vwc-card>

<style>
  .vwc-card {
    --subtitle-line-clamp: 2;
    max-inline-size: 42ch;
  }
</style>