Home

Awesome

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

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.

NameTypeRequirementDescriptionDefault
typestringRequiredcustom:stack-in-card
titlestringOptionalHeader of the card
modestringOptionalvertical or horizontal stackvertical
cardsobjectRequiredThe cards you want to embednone
keepobjectOptionalSee keep object

keep object

NameTypeRequirementDescriptionDefault
backgroundbooleanOptionalWill 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_shadowbooleanOptionalWill keep the box-shadow on all the child cardsfalse
marginbooleanOptionalWill keep the margin between all the child cardsfalse
outer_paddingbooleanOptionalWill add a padding of 8px to the card if margin is truetrue if margin is true, else false
border_radiusbooleanOptionalWill keep the border-radius on all the child cardsfalse

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