Implemented Card Component

src/AppMenu.vue

@@ -48,6 +48,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}">
                 <div>
                     <router-link to="/accordion">&#9679; Accordion</router-link>
+                    <router-link to="/card">&#9679; Card</router-link>
                     <router-link to="/panel">&#9679; Panel</router-link>
                     <router-link to="/fieldset">&#9679; Fieldset</router-link>
                     <router-link to="/flexgrid">&#9679; FlexGrid</router-link>

src/assets/styles/primevue.css

@@ -1,6 +1,7 @@
 @import '../../components/common/Common.css';
 @import '../../components/accordion/Accordion.css';
 @import '../../components/button/Button.css';
+@import '../../components/card/Card.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';

src/components/card/Card.css

@@ -0,0 +1,24 @@
+.p-card-header img {
+    width: 100%;
+}
+
+.p-card-body {
+    padding: 1em;
+}
+
+.p-card-title {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-bottom: .5em;
+}
+
+.p-card-subtitle {
+    opacity: .7;
+    margin-bottom: .5em;
+    margin-top: -.25em;
+    font-weight: bold;
+}
+
+.p-card-footer {
+    padding-top: 1em;
+}

src/components/card/Card.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="p-card p-component ui-card-shadow" style="width: 360px;">
+        <div class="p-card-header" v-if="$slots.header">
+            <slot name="header"></slot>
+        </div>
+        <div class="p-card-body">
+            <div class="p-card-title" v-if="$slots.title"><slot name="title"></slot></div>
+            <div class="p-card-subtitle" v-if="$slots.subtitle"><slot name="subtitle"></slot></div>
+            <div class="p-card-content">
+                <slot name="content"></slot>
+            </div>
+            <div class="p-card-footer" v-if="$slots.footer">
+                <slot name="footer"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/main.js

@@ -4,6 +4,7 @@ import router from './router';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
+import Card from './components/card/Card';
 import Checkbox from './components/checkbox/Checkbox';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
@@ -26,6 +27,7 @@ Vue.config.productionTip = false;
 Vue.component('p-accordion', Accordion);
 Vue.component('p-accordionTab', AccordionTab);
 Vue.component('p-button', Button);
+Vue.component('p-card', Card);
 Vue.component('p-checkbox', Checkbox);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);

src/router.js

@@ -21,6 +21,11 @@ export default new Router({
         name: 'button',
         component: () => import('./views/button/ButtonDemo.vue')
     },
+    {
+        path: '/card',
+        name: 'card',
+        component: () => import('./views/card/CardDemo.vue')
+    },
     {
         path: '/checkbox',
         name: 'checkbox',

src/views/card/CardDemo.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Card</h1>
+                <p>Card is a flexible container component..</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-card style="width: 25em; margin-bottom: 2em">
+                <template slot="title">
+                    Simple Card
+                </template>
+                <template slot="content">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </template>
+            </p-card>
+
+            <p-card style="width: 25em">
+                <template slot="header">
+                    <img alt="user header" src="demo/images/usercard.png">
+                </template>
+                <template slot="title">
+                    Advanced Card
+                </template>
+                <template slot="content">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </template>
+                <template slot="footer">
+                    <p-button icon="pi pi-check" label="Save" class="p-button-raised" />
+                    <p-button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em"/>
+                </template>
+            </p-card>
+        </div>
+    </div>
+</template>