Adding article component

src/Models/data.js

@@ -1,22 +1,23 @@
 export default [
-    {
-        name: 'Alert',
-        components: [
-            { name: 'Notification Pop' },
-            { name: 'Alert' },
-
-        ],
-    },
     // {
-    //     name: 'Cards',
+    //     name: 'Alert',
     //     components: [
-    //         { name: 'Article Card' },
-    //         { name: 'Product' },
-    //         { name: 'Product Evaluation' },
-    //         { name: 'Testimonial' },
-    //         { name: 'User Details' },
+    //         { name: 'Notification Pop' },
+    //         { name: 'Alert' },
+    //
     //     ],
     // },
+    {
+        name: 'Cards',
+        components: [
+            { name: 'Article Card' },
+            { name: 'Article Card With Image' },
+            // { name: 'Product' },
+            // { name: 'Product Evaluation' },
+            // { name: 'Testimonial' },
+            // { name: 'User Details' },
+        ],
+    },
     // {
     //     name: 'Forms',
     //     components: [

src/components/Master.vue

@@ -45,6 +45,7 @@
     import UserDetails from "./UI/Cards/UserDetails";
     import Testimonial from "./UI/Cards/Testimonial";
     import ArticleCard from "./UI/Cards/ArticleCard";
+    import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
     import Product from "./UI/Cards/Product";
     import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
     import Login from "./UI/Forms/Login";
@@ -59,6 +60,7 @@
             UserDetails,
             Testimonial,
             ArticleCard,
+            ArticleCardWithImage,
             Product,
             ProductEvaluation,
             Login,

src/components/UI/Cards/ArticleCardWithImage.vue

@@ -0,0 +1,35 @@
+<template>
+    <div :id="name | toId">
+        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow rounded-lg">
+            <div>
+                <img class="w-full object-cover h-64 shadow-lg" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+                     alt="Article">
+            </div>
+            <div class="p-6">
+                <div>
+                    <span class="text-blue-600 text-xs uppercase">Product</span>
+                    <h2 class="text-gray-800 font-semibold text-xl mt-2">I Built A Successful Blog In One Year</h2>
+                    <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                </div>
+                <div class="flex mt-4 items-center">
+                    <img class="h-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+                         alt="Avatar">
+                    <div class="flex items-center mx-4">
+                        <a href="#" class="text-gray-700 font-semibold">Jone Doe</a>
+                        <span class="text-gray-600 mx-1 text-xs">21 SEP 2015</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Article Card With Image'
+            }
+        }
+    }
+</script>

src/main.js

@@ -7,7 +7,7 @@ Vue.config.productionTip = false;
 Vue.use(VueClipboard);
 
 Vue.filter('toId', (componentName) => {
-  return componentName.toLowerCase().replace(' ', '-')
+  return componentName.toLowerCase().replace(/ /g, '-')
 });
 
 new Vue({