open-index/open-npm huggingface dataset:
npm package: @manufosela/device-card-stack
Description: Accordion-style card stack with 3D perspective and image preview panel
Author: manufosela
Latest version: 1.1.0

# @manufosela/device-card-stack

[![npm version](https://img.shields.io/npm/v/@manufosela/device-card-stack)](https://www.npmjs.com/package/@manufosela/device-card-stack)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Accordion-style card stack with 3D perspective and image preview panel, built with [Lit 3](https://lit.dev/).

Cards expand on click to reveal their content while a side panel displays the associated image. On mobile viewports the preview panel is hidden and images appear inline within each card. Supports keyboard navigation and ARIA tablist semantics.

## Installation

```bash
npm install @manufosela/device-card-stack
```

## Usage

```javascript
import '@manufosela/device-card-stack';
```

```html
<device-card-stack>
  <div slot="card" data-title="Mountain" data-color="#1a1a2e"
       data-image="mountain.jpg" data-num="01">
    <p>Mountain landscape description.</p>
  </div>
  <div slot="card" data-title="Ocean" data-color="#16213e"
       data-image="ocean.jpg" data-num="02">
    <p>Ocean waves description.</p>
  </div>
  <div slot="card" data-title="Forest" data-color="#0f3460"
       data-image="forest.jpg" data-num="03">
    <p>Forest path description.</p>
  </div>
</device-card-stack>
```

## Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `active-index` | Number | `0` | Index of the currently active card |
| `mobile-breakpoint` | Number | `768` | Viewport width (px) below which mobile layout is used |
| `stack-rotation` | Number | `3` | Rotation angle in degrees for inactive cards |
| `transition-duration` | Number | `500` | Transition duration in milliseconds |

## Slots

| Slot | Description |
|------|-------------|
| `card` | Card elements. Use `data-title`, `data-color`, `data-image`, and `data-num` attributes to configure each card. |

### Card data attributes

| Attribute | Description |
|-----------|-------------|
| `data-title` | Title displayed in the card header and body |
| `data-color` | Background color of the card |
| `data-image` | URL of the image shown in the preview panel |
| `data-num` | Number label shown in the card header (defaults to zero-padded index) |

## CSS Custom Properties

| Property | Default | Description |
|----------|---------|-------------|
| `--dcs-border-radius` | `20px` | Border radius of the outer wrapper |
| `--dcs-height` | `700px` | Height of the component in desktop mode |
| `--dcs-preview-bg` | `#000` | Background color of the preview panel |
| `--dcs-text-color` | `#fff` | Text color for the card body title |
| `--dcs-title-size` | `3.5rem` | Font size of the expanded card title |

## Keyboard Navigation

| Key | Action |
|-----|--------|
| Arrow Down | Activate next card |
| Arrow Up | Activate previous card |
| Home | Activate first card |
| End | Activate last card |

## License

MIT
npm package: @manufosela/element-card
Description: Lit-Element webcomponent to draw a card with other elements and information
Author: manufosela
Latest version: 2.3.9

# \<element-card\>
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)

## Demo
[element-card codepen demo](https://codepen.io/manufosela/pen/wZXopo)

<!--
```
<custom-element-demo>
  <template>
    <script type="module" src="../element-card.js"></script>
    <script type="module" src="/node_modules/@manufosela/nav-list/nav-list.js"></script>
    <script type="module" src="/node_modules/@manufosela/circle-percent/circle-percent.js"></script>
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
  <element-card id="second" 
        title="Javascript"
        description="Advocate. ES6, ES7, functional programming"
        imgcover="https://banner2.kisspng.com/20180429/www/kisspng-javascript-logo-html-comment-blog-5ae63c22d40699.0773573515250381148685.jpg"
        coverBgColor="rgba(255, 255, 0, 0.3)"
        textcolor="#000">
        DEMO TEXT INTO ELEMENT-CARD
  </element-card>
```
## CSS Variables
--imgcover-max-width
--imgcover-opacity
--fsize-element-title
--fsize-element-desc
--fsize-element-base
--font-size

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

## Build
```
$ npm run build
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

## Author

* **Mánu Fosela** - *Javascript Composer* - [manufosela](https://github.com/manufosela)

## License

This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details