pertec-card

A flexible and beautiful Vue 3 card component with multiple variants and styling options.

Features

• 🎨 Beautiful design with light/dark mode support
• 🧩 Modular components - use only what you need
• 📱 Responsive design
• 🎭 Multiple variants (default, header)
• 🚀 Tree-shakeable

Installation

npm install pertec-card

Usage

Basic Usage

<template>
  <PertecCard>
    <PertecCardHeader>
      <PertecCardTitle>Card Title</PertecCardTitle>
      <PertecCardSubtitle>Card subtitle</PertecCardSubtitle>
    </PertecCardHeader>
    <PertecCardContent>
      <p>Your content here...</p>
    </PertecCardContent>
    <PertecCardFooter>
      <button>Action</button>
    </PertecCardFooter>
  </PertecCard>
</template>

<script>
import { 
  PertecCard,
  PertecCardHeader,
  PertecCardTitle,
  PertecCardSubtitle,
  PertecCardContent,
  PertecCardFooter
} from 'pertec-card'
import 'pertec-card/style.css'

export default {
  components: {
    PertecCard,
    PertecCardHeader,
    PertecCardTitle,
    PertecCardSubtitle,
    PertecCardContent,
    PertecCardFooter
  }
}
</script>

Header Variant with Props

<template>
  <PertecCard 
    variant="header" 
    title="My Title" 
    subtitle="My Subtitle"
  >
    <PertecCardContent>
      <p>Content goes here...</p>
    </PertecCardContent>
  </PertecCard>
</template>

API

PertecCard Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' \| 'header' | 'default' | Card variant | | title | string | undefined | Title (only for header variant) | | subtitle | string | undefined | Subtitle (only for header variant) |

Components

• PertecCard - Main card container
• PertecCardHeader - Card header section
• PertecCardTitle - Card title (h3 element)
• PertecCardSubtitle - Card subtitle (p element)
• PertecCardContent - Card content area
• PertecCardFooter - Card footer section

Styling

The component includes default styles that support both light and dark modes. Import the CSS file:

import '@pertec/card/style.css'

Custom Styling

You can override styles by targeting the CSS classes:

• .card - Main card container
• .cardHeader - Header section
• .cardTitle - Title element
• .cardSubtitle - Subtitle element
• .cardContent - Content area
• .cardFooter - Footer section

License

MIT