MCPcopy Index your code
hub / github.com/custom-cards/stack-in-card

github.com/custom-cards/stack-in-card @0.2.0

Chat with this repo
repository ↗ · DeepWiki ↗ · release 0.2.0 ↗ · + Follow
18 symbols 38 edges 5 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Stack In Card by @RomRider

A replacement for vertical-stack-in-card and horizontal-stack-in-card

It allows to group multiple cards into one card without the borders. By default, it will stack everything vertically.

GitHub Release License hacs_badge

Project Maintenance [GitHub Activity]commits

Discord Community Forum

Options

If a card inside the stack has the --keep-background CSS style defined, it will not replace the background. This is usefull for button-card for example. You can also define this CSS variable by using card-mod.

Name Type Requirement Description Default
type string Required custom:stack-in-card
title string Optional Header of the card
mode string Optional vertical or horizontal stack vertical
cards object Required The cards you want to embed none
keep object Optional See keep object

keep object

Name Type Requirement Description Default
background boolean Optional Will keep the background on all the child cards. To keep the background on specific cards only, assign the CSS variable --keep-background: 'true' on the card where you want to keep the background. false
box_shadow boolean Optional Will keep the box-shadow on all the child cards false
margin boolean Optional Will keep the margin between all the child cards false
outer_padding boolean Optional Will add a padding of 8px to the card if margin is true true if margin is true, else false
border_radius boolean Optional Will keep the border-radius on all the child cards false

Example

Simple Example

example

- type: custom:stack-in-card
  title: My Stack In Card
  mode: vertical
  cards:
    - type: horizontal-stack
      cards:
        - type: button
          entity: sun.sun
        - type: button
          entity: sun.sun
    - type: vertical-stack
      cards:
        - type: entities
          entities:
            - sun.sun

Example with button-card to keep the background

This will keep the background of the button even if stacked:

- type: custom:stack-in-card
  title: My Stack In Card
  mode: vertical
  cards:
    - type: custom:button-card
      entity: sun.sun
      color_type: card
      styles:
        card:
          - --keep-background: 'true'

Installation

Use HACS or follow this guide

resources:
  url: /local/stack-in-card.js
  type: module

Extension points exported contracts — how you extend this code

StackInCardConfig (Interface)
(no doc)
src/types.ts
KeepConfig (Interface)
(no doc)
src/types.ts

Core symbols most depended-on inside this repo

_waitForChildren
called by 4
src/stack-in-card.ts
_updateStyle
called by 2
src/stack-in-card.ts
_loopChildren
called by 2
src/stack-in-card.ts
_updateChildren
called by 2
src/stack-in-card.ts
_createCard
called by 2
src/stack-in-card.ts
_createStack
called by 1
src/stack-in-card.ts
_rebuildCard
called by 1
src/stack-in-card.ts
getCardSize
called by 1
src/stack-in-card.ts

Shape

Method 14
Class 2
Interface 2

Languages

TypeScript100%

Modules by API surface

src/stack-in-card.ts16 symbols
src/types.ts2 symbols

For agents

$ claude mcp add stack-in-card \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact