# sticky-card

> Pretty card with sticky image as Web Component created with Lit

Latest version **0.1.3** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install sticky-card
pnpm add sticky-card
yarn add sticky-card
bun add sticky-card
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-04-12 |
| First published | 2023-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrej Daiker |
| Maintainers | a.daiker |

## Links

- npm: https://www.npmjs.com/package/sticky-card
- Homepage: https://github.com/A-D-E/lit-ram-sticky-card
- npm.io page: https://npm.io/package/sticky-card

## Dependencies (1)

- [lit](https://npm.io/package/lit.md) ^2.7.1

## Recent versions

- 0.1.3 (latest) — 2023-04-12
- 0.1.2 — 2023-04-12
- 0.1.1 — 2023-04-12
- 0.1.0 — 2023-04-11
- 0.0.9 — 2023-04-11
- 0.0.8 — 2023-04-11
- 0.0.7 — 2023-04-11
- 0.0.6 — 2023-04-11
- 0.0.5 — 2023-04-11
- 0.0.4 — 2023-04-11
- 0.0.3 — 2023-04-11
- 0.0.2 — 2023-04-06
- 0.0.1 — 2023-04-06

## README

# 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:

```sh
npm install --save sticky-card
```

## Usage

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

```javascript
import 'sticky-card';
```
or add script to your html markup before ```</body>```


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

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

```html
<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:

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

  

# License

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

---
_Source: https://npm.io/package/sticky-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._