Card
Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Basic example
vue
<template>
<div>
<Card title="Card title" subtitle="This is a subtitle">
Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod
tempor incididun ut .
</Card>
</div>
</template>
<script setup>
import Card from "@/components/Card";
</script>
Card with header slot
vue
<template>
<div>
<Card title="Card title" subtitle="This is a subtitle">
<template #header> action button </template>
Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod
tempor incididun ut .
</Card>
</div>
</template>
Card with Image
vue
<template>
<div>
<Card
title="Card title"
subtitle="This is a subtitle"
img="image-lin.png"
imaClass="rounded-md"
noborder
>
Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod
tempor incididun ut .
<div class="mt-4 space-x-4">
<router-link to="#" class="btn-link">Learn more</router-link>
<router-link to="#" class="btn-link">Another link</router-link>
</div>
</Card>
</div>
</template>
Card with custom class
You can use className props for custom class. For example: className="bg-primary-500", className="bg-secondary-500", className="bg-success-500", className="bg-danger-500", className="bg-warning-500", className="bg-info-500",
vue
<template>
<div>
<Card
className="bg-primary-500"
title="Card title"
subtitle="This is a subtitle"
>
Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod
tempor incididun ut .
<div class="mt-4 space-x-4">
<router-link to="#" class="btn-link">Learn more</router-link>
<router-link to="#" class="btn-link">Another link</router-link>
</div>
</Card>
</div>
</template>