piitaya / stack-in-card

🛠 group multiple cards into one card without the borders

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.

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

- 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