register modal header component

src/components/ModalHeader.vue

@@ -0,0 +1,40 @@
+<template lang="html">
+  <header>
+    <div>
+      <h5 class="mb-0">{{ title }}</h5>
+      <small>{{ subtitle }}</small>
+    </div>
+
+    <div class="actions">
+      <slot />
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    subtitle: String,
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+header {
+  display: grid;
+  width: 100%;
+  align-items: center;
+  grid-template-columns: auto auto;
+}
+
+h5 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.actions {
+  margin-left: auto;
+}
+</style>

src/main.js

@@ -5,6 +5,7 @@ import VueAxios from 'vue-axios';
 import VueFire from 'vuefire';
 import VueI18n from 'vue-i18n';
 import Icon from '@/components/Icon';
+import ModalHeader from '@/components/ModalHeader';
 import axios from 'axios';
 import VueAnalytics from 'vue-analytics';
 import Raven from 'raven-js';
@@ -31,6 +32,7 @@ Vue.use(VueAxios, axios);
 Vue.use(VueFire);
 Vue.use(VueI18n);
 Vue.component('icon', Icon);
+Vue.component('modal-header', ModalHeader);
 
 if (process.env.NODE_ENV !== 'development') {
   Raven