Add document form component

client/src/components/content-forms/DocumentForm.vue

@@ -1,15 +1,63 @@
 <template>
   <div class="document-form">
-    <h1>Document Form</h1>
+
+    <info-icon class="document-form__help-icon"></info-icon>
+    <p class="document-form__help-description">
+      Sie können Dokumente auf <a class="document-form__platform-link" href="https://onedrive.live.com/"
+                                  target="_blank">OneDrive</a> hochladen und anschliessen einen Link hier einfügen.
+    </p>
+
+    <input class="document-form__document-link skillbox-input"
+           placeholder="URL einfügen...">
+
   </div>
 </template>
 
 <script>
+  import InfoIcon from '@/components/icons/InfoIcon';
+
+  export default {
+    components: {
+      InfoIcon
+    }
+  }
 </script>
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
 
   .document-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 20px;
+    align-items: center;
+
+    &__help-icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-brand;
+    }
+
+    &__help-description {
+      font-family: $sans-serif-font-family;
+      font-size: toRem(17px);
+      font-weight: 500;
+    }
+
+    &__platform-link {
+      font-family: $sans-serif-font-family;
+      text-decoration: underline;
+      font-weight: 500;
+      font-size: toRem(17px);
+    }
+
+    &__document-link {
+      grid-column: 1 / span 2;
+      width: $modal-input-width
+    }
+
   }
 </style>