Note

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

<template>
  <VNote headline="Headline Text" />
</template>

<vwc-note headline="Headline Text"></vwc-note>

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

<template>
  <VLayout row-spacing="medium">
    <VNote connotation="accent" headline="Accent Note (default)">
      <template #icon>
        <VIcon name="megaphone-line" label="Announcement:" />
      </template>
    </VNote>
    <VNote connotation="alert" headline="Alert Note">
      <template #icon>
        <VIcon name="error-line" label="Alert:" />
      </template>
    </VNote>
    <VNote connotation="success" headline="Success Note">
      <template #icon>
        <VIcon name="check-circle-line" label="Success" />
      </template>
    </VNote>
    <VNote connotation="warning" headline="Warning Note">
      <template #icon>
        <VIcon name="warning-line" label="Warning:" />
      </template>
    </VNote>
    <VNote connotation="information" headline="Information Note">
      <template #icon>
        <VIcon name="info-line" label="Note:" />
      </template>
    </VNote>
    <VNote connotation="announcement" headline="Announcement Note">
      <template #icon>
        <VIcon name="sparkles-line" label="Key Fact:" />
      </template>
    </VNote>
  </VLayout>
</template>

<vwc-layout row-spacing="medium">
  <vwc-note connotation="accent" headline="Accent Note (default)">
    <vwc-icon slot="icon" name="megaphone-line" label="Announcement:"></vwc-icon>
  </vwc-note>
  <vwc-note connotation="alert" headline="Alert Note">
    <vwc-icon slot="icon" name="error-line" label="Alert:"></vwc-icon>
  </vwc-note>
  <vwc-note connotation="success" headline="Success Note">
    <vwc-icon slot="icon" name="check-circle-line" label="Success"></vwc-icon>
  </vwc-note>
  <vwc-note connotation="warning" headline="Warning Note">
    <vwc-icon slot="icon" name="warning-line" label="Warning:"></vwc-icon>
  </vwc-note>
  <vwc-note connotation="information" headline="Information Note">
    <vwc-icon slot="icon" name="info-line" label="Note:"></vwc-icon>
  </vwc-note>
  <vwc-note connotation="announcement" headline="Announcement Note">
    <vwc-icon slot="icon" name="sparkles-line" label="Key Fact:"></vwc-icon>
  </vwc-note>
</vwc-layout>