Alternative to vertical stack in card?

[Matt_Barnes]

I have updated HA recently, and made the move to HACS meaning I have newer versions of all my cards etc and noticed vertical-stack-in-card is not playing very nicely at all now.

I have seen a few posts particularly from @petro recommeding avoiding this method but am not sure how to get a similar result another way.

The latest issue is text seems to disappear but also its clear where the two cards within a card now are due to background colours.

These are my two cards (one card is Pi hole off/on and the ads block / dns queries, the other card is transmission, with two switches and the details below)

I will be able to (hopefully) work out the formatting of the ads blocked details (and am moving to adguard anyway) but the fact you can see the “join” between the cards and some other issues makes me think its time to find another method of getting the same result?

Anyone able to help?

[VDRainer]

There’s the Stack-in-card since a few days.

Stack-In-Card: Drop-in replacement for vertical-stack-in-card

Stack In Card by @RomRider A replacement for vertical-stack-in-card and horizontal-stack-in-card with some more features. 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] 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…

[petro]

If you don’t use vertical in stack card, you need card mod or the card @VDRainer mentioned. I avoid the stack in style cards because they break often where card mod doesn’t. That’s my only reason. Using card mod to do everything is more complicated. I’ll post an example when I get a chance.

[Matt_Barnes]

Thanks!

Just added the HACS for this but getting an error saying the card does not exist even after a restart:

    - type: custom:stack-in-card
      title: Pi-Hole
      mode: vertical
      cards:
        - type: horizontal-stack
          cards:
            - type: entities
              entities:
                - entity: switch.pihole_switch
                  name: 'Turn off / on'
        - type: horizontal-stack
          cards:
            - type: 'custom:bar-card'
              title: Ads Blocked Today
              entity: sensor.pi_hole_ads_blocked_today    
            - type: 'custom:bar-card'
              title: DNS Queries
              entity: sensor.pi_hole_dns_queries_today  

[VDRainer]

@Matt_Barnes

I have updated HA recently

From which version?
Since 0.107 resources need to be in configuration.yaml

[Matt_Barnes]

I thought I read that too but Now I’ve just tried in chrome and the cards now now work and I’m in .108

[martinj27]

Do you still happen to have an example of how to do this?