💳 exportable-card

A TypeScript-friendly, customizable, and responsive Web Component that renders a flexible card layout with support for slots, themes, size, layout direction, and device responsiveness. Works out of the box with vanilla HTML and is compatible with major frameworks (React, Vue, Svelte, Angular).

🔧 Installation

npm i card-component-simpli

🚀 Usage

➤ Vanilla HTML / JS

<!-- Import once -->
<script type="module">
  import './Card.ts'; // Adjust path as needed
</script>

<exportable-card
  title="Applied Data Science with Python"
  subtitle="Certification"
  tags="Data wrangling,Data exploration,Data visualization,+6"
  rating="4.5"
  rating-count="19046"
  duration="5 Weeks"
  cohort-date="June 22nd 2025"
  badge="5 days left!"
  badge-color="#ff9800"
  image-url="/path/to/image.png"
  logo-url="/path/to/logo.png"
  size="large"
  theme="light"
  layout="horizontal"
  days-left="5"
>
  <span slot="title">Applied Data Science with Python</span>
  <span slot="subtitle">Certification</span>
  <span slot="tags">Data wrangling, Data exploration, Data visualization, +6</span>
  <span slot="duration">5 Weeks</span>
  <span slot="cohort-date">June 22nd 2025</span>
</exportable-card>

⚙️ Attributes

| Attribute | Type | Description | | --------------| --------------------------- | ------------------------------------------------ | | title | string | Card title (default or slot override) | | subtitle | string | Card subtitle (default or slot override) | | tags | string (comma-separated) | Tags to display | | rating | number | Star rating value | | rating-count| number | Number of ratings | | duration | string | Duration text | | cohort-date | string | Next cohort date | | badge | string | Badge text (e.g., "5 days left!") | | badge-color | string (CSS color) | Badge background color | | image-url | string (URL) | Main image URL | | logo-url | string (URL) | Logo image URL | | size | small | medium | large | custom | Card size preset | | theme | light | dark | Theme (background/text color) | | layout | horizontal | vertical | Card layout direction | | days-left | number | Days left badge (shows if provided) |

🧩 Slots

| Slot Name | Description | | -------------- | ------------------------------------------- | | title | Custom title (overrides attribute) | | subtitle | Custom subtitle (overrides attribute) | | tags | Custom tags (overrides attribute) | | duration | Custom duration (overrides attribute) | | cohort-date | Custom cohort date (overrides attribute) | | default | Extra content (e.g. button, image, etc.) |

💥 Events

This component does not emit custom events by default. You can extend it to add click or other events as needed.

🎯 Framework Wrappers

This Web Component is framework-agnostic. You can use it with:

➤ React

import './Card.ts';

<exportable-card title="Hello" size="medium" theme="dark">
  <span slot="title">Hello from React</span>
</exportable-card>

✅ Use useRef and useEffect if you want to dynamically set attributes.

➤ Vue (3.x)

<script setup>
import './Card.ts';
</script>

<template>
  <exportable-card title="Vue Card" size="small" theme="light">
    <span slot="title">Hello Vue</span>
  </exportable-card>
</template>

➤ Svelte

<script>
  import './Card.ts';
</script>

<exportable-card title="Svelte" size="large" theme="dark">
  <span slot="title">Hi Svelte</span>
</exportable-card>

➤ Angular

1. Import in polyfills.ts:

import './Card.ts';

2. Add schema in AppModule:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

3. Use in template:

<exportable-card title="Angular" size="medium" theme="light">
  <span slot="title">Hello Angular</span>
</exportable-card>

🧪 Development

Local Dev

npm install
npm run dev

Build for Production

npm run build

📃 License

MIT © 2025 Ashok Kumar

💡 Want More?

✅ Grid of cards? ✅ Image/header/footer support? ✅ React/Vue/Svelte wrapper scaffolding? ✅ Storybook preview?

Let us know in the issues tab or open a PR!