Add card component

src/colors.scss

@@ -2,3 +2,5 @@ $blue: #027CCB;
 $white: #F7F1FC;
 $lightgray: #D6D6D6;
 $darkgray: #95989A;
+$black: #333333;
+$lightbackground: #F7FAFC;

src/components/AposCard.vue

@@ -0,0 +1,33 @@
+<!--
+    @author JanGut
+    @date 2020-03-08
+-->
+<template>
+    <div class="apos-card">
+        <h3 class="apos-card-title">{{ this.CardTitle }}</h3>
+        <div class="apos-card-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "AposCard",
+
+        props: {
+            cardTitle: String
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "src/colors.scss";
+
+    .apos-card {
+        padding: 1em;
+        border-radius: 4px;
+        box-shadow: rgba(1, 78, 128, 0.1) 0px 2px 8px 0px, rgba(2, 124, 203, 0.1) 0px 15px 16px 0px;
+    }
+
+</style>

src/views/Home.vue

@@ -6,18 +6,28 @@
     <div class="home">
         <apos-input input-hint="Testinput"></apos-input>
         <apos-button @click="onLogout" :is-filled="true">Logout</apos-button>
+        <apos-card card-title="FOO">
+            <p>
+                Taciti. Netus sapien arcu facilisis ornare semper faucibus felis mi, taciti pharetra rhoncus. Viverra blandit nostra curae. Volutpat semper, odio aenean. Tincidunt proin malesuada felis faucibus metus mi purus ullamcorper nisi. Nibh, lacus scelerisque nec, urna nam lacinia nascetur morbi vehicula augue. Gravida urna adipiscing aptent ad vehicula posuere id hac amet. Egestas nulla ac vel penatibus. Odio neque placerat, metus non imperdiet, ornare enim curabitur varius. Conubia curae class dui urna lobortis dis. Quam auctor ve et. Ornare hac congue taciti. Nostra dolor magna. Eros fusce aptent. Nibh adipiscing elit etiam venenatis cum gravida class eni morbi hendrerit. Sit nibh feugiat at, senectus.
+            </p>
+            <p>
+                Suspendisse mus, cras. Odio. Ultrices pulvinar, augue diam per. Metus sodales libero pede et quam. Sodales at dui enim vel sociis imperdiet. Malesuada facilisi, sociis montes cum tempus sapien ipsum nostra at. Cubilia mus id turpis gravida. Congue eget, scelerisque mi. Placerat a, accumsan sit, iaculis velit erat semper. Phasellus ac ve nisl. Cursus senectus, cras, mauris. Natoque cras hymenaeos primis taciti, netus convallis eni, massa nullam. A amet morbi montes justo. Congue nisl et venenatis a, ultricies. Per adipiscing parturient id fermentum metus facilisis suspendisse nec nunc sociis id est nulla.
+            </p>
+        </apos-card>
     </div>
 </template>
 
 <script>
     import AposButton from "components/AposButton";
     import AposInput from "components/AposInput";
+    import AposCard from "components/AposCard";
     export default {
         name: 'Home',
 
 	    components: {
             AposButton,
-            AposInput
+            AposInput,
+            AposCard
 	    },
 
         data() {
@@ -39,7 +49,6 @@
 </script>
 
 <style scoped lang="scss">
-    .home {
-
-    }
+    @import "src/colors";
+
 </style>