<div class="hero is-fullheight">
  <div class="hero-body">
    <div class="container is-max-desktop">

      <div id="app">

        <div class="columns">
          <div class="column">
            <my-card>
              <template v-slot:title>A Pair of Quotes</template>

              <p class="block">
                This section uses Bulma's <code>.content</code> element
                so the following list is styled nicely.
              </p>

              <ul>
                <li>You are what you eat</li>
                <li>The way to get started is to quit talking and begin doing.</li>
              </ul>

            </my-card>
          </div>
          <div class="column">
            <my-card>
              <template v-slot:header>
                <p class="card-header-title has-text-danger">
                  <slot name="title">Custom header markup</slot>
                </p>
              </template>

              <template v-slot:content>

                <p class="block">
                  Using the <code>header</code> slot instead of <code>title</code>
                  completely overrides the header's content
                  and allows us to include custom HTML, styling, etc.
                </p>

                <p class="block">
                  We have also overriden the whole <code>content</code> slot,
                  so the following list is not syled:
                  <ul>
                    <li>list item 1</li>
                    <li>list item two</li>
                  </ul>
                </p>

              </template>

              <template v-slot:default>
                Note that this will never be seen,
                as the <code>content</code> slot has been overridden.
              </template>

              <template v-slot:author>
                dakujem
              </template>

            </my-card>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

Vue.component("my-card", {
  template: `
<div class="card">
  <header class="card-header">
    <slot name="header">
      <p class="card-header-title">
        <slot name="title">Card Component</slot>
      </p>
      <slot name="header-icon">
        <a href="#" class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </a>
      </slot>
    </slot>
  </header>
  <slot name="body">
    <div class="card-content">
      <slot name="content">

        <div class="content">
          <slot name="default">
            Lorem ipsum dolor shit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
          </slot>
        </div>

      </slot>
    </div>
    <div class="card-content has-text-right">
      <em>
        <slot name="author">Anonymous</slot>
      </em>
    </div>
  </slot>
</div>
  `
});

new Vue({
  el: "#app"
});