<div id="app">
  <div class="parent">
    <card>
      <h2 slot="header">Vue.js is awesome</h2>

      <p>The Progressive JavaScript Framework</p>
      <p>Another paragraph</p>

      <p slot="footer">Created by Evan You</p>
    </card>
  </div>
</div>

<template id="card-component-template">
  <div class="card">
    <header class="card-header">
      <slot name="header"></slot>
    </header>

    <div class="card-content">
      <slot></slot>
    </div>

    <footer class="card-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
* { padding: 0; margin: 0 }

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-item: center;
  font-family: monospace;
  padding: 40px;
}

.card {
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,.2);
  border-radius: 4px;
  padding: 20px;
  .card-header {
    margin-bottom: 20px;
  }
  .card-footer {
    margin-top: 10px;
    color: #ccc;
  }
}
Vue.component('card', {
  template: '#card-component-template'
})

new Vue({
  el: '#app'
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js