Divider

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

<template>
  <VActionGroup appearance="fieldset">
    <VButton>
      <template #icon><VIcon name="transfer-line" /></template>
    </VButton>
    <VDivider orientation="vertical" />
    <VButton>
      <template #icon><VIcon name="compose-line" /></template>
    </VButton>
  </VActionGroup>
</template>

<vwc-action-group appearance="fieldset">
  <vwc-button>
    <vwc-icon slot="icon" name="transfer-line"></vwc-icon>
  </vwc-button>
  <vwc-divider orientation="vertical"></vwc-divider>
  <vwc-button>
    <vwc-icon slot="icon" name="compose-line"></vwc-icon>
  </vwc-button>
</vwc-action-group>

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

<template>
  <VCard class="card">
    <template #main>
      <VLayout column-basis="block" gutters="small">
        Choose the button you like best in this card :)

          <VDivider />
        </VLayout>
      </template>
      <template #footer>
        <div class="demo-footer">
          <VButton label="Cancel" appearance="outlined" />
          <VButton label="Submit" appearance="filled" />
        </div>
      </template>
    </VCard>

</template>

<style>
.card {
  width: 400px;
}
.demo-footer {
  display: flex;
  column-gap: 8px;
  justify-content: flex-end;
}
</style>

<vwc-card class="card">
  <vwc-layout column-basis="block" gutters="small" slot="main">
    Choose the button you like best in this card :)

    <vwc-divider></vwc-divider>
  </vwc-layout>
  <div class="demo-footer" slot="footer">
    <vwc-button label="Cancel" appearance="outlined"></vwc-button>
    <vwc-button label="Submit" appearance="filled"></vwc-button>
  </div>
</vwc-card>

<style>
  .card {
    width: 400px;
  }
  .demo-footer {
    display: flex;
    column-gap: 8px;
    justify-content: flex-end;
  }
</style>

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

<template>
  <VLayout class="layout">
    <VDivider role="presentation" class="divider" />
    More Info
    <VDivider role="presentation" class="divider" />
  </VLayout>
</template>

<style>
.layout {
  --layout-grid-template-columns: 1fr auto 1fr;
}

.divider {
  display: flex;
  align-items: center;
}
</style>

<vwc-layout class="layout">
  <vwc-divider role="presentation" class="divider"></vwc-divider>
  More Info
  <vwc-divider role="presentation" class="divider"></vwc-divider>
</vwc-layout>

<style>
  .layout {
    --layout-grid-template-columns: 1fr auto 1fr;
  }

  .divider {
    display: flex;
    align-items: center;
  }
</style>