Header
The header component can be used to display a header at the top of a page or section.
<script setup lang="ts">import { VHeader } from '@vonage/vivid-api-vue';</script>
<template> <VHeader>Header content</VHeader></template><vwc-header>Header content</vwc-header>The alternate attribute applies an alternate color scheme, which is in contrast with the current global theme. It will also apply to any slotted Vivid components.
Read more about the alternative attribute
<script setup lang="ts">import { VHeader } from '@vonage/vivid-api-vue';</script>
<template> <VHeader alternate>Header content</VHeader></template><vwc-header alternate>Header content</vwc-header>The elevation-shadow attribute applies a shadow to the Header.
<script setup lang="ts">import { VHeader } from '@vonage/vivid-api-vue';</script>
<template> <VHeader elevation-shadow> Header content <main slot="app-content"><br /></main> </VHeader></template><vwc-header elevation-shadow> Header content <main slot="app-content"> <br /> </main></vwc-header>