Sticky-card NPM

Sticky Card Component

Sticky Card is a web component that creates a responsive and adaptable sticky card layout. It utilizes the Lit library and is easy to integrate into existing web applications.

Features

Easy integration into existing projects
Responsive design (todo)
Customizable text and image content
Support for Light DOM and Shadow DOM by using "use-light-dom" attribute

Installation

To use the Sticky Card component in your project, install it via npm:

npm install --save sticky-card

Usage

Import the Sticky Card component and register it as a custom element in your project:

import 'sticky-card';

or add script to your html markup before </body>

<script type="module" crossorigin src="/sticky-card.js"></script>

Use the custom sticky-card element in your HTML markup:

<sticky-card 
use-light-dom
image-right 
image-src="path/to/image" 
image-alt="Alternative Text" 
text-items="[
      { "title": "Title 1", "text": "Text 1" },
      { "title": "Title 2", "text": "Text 2" }
    ]"
></sticky-card>