Card

Bootstrap 5-based container card component with optional title and subtitle support.

Description

Card is a wrapper around Bootstrap 5’s card class that provides a consistent structure for content blocks: card body and optional title and subtitle. It uses shadow-sm by default for a light elevation.

Location: @/components/interface/Bootstrap/Card.vue

Props

Prop	Type	Required	Default	Description
class	String	❌ No	''	Additional CSS classes for the card element
classBody	String	❌ No	''	Additional CSS classes for the card-body
styles	String	❌ No	''	Inline styles for the card element (e.g. width, height)
title	String	❌ No	''	Title shown above the content (plain text)
subtitle	String	❌ No	''	Subtitle shown below the title, with text-muted styling

Slots

Default

Main card content (inside card-body). The title and subtitle, if present, are rendered above this content.

<Card title="Summary" subtitle="Last month data">
  <p>Card content.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</Card>

Rendered Structure

• Container: div.card.shadow-sm (+ class)
• Body: div.card-body (+ classBody)
• If title: div.font-14.fw-bold with the title
• If subtitle: div.font-12.text-muted.mb-3 with the subtitle
• Default slot follows

Usage Examples

Basic Example

<template>
  <Card>
    <p>Content without title.</p>
  </Card>
</template>

<script setup>
import Card from '@/components/interface/Bootstrap/Card.vue';
</script>

Example with Title and Subtitle

<template>
  <Card
    title="Billing"
    subtitle="Current period summary"
  >
    <div class="row">
      <div class="col-6">Total: {{ total }}</div>
      <div class="col-6">Pending: {{ pending }}</div>
    </div>
  </Card>
</template>

<script setup>
import Card from '@/components/interface/Bootstrap/Card.vue';

const total = ref(0);
const pending = ref(0);
</script>

Example with Classes and Styles

<template>
  <Card
    class="border-primary"
    classBody="p-4"
    styles="max-width: 400px;"
  >
    <p>Card with max width and primary border.</p>
  </Card>
</template>

Example with Translations

<template>
  <Card
    :title="t('dashboard.kpi.title')"
    :subtitle="t('dashboard.kpi.subtitle')"
  >
    <KpiCard :items="kpiItems" />
  </Card>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import Card from '@/components/interface/Bootstrap/Card.vue';
import KpiCard from '@/components/interface/Cards/Kpi.card.vue';

const { t } = useI18n();
const kpiItems = ref([]);
</script>

Important Notes

1. Title and subtitle: They are plain text (props). For HTML or dynamic translations, pass the result of t() or a computed to title/subtitle.

2. Styles: The styles prop is applied to the card element; for body styles use classBody.

3. Bootstrap: Uses Bootstrap 5 classes (card, card-body, utilities). Compatible with the project’s grid and utility system.

4. Typical use: Used in dashboards, summaries, form blocks, and containers for lists or small tables within a view.