How to increase the gap between these two cards?

Configuration Frontend
1

How can I increase the gap between these two cards, when using vertical stack card?

Clipboard_02-08-2025_02

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: input_boolean.baby_sleeping
  - show_name: true
    show_icon: true
    type: button
    entity: switch.toggle_electric_gates

I don’t know if I’m missing something silly, but I’ve searched all over the forums and can’t seem to do this. I’ve tried adding “card-mod” to the styling, but it seems to make no difference (unless I’m just doing something wrong).

2

Maybe GitHub - thomasloven/lovelace-gap-card: 🔹 A lovelace card that does nothing and looks like nothing. Incredibly useful! No, really.

3

Use card-mod to increase a gap between cards. Details in the main card-mod thread.

4

Great, this actually does work, I must have been putting the card-mod code in the wrong place.

Here is the working code:

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: input_boolean.baby_sleeping
  - show_name: true
    show_icon: true
    type: button
    entity: switch.toggle_electric_gates
    card_mod:
      style: |
        ha-card {
          margin-top: 100px;
        }

image
image518×688 29.7 KB

Note, it seems like you need a slightly different approach if you are using an entities card. Something like this perhaps:

image
image1259×415 30.6 KB

5

@WallyR This card says “depreciated” now?

6

I did not notice.
Thanks for the hint. I will stop pushing it then. :slight_smile: