Spacing between badges

Configuration Frontend
1

Is it possible to create spacing between badges, according to my red markings in the picture?

image
image709Ă—64 10.4 KB

1 Like
2

I’m also trying to figure this out. I’m switching over from Mushroom Chips and I’ve relied heavily on the “Spacer” option to spread things out.

3

I was able to add spacing by using the Lovelace mod-card. Here’s how:

  1. Create a new badge.
  2. Open the YAML editor.
  3. Replace the content with the following:
    type: custom:mod-card
card_mod:
  style: |
    ha-card {
      border-style: none !important;
      width: 3vw;
    }

If you’re new to CSS, remember you can use any valid unit for width, such as px, %, or vw (e.g., 10px or 5%).

Hope this helps!

1 Like