@simularge/card v1.0.3

Simularge Card

A lightweight, customizable card component built with vanilla JavaScript using Web Components. No framework dependencies required!

Features

• 🎨 Quasar styling
• 📝 Custom text/subtitle/content/image/separator
• 🎯 Framework agnostic
• 🪶 Lightweight with zero dependencies
• 🎭 Shadow DOM for style encapsulation

Installation

npm install @simularge/card

Usage

1. Import the component in your JavaScript file:

import '@simularge/card';

2. Use the component in your HTML:

<!-- Card with image -->
<simularge-card
    title="Our Changing Planet"
    subtitle="by John Doe"
    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    image="https://cdn.quasar.dev/img/mountains.jpg"
></simularge-card>

<!-- Card with separator -->
<simularge-card
    title="Welcome to Simularge"
    subtitle="Featured Article"
    content="This is a custom card showcasing the text-only layout. It still looks great without an image!"
    separator
></simularge-card>

Props

Styling

The card uses Shadow DOM for style encapsulation, ensuring that your application styles don't interfere with the card's appearance. The component comes with built-in styles including:

• Hover and active states
• Smooth transitions
• Modern, clean design

Browser Support

Works in all modern browsers that support Web Components:

• Chrome
• Firefox
• Safari
• Edge

License

MIT