Skip to content

🛠 group multiple cards into one card without the borders

License

Notifications You must be signed in to change notification settings

stickpin/stack-in-card

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stack In Card (unofficial) by @RomRider

Additional Mods by @ov1d1u and @stickpin

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.

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 boolean Optional Will keep the border on all the child cards 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 keep object

type: custom:stack-in-card
title: My Stack In Card
mode: vertical
keep:
  background: true
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

About

🛠 group multiple cards into one card without the borders

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 78.3%
  • JavaScript 20.9%
  • Dockerfile 0.8%