From 672fe2beab0ee50132b7c0c2f04c3eb60ec00bee Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 20 Aug 2020 21:14:44 +0200
Subject: [PATCH] add name to demo

---
 docs/src/components/Demo/index.vue  |  9 +++++++--
 docs/src/components/Demo/style.scss | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 1f3bb2d1..28619e6b 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -21,8 +21,13 @@
           <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
         </div>
       </div>
-      <div class="demo__link">
-        <a :href="githubUrl" target="_blank">Edit on GitHub</a>
+      <div class="demo__meta">
+        <div class="demo__name">
+          {{ this.name }}
+        </div>
+        <a class="demo__link" :href="githubUrl" target="_blank">
+          Edit on GitHub →
+        </a>
       </div>
     </template>
     <div v-else class="demo__error">
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 78fb02e6..4c8f8aba 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -49,8 +49,19 @@
     }
   }
 
-  &__link {
+  &__meta {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
     padding: 1rem 1.5rem;
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-top-width: 0;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &__link {
+    text-align: right;
   }
 
   &__error {