<section class="demo-section">
  <h2>Divider</h2>

  <p>Default horizontal divider:</p>
  <hr class="divider">

  <p>Strong variant:</p>
  <hr class="divider" data-variant="strong">

  <p>Vertical divider:</p>
  <span>Before</span>
  <hr class="divider" data-orientation="vertical">
  <span>After</span>

  <h3>Vue divider</h3>
  <div id="vue-divider-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnDivider } from "/vue/index.js";

    createApp({
      components: { GnDivider },
      template: `
        <div class="demo-row" style="align-items: center;">
          <span>Before</span>
          <gn-divider orientation="vertical"></gn-divider>
          <span>After</span>
        </div>
      `
    }).mount("#vue-divider-app");
  </script>
</section>