sticky-card

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>

API

Properties:

• imageRight: Moves the image to the right if true. Default value is false.
• imageSrc: Path to the image file.
• imageAlt: Alternative text for the image.
• textItems: An array of objects containing title and text for each section of the card.
• useLightDom: Uses Light DOM instead of Shadow DOM if true. Default value is false.

License

This project is licensed under the MIT License. For more information, please see the LICENSE file.