<section class="demo-section">
  <h2>Page Header</h2>

  <div class="demo-row">
    <div id="vue-page-header-app" class="vue-mount"></div>
  </div>

  <script type="module">
    import { createApp } from "vue";
    import { GnPageHeader, GnButton, GnBadge } from "/vue/index.js";

    createApp({
      components: { GnPageHeader, GnButton, GnBadge },
      template: document.getElementById("vue-page-header-template").innerHTML
    }).mount("#vue-page-header-app");
  </script>

  <script type="text/template" id="vue-page-header-template">
    <gn-page-header
      kicker="Settings"
      title="Account preferences"
      subtitle="Manage your profile, notifications and security settings."
    >
      <template #meta>
        <gn-badge variant="accent">Beta</gn-badge>
      </template>
      <template #actions>
        <gn-button variant="secondary" size="sm">Cancel</gn-button>
        <gn-button variant="primary" size="sm">Save changes</gn-button>
      </template>
    </gn-page-header>
  </script>
</section>