Header

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

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

<your-prefix-header>Header content</your-prefix-header>

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

<template>
  <VHeader> Header content </VHeader>
</template>

<vwc-header>Header content</vwc-header>

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

<template>
  <VHeader>
    <VButton slot="action-items">
      <template #icon><VBrand name="twitter" variant="mono"></VBrand></template>
    </VButton>
    <VButton slot="action-items">
      <template #icon><VBrand name="facebook" variant="mono"></VBrand></template>
    </VButton>
    <VButton slot="action-items">
      <template #icon><VIcon name="heart-solid"></VIcon></template>
    </VButton>
  </VHeader>
</template>

<vwc-header>
  <vwc-button slot="action-items">
    <vwc-icon slot="icon" name="twitter-mono"></vwc-icon>
  </vwc-button>
  <vwc-button slot="action-items">
    <vwc-icon slot="icon" name="facebook-mono"></vwc-icon>
  </vwc-button>
  <vwc-button slot="action-items">
    <vwc-icon slot="icon" name="heart-solid"></vwc-icon>
  </vwc-button>
</vwc-header>

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

<template>
  <VHeader>
    Header content
    <main slot="app-content">
      <VLayout gutters="small">Application content</VLayout>
    </main>
  </VHeader>
</template>

<vwc-header>
  Header content
  <main slot="app-content">
    <vwc-layout gutters="small">Application content</vwc-layout>
  </main>
</vwc-header>

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

<template>
  <VHeader class="header">
    Header content

      <main slot="app-content">
        <VLayout column-basis="block" gutters="medium"> Application content </VLayout>
      </main>
    </VHeader>

</template>

<style scoped>
.header::part(base) {
  position: fixed;
  top: 0;
}

main {
  padding-block-start: var(--vvd-header-block-size);
}
</style>

<style>
  .header::part(base) {
    position: fixed;
    top: 0;
  }

  main {
    padding-block-start: var(--vvd-header-block-size);
  }
</style>

<vwc-header class="header">
  Header content

  <main slot="app-content">
    <vwc-layout column-basis="block" gutters="medium"> Application content </vwc-layout>
  </main>
</vwc-header>

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

<template>
  <VHeader class="header">Header content</VHeader>
</template>

<style scoped>
.header {
  --header-bg-color: var(--vvd-color-neutral-200);
}
</style>

<style>
  .header {
    --header-bg-color: var(--vvd-color-neutral-200);
  }
</style>

<vwc-header class="header">Header content</vwc-header>

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

<template>
  <VHeader alternate class="header">
    Header content
    <main slot="app-content">
      <VLayout gutters="small" column-basis="block">
        <h2>Scroll this window</h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante est, ac porta sapien rutrum in. Fusce id pulvinar massa. In est erat, gravida sed velit id, tempus tempus metus. Proin mollis auctor orci. Curabitur vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor sodales. Vestibulum vel rutrum leo, a convallis tellus. Aliquam vel ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut ligula faucibus ante pellentesque condimentum sit amet ac dui. Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id tortor at ornare.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante est, ac porta sapien rutrum in. Fusce id pulvinar massa. In est erat, gravida sed velit id, tempus tempus metus. Proin mollis auctor orci. Curabitur vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor sodales. Vestibulum vel rutrum leo, a convallis tellus. Aliquam vel ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut ligula faucibus ante pellentesque condimentum sit amet ac dui. Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id tortor at ornare.</p>
        </VLayout>
      </main>
    </VHeader>

</template>

<style scoped>
.header::part(base) {
  position: fixed;
  top: 0;
  z-index: 2;
}
main {
  padding-block-start: var(--vvd-header-block-size);
}
</style>

<style>
  .header::part(base) {
    position: fixed;
    top: 0;
    z-index: 2;
  }
  main {
    padding-block-start: var(--vvd-header-block-size);
  }
</style>
<vwc-header alternate class="header">
  Header content
  <main slot="app-content">
    <vwc-layout gutters="small" column-basis="block">
      <h2>Scroll this window</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante est, ac porta sapien rutrum in. Fusce id pulvinar massa. In est erat, gravida sed velit id, tempus tempus metus. Proin mollis auctor orci. Curabitur vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor sodales. Vestibulum vel rutrum leo, a convallis tellus. Aliquam vel ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut ligula faucibus ante pellentesque condimentum sit amet ac dui. Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id tortor at ornare.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante est, ac porta sapien rutrum in. Fusce id pulvinar massa. In est erat, gravida sed velit id, tempus tempus metus. Proin mollis auctor orci. Curabitur vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor sodales. Vestibulum vel rutrum leo, a convallis tellus. Aliquam vel ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut ligula faucibus ante pellentesque condimentum sit amet ac dui. Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id tortor at ornare.</p>
    </vwc-layout>
  </main>
</vwc-header>