Mushroom Cards Card Mod Styling/Config Guide

i tried the suggestions but i cant get rid of the empty space on top and bottom of the card. i can use padding from bottom and top with card_mod, and it will move the text up or down, but in the process also make the card larger. how do i get rid of the empty space? i want to stack around 8 of these, so removing empty space would be great.

The space is the gap between cards. A few suggestions…

  1. Theme --row-gap. However this will be universally applied.
  2. Use a vertical stack and theme --stack-card-gap. However this will be universaly applied to all vertical stacks.
  3. Use a container card with card-mod to style --row-gap. e.g. vertical-stack. With card-mod 3.4.5 you will need to use custom:mod-card to be able to apply card-mod to vertical stack. With v4.0.0-beta.4 vertical-stack is natively supported.
  4. With card-mod v4.0.0-beta.4 style --row-gap directly to the section which is now supported. You can edit the section in YAML to apply card-mod directly.
  5. Use another container card that allows to set gap between cards. e.g. expander-card (MelleD fork) with card expanded: true, display: grid, gap: 0 and show-button-users: [] (Last setting removes the expand/collpase title). expander-card is active in maintenance and a good option in my opnion, but perhaps not if you don’t want that functionaility.

Hey community!

I am having trouble with animating a template chip icon under a conditional chip.

I have tried many different variations, but can’t seem to figure it out.
This is my current code. The card_mod code I am focusing on is at the very end.

type: conditional
conditions:
  - condition: state
    entity: sensor.gdacs_tropical_cyclone_count
    state: '0'
chip:
  type: template
  icon: mdi:weather-hurricane
  icon_color: red
  content: |
    {% set storms = states.geo_location
      | selectattr('attributes.source','equalto','gdacs')
      | selectattr('attributes.event_type','equalto','Tropical Cyclone')
      | list %}
    {% set n = storms | length %}
    {% if n == 1 %}
      {{ storms[0].name.split(': ',1)[1].split('-')[0] | title }}
    {% else %}
      {{ n }} storms
    {% endif %}
  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        title: Active Hurricanes
        fullscreen: true
        size: fullscreen
        content:
          type: iframe
          url: https://www.accuweather.com/en/hurricane
          card_mod:
            style: |
              ha-card {
                height: 90vh !important;
                margin: 0;
                padding: 0;
              }
              iframe {
                height: 90vh !important;
                border: none !important;
              }
  card_mod:
    style:
      .: >
        @keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)}
        }
      mushroom-template-chip$:
        mushroom-chip$:
          ha-state-icon$:
            .: |
              :host {
                animation: spin 4s linear infinite !important;
                transform-origin: 50% 50%;
              }

The first card mod changes a browser_mod popup

And here is the DOM in the HTML

Any help would be much appreciated!!!

This is not working for me.

My card:

type: custom:mushroom-template-card
primary: Lights
secondary: ""
icon: mdi:lightbulb
tap_action:
  action: navigate
  navigation_path: lights
double_tap_action:
  action: none
hold_action:
  action: none
color: amber
vertical: true
features_position: bottom
card_mod:
  style: |
    ha-state-icon {
      --icon-symbol-size: 40px;
    }

Take a look at recent examples. There has been Breaking Changes as of late

Test this out…

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }       


Double check that your conditional setup is correct. The :nth-child will go to (2) if you assign another entity to the condition.

Thank you for your reply!

I applied your code, and it doesn’t seem to be spinning the icon. I did a hard refresh on the page and whatnot as well to double check.

Is there anything else I can show you that might help to troubleshoot? Here is the full YAML for the entire Mushroom Chip block and a screenshot of the Hurricane icon. I am unsure if this will tell anything.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: input_select.house_status
    tap_action:
      action: none
    icon_color: primary
  - type: weather
    entity: weather.forecast_home
    show_conditions: true
    show_temperature: true
  - type: conditional
    conditions:
      - condition: state
        entity: sensor.gdacs_tropical_cyclone_count
        state: "0"
    chip:
      type: template
      icon: mdi:weather-hurricane
      icon_color: red
      content: |
        {% set storms = states.geo_location
          | selectattr('attributes.source','equalto','gdacs')
          | selectattr('attributes.event_type','equalto','Tropical Cyclone')
          | list %}
        {% set n = storms | length %}
        {% if n == 1 %}
          {{ storms[0].name.split(': ',1)[1].split('-')[0] | title }}
        {% else %}
          {{ n }} storms
        {% endif %}
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Active Hurricanes
            fullscreen: true
            size: fullscreen
            content:
              type: iframe
              url: https://www.accuweather.com/en/hurricane
              card_mod:
                style: |
                  ha-card {
                    height: 90vh !important;
                    margin: 0;
                    padding: 0;
                  }
                  iframe {
                    height: 90vh !important;
                    border: none !important;
                  }
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$: |
            ha-state-icon {
              animation: spin 1s linear infinite;
            }
            @keyframes spin {
              100% { transform: rotate(360deg); }
            }
alignment: center

Screenshot 2025-11-04 103309

Shift the word card_mod: all the way to the left.

2 Likes

Yes. That ended up working! Thanks a ton :grin:

@LiQuid_cOOled , @Ojima
Just wanted to leave a thank you both for finally getting my circulation pump animation working.
Aufzeichnung 2025-11-06 225745
I was bashing my head against the examples, trying minimal setups, yet nothing worked. Copied the hurricane code and almost jumped from excitement as it spun on my cluttered test dashboard. A few adaptations later and it finally works.

I think it was that pesky | at styles, but I’m not sure. It’s not the first time it feels like I’m doing the same thing over and over and suddenly it works. And people say C++ is hard…

If anyone happens to need an example of several mushroom chips with different card_mod styles on top of the animation, here is my (shortened) code:
In the end, separating the animation form ha-card with .: | was the last puzzle piece.

type: custom:mushroom-chips-card
chips:
  - type: template
   <<card goes here>>
  - type: entity
   <<card goes here>>
  - type: entity
    <<card goes here>>
  - type: template
    icon: mdi:sync
    entity: switch.shelly_mini1pmg3_temp_klaeranlage_switch_0
    icon_color: "{{ 'accent' if states(entity) == 'on' else 'grey' }}"
    card_mod:
      style: |
        ha-card {
        border: none;
        --chip-background: none;
        --chip-icon-size: 30px;
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(4)$: |
      ha-state-icon {
        {%if states('switch.shelly_mini1pmg3_temp_klaeranlage_switch_0') == 'on' %}
          animation: spin 1s linear infinite;
        {%endif%}
      }
      @keyframes spin {
        100% { transform: rotate(-360deg); }
      }
    .: |
      ha-card {
        --chip-font-size: 16px;
        --chip-icon-size: 26px;
        border: none;
        --chip-background: none;
      }
      :host {
        --mush-chip-spacing: 0px; /* default is 8px */
      }

3 Likes

@LiQuid_cOOled : Hi! Would you have an idea and can help me please? Many many thanks in advance!!