Cards
Basic cards Preview link
Basic Card
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
Inside Your template tags add
<Card :headerTitle="'Basic Card'" :border="true" :padding="false">
<template #header5>
<p class="f-m-light mt-1">This is a simple basic card using anywhere.</p>
</template>
<p class="mb-0">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
</p>
</Card>Inside Your script tags add
import { defineAsyncComponent } from 'vue';
const Card = defineAsyncComponent(() => import('@/components/shared/card/Card.vue'));Draggable cards Preview link
npm i vuedraggableInside Your template tags add
<div class="container-fluid">
<draggable
v-model="cards"
:group="{ name: 'nested', pull: false, put: false }"
item-key="id"
tag="div"
:component-data="{ class: 'row' }"
>
<template #item="{ element }">
<div class="col-xxl-4 col-md-6">
<div :class="`card height-equal ${element.cardClass}`">
<div :class="`card-header ${element.cardHeaderClass}`">
<h5 :class="`${element.headingClass}`">{{ element.title }}</h5>
<template v-if="element.cardType == 'simple'">
<p class="mt-1 f-m-light">You can draggable cards anywhere.</p>
</template>
</div>
<div :class="`card-body ${element.cardBodyClass}`">
<ul :class="`list-group ${element.class}`">
<template v-for="(item, index) in element.details" :key="index">
<template v-if="item.list">
<li
class="list-group-item"
:class="{ 'active bg-warning-light': item.active }"
>
<template v-if="item.icon">
<i :class="`icofont icofont-${item.icon}`"></i>
</template>
<template v-else>
<i class="icofont icofont-arrow-right"></i>
</template>
{{ item.name }}
</li>
</template>
</template>
</ul>
<template v-for="(item, index) in element.details" :key="index">
<template v-if="element.cardType == 'classic'">
<h6 :class="`pb-2 ${item.titleClass}`">{{ item.title }}</h6>
<p :class="`mb-0 c-light ${item.descriptionClass}`">
{{ item.description }}
</p>
</template>
</template>
</div>
<template v-if="element.cardType == 'classic'">
<div :class="`card-footer ${element.cardFooterClass}`">
<h6 :class="`mb-0 text-end ${element.footerClass}`">Cuba Theme</h6>
</div>
</template>
</div>
</div>
</template>
</draggable>
</div>
Inside Your script tags add
import { ref } from "vue";
import { list } from "@/core/data/bonusUI/draggableCard";
import { List } from "@/types/bonusUI";
let cards = ref(list);
Inside Your json tags add
import type { List } from "@/types/bonusUI";
export const list: List[] = [
{
title: "Basic Card",
cardType: "simple",
cardClass: "list-with-icon",
details: [
{
name: "Logo design",
list: true,
},
{
name: "Web development",
list: true,
},
{
name: "E-commerce",
list: true,
},
{
name: "SEO",
list: true,
},
],
},
{
title: "Default Card",
cardType: "simple",
details: [
{
name: "UI Kits",
active: true,
list: true,
},
{
name: "Wow Animations",
active: false,
list: true,
},
{
name: "Apex Charts",
active: false,
list: true,
},
{
name: "Starter Kits",
active: false,
list: true,
},
],
},
{
title: "Flat Card",
class: "list-group-flush",
cardClass: "b-r-0 list-with-icon",
cardType: "simple",
details: [
{
name: "Charts",
icon: "chart-histogram-alt",
list: true,
},
{
name: "Alerts",
icon: "warning",
list: true,
},
{
name: "Cart",
icon: "cart",
list: true,
},
{
name: "Checkout",
icon: "checked",
list: true,
},
],
},
{
title: "Info Color Header",
cardHeaderClass: "bg-info",
headingClass: "text-white",
cardType: "classic",
details: [
{
title: " Web Designer ",
description:
"By following instructions and adding your own unique twist and style, you may apply your imagination as a web designer. The majority of the tasks you'll be assigned will have a specific due date and work description, but the reason you were employed was because they need a specialist to inject some much-needed creativity.",
},
],
},
{
title: "Info Color Body",
cardType: "classic",
cardBodyClass: "bg-info",
details: [
{
title: " UX Designer ",
description:
'It is the responsibility of the UX designer to make a product or service useful, pleasurable, and accessible. The word "user experience" is used by various industries, although it is most frequently related to digital design for websites and mobile applications.There is no need for coding in user experience design.',
titleClass: "text-white",
descriptionClass: "text-white",
},
],
},
{
title: "Info Color Footer",
cardType: "classic",
cardFooterClass: "bg-info",
footerClass: "text-white",
details: [
{
title: " Web Developer ",
description:
"A programmer who uses the client-server architecture to create World Wide Web applications is known as a web developer. The apps generally employ any general-purpose programming language on the server and HTML, CSS, and javaScript on the client.",
},
],
},
];