Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[brpeterso]

I’m using the Chips card to show my frigate snapshots. I would like to know when one of the cameras has a person in view using a binary sensor for person occupancy. My problem is I can’t seem to figure out card_mod with the Chips card at this point. I’ve looked all over, and here’s what I have so far. Can someone take a look and let me know where I went wrong? TIA!

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: camera.driveway_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.north_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.front_door_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.backyard_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.front_doorbell_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.foyer_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.garage_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.kitchen_camera_person
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: camera.family_room_camera_person
    content_info: none
    use_entity_picture: true
alignment: center
card_mod:
  style:
    div:
      mushroom-template-chip:nth-child(6):
        $:
          mushroom-chip: |
            ha-icon {
              {% if is_state('binary_sensor.foyer_camera_person_occupancy', 'on') %}  
              animation: rotation 1s linear infinite;
              {% endif %}
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }

[dimitri.landerloos]

Take a look at my guide and then the chip section.

Mushroom Cards Card Mod Styling/Config Guide

Chips Card Sections are split:

Main Icon Styling

You can style the main icon of each chip type like this: Change the icon type/mdi. [image] The weather chip icon cannot be modified as it is not a normal HA icon. Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper. card_mod: style: mushroom-conditional-chip:nth-child(1): mushroom-template-chip$: | ha-state-icon { --card-…

Essentially any changes to the chip itself, background, size, border, shadow, etc. Can be applied to the chip directly. But anything that needs to target something inside of the chip needs to be targeted from the main chip card and then drilled down to the appropriate chip.

Edit: also if you know what the path is to your camera snapshots you can use a template chip instead and then you could just have it change the icon when its detected motion or something, like this maybe?

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: camera.demo_camera
    picture: |-
      {% if states('binary_sensor.front_door_motion') == 'on' %}
      some image that will show that motion is detected.
      {% else %}
      local/frontdoorcamera/tmp/camera.png
      {% endif %}

[tvds (Tim)]

@dimitri.landerloos

--rgb-blue

You are a hero. Many thanks
Any idea what to putt instead of the --rgb-blue to just use the standard mushroom colors? I used --state-icon-color, but that doesn’t work.

[dimitri.landerloos]

Dont think it is possible. The state icon color mushroom uses is parsed at card level i believe so it wont be exposed to the tile card.

I would just change it manually with some colors that look nice to you.

card_mod:
  style:
    ha-tile-icon$: |
      :host {
        --mdc-icon-size: 20px !important;
      }
      ha-icon {
        color: rgba(20, 160, 255, 1) !important;
      }
      .shape::before {
        background-color: rgba(20, 160, 255, 1) !important;
      }

[Patty37 (Craig)]

Hi, has the recent Home Assistant update broken the cards for anyone else?

All my cards showing as “Custom Element Doesn’t Exist”.

[WebPower (Karoly Papp)]

Hi, I’m fine. Try emptying everything or logging out and logging in.

[brpeterso]

Wow, those guides are great. I have been searching through different incomplete examples and I figured it out in 5 minutes after looking at this. Thanks!

[juninhopelegrini (Junior Pelegrini)]

Estou começando a elaborar algumas coisas sobre o Natal aqui no meu Dashboard, porém esatou com dificuldades para fazer um “Chip” que aparece quando liga minha Árvore de Natal com os dizeres “Feliz Natal!”

I tried several things, but I can only leave it this way;

Can anybody help me?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:pine-tree
    icon_color: green
  - type: template
    icon: mdi:star-four-points
    icon_color: yellow
  - type: template
    icon: mdi:grain
    icon_color: red
  - type: template
    icon: mdi:gift
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      .shape {
        --shape-color: none;
      }
      ha-card {
        width: 66px;
        top: 0px;
      }
      ha-state-icon {
        animation: star 8s ease infinite alternate;
      }
      @keyframes star {
        0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
        50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
      }
    mushroom-template-chip:nth-child(3)$: |
      .shape {
        --shape-color: none;
      }
      ha-card {
        width: 66px;
        top: -132px;
      }
      ha-state-icon {
        animation: flash 2s steps(1) infinite, lights 2s infinite;
        clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
      }
      @keyframes flash {
        50% { transform: rotateY(180deg); }
      }
      @keyframes lights {
        0%, 100% {color: rgb(var(--rgb-red)); }
        6.25% { color: rgb(var(--rgb-deep-orange)); }
        12.5% { color: rgb(var(--rgb-orange)); }
        18.75% { color: rgb(var(--rgb-amber)); }
        25% { color: rgb(var(--rgb-yellow)); }
        31.25% { color: rgb(var(--rgb-lime)); }
        37.5% { color: rgb(var(--rgb-light-green)); }
        43.75% { color: rgb(var(--rgb-green)); }
        50% { color: rgb(var(--rgb-teal)); }
        56.25% { color: rgb(var(--rgb-cyan)); }
        62.5% { color: rgb(var(--rgb-light-blue)); }
        68.75% { color: rgb(var(--rgb-blue)); }
        75% { color: rgb(var(--rgb-indigo)); }
        81.25% { color: rgb(var(--rgb-deep-purple)); }
        87.5% { color: rgb(var(--rgb-purple)); }
        93.75% { color: rgb(var(--rgb-pink)); }
      }
    mushroom-template-chip:nth-child(4)$: |
      .shape {
        --shape-color: none;
        --icon-size: 18px;
        top: 18px;
        left: 18px;
      }
      ha-card {
        width: 66px;
        top: -198px;
      }
      ha-state-icon {
        animation: surprise 4s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-2px) rotate(-27deg); }
        5% { transform: translateY(-2px) rotate(21deg); }
        7.5% { transform: translateY(-2px) rotate(-15deg); }
        10% { transform: translateY(-2px) rotate(9deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-1.2px) }
      }

[dimitri.landerloos]

@juninhopelegrini

Estou começando a elaborar algumas coisas sobre o Natal aqui no meu Dashboard, porém esatou com dificuldades para fazer um “Chip” que aparece quando liga minha Árvore de Natal com os dizeres “Feliz Natal!”

Firstly please only use english on this forum. Makes it very hard for people to search for solutions if they would have to search in many different languages.

To move the chip itself you need to target the chip rather then the chip container drilled down.

Try like this:

Code

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:pine-tree
    icon_color: green
  - type: template
    icon: mdi:star-four-points
    icon_color: yellow
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 0px;
          top: 1px;
          background: none !important;
          box-shadow: none !important;
          border: none !important;
        }
  - type: template
    icon: mdi:grain
    icon_color: red
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 0px;
          top: 0px;
          background: none !important;
          box-shadow: none !important;
          border: none !important;
        }
  - type: template
    icon: mdi:gift
    icon_color: red
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 0px;
          top: 4px;
          background: none !important;
          box-shadow: none !important;
          border: none !important;
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: star 8s ease infinite alternate;
      }
      @keyframes star {
        0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
        50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        animation: flash 2s steps(1) infinite, lights 2s infinite;
        clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
      }
      @keyframes flash {
        50% { transform: rotateY(180deg); }
      }
      @keyframes lights {
        0%, 100% {color: rgb(var(--rgb-red)); }
        6.25% { color: rgb(var(--rgb-deep-orange)); }
        12.5% { color: rgb(var(--rgb-orange)); }
        18.75% { color: rgb(var(--rgb-amber)); }
        25% { color: rgb(var(--rgb-yellow)); }
        31.25% { color: rgb(var(--rgb-lime)); }
        37.5% { color: rgb(var(--rgb-light-green)); }
        43.75% { color: rgb(var(--rgb-green)); }
        50% { color: rgb(var(--rgb-teal)); }
        56.25% { color: rgb(var(--rgb-cyan)); }
        62.5% { color: rgb(var(--rgb-light-blue)); }
        68.75% { color: rgb(var(--rgb-blue)); }
        75% { color: rgb(var(--rgb-indigo)); }
        81.25% { color: rgb(var(--rgb-deep-purple)); }
        87.5% { color: rgb(var(--rgb-purple)); }
        93.75% { color: rgb(var(--rgb-pink)); }
      }
    mushroom-template-chip:nth-child(4)$: |
      ha-state-icon {
        --chip-icon-size: 10px;
        animation: surprise 4s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-2px) rotate(-27deg); }
        5% { transform: translateY(-2px) rotate(21deg); }
        7.5% { transform: translateY(-2px) rotate(-15deg); }
        10% { transform: translateY(-2px) rotate(9deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-1.2px) }
      }

If this doesnt work perfectly for you fiddle with the top: number

[Bieniu (Maciek)]

Is there a way to avoid the shadow and border of sub-cards from being visible when the page loads?

Card configuration:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    style: |
      ha-card {
        --ha-card-box-shadow: none;
        border: none;
        background: none;
      }
    icon: |-
      {% set state = states(entity) %}
      {% if state == "clear-night" %}
        mdi:weather-night
      {% elif state == "cloudy" %}
        mdi:weather-cloudy
      {% elif state == "fog" %}
        mdi:weather-fog
      {% elif state == "hail" %}
        mdi:weather-hail
      {% elif state == "lightning" %}
        mdi:weather-lightning
      {% elif state == "lightning-rainy" %}
        mdi:weather-lightning-rainy
      {% elif state == "partlycloudy" %}
        mdi:weather-partly-cloudy
      {% elif state == "pouring" %}
        mdi:weather-pouring
      {% elif state == "rainy" %}
        mdi:weather-rainy
      {% elif state == "snowy" %}
        mdi:weather-snowy
      {% elif state == "snowy-rainy" %}
        mdi:weather-snowy-rainy
      {% elif state == "sunny" %}
        mdi:weather-sunny
      {% elif state == "windy" %}
        mdi:weather-windy
      {% elif state == "windy-variant" %}
        mdi:weather-windy-variant
      {% else %}
        mdi:weather-cloudy-alert
      {% endif %}
    icon_color: |-
      {% set state = states(entity) %}
      {% if state == "clear-night" %}
        orange
      {% elif state == "cloudy" %}
        grey
      {% elif state == "fog" %}
        grey
      {% elif state == "lightning" %}
        yellow
      {% elif state == "lightning-rainy" %}
        blue
      {% elif state == "partlycloudy" %}
        amber
      {% elif state == "sunny" %}
        amber
      {% elif state == "pouring" %}
        blue
      {% elif state == "rainy" %}
        blue
      {% elif state == "snowy" %}
        black
      {% elif state == "snowy-rainy" %}
        black
      {% elif state == "windy" %}
        green
      {% elif state == "windy-variant" %}
        green
      {% else %}
        default
      {% endif %}
    primary: Pogoda
    secondary: |-
      {% set condition_map = {
               "clear-night": "pogodna noc",
               "cloudy": "pochmurno",
               "exceptional": "warunki nadzwyczajne",
               "fog": "mgła",
               "hail": "grad",
               "lightning": "wyładowania atmosferyczne",
               "lightning-rainy": "burza",
               "partlycloudy": "częściowe zachmurzenie",
               "pouring": "ulewa",
               "rainy": "deszczowo",
               "snowy": "opady śniegu",
               "snowy-rainy": "deszcz ze śniegiem",
               "sunny": "słonecznie",
               "windy": "wietrznie",
               "windy-variant": "wietrznie"
             }
      %}
      {{ condition_map.get(states(entity)) }}
    tap_action:
      action: navigate
      navigation_path: /lovelace/climate
    entity: weather.home
  - type: custom:stack-in-card
    style: |
      ha-card {
        --ha-card-box-shadow: none;
        border: none;
        background: none;
      }
    cards:
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          div.chip-container {
            margin-bottom: -14px;
            --chip-border-width: 0px;
            --chip-background: none;
          }
        chips:
          - type: entity
            entity: sensor.temperature_outdoor
            icon_color: amber
          - type: entity
            entity: sensor.humidity_outdoor
            icon_color: blue
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          div.chip-container {
            margin-bottom: -14px;
            --chip-border-width: 0px;
            --chip-background: none;
          }
        chips:
          - type: entity
            entity: sensor.pressure_outdoor
            icon_color: green
          - type: entity
            entity: sensor.home_forecast_precipitation_probability
            icon_color: purple

[dimitri.landerloos]

No. Its just how css is loaded when modifications are made like stack in cards and card mod. You are modifying the page after it loads. Only way to make it less obvious is a faster connection to your ha instance so the modifications load faster.

[Bieniu (Maciek)]

@dimitri.landerloos

No. Its just how css is loaded when modifications are made like stack in cards and card mod.

I thought so

@dimitri.landerloos

Only way to make it less obvious is a faster connection to your ha instance so the modifications load faster.

The network connection between the client and the HA server is gigabit ethernet, so there is not much room for improvement.

[dimitri.landerloos]

@Bieniu

The network connection between the client and the HA server is gigabit ethernet, so there is not much room for improvement.

Mine is not gigabit and between client and instance on my pc which is wired i dont get this but on my phone i do because of the higher latency.

Maybe try and ping your ha instance from the client and look at your latency instead of the bandwidth.

Otherwise it is just have many modifications you have unfortunately.

[Danny2100]

Is it possible in the title card to create line break to organize the text?

[nonamejuju (Julien H)]

Hello I can’t make the motion sensor chip card animate, managed to do it for a AC chip card but this one no:

Like in this example

I think I am close but I’m missing something…

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:knife
    icon_color: |-
      {% if is_state('light.kitchen_main_light', 'on') %}
        orange
      {% endif %}
    primary: Kitchen
    secondary: >-
      {{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}°C  - {{
      states('sensor.kitchen_multi_sensor_humidity')| round}}%
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: toggle
    entity: light.kitchen_lights
    multiline_secondary: false
    fill_container: false
    card_mod:
      style: |
        ha-card {
          background :rgba(var(--rgb-primary-text-color), 0.025);      
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: binary_sensor.kitchen_motion_sensor_occupancy
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:motion-sensor
          {% else %}
            mdi:motion-sensor-off
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          primary
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: sensor.kitchen_cooktop_current_comsumption
        icon: mdi:stove
        icon_color: |-
          {% set consumptiontion_level = states(entity) | float(0) %}
          {% if consumptiontion_level > 0 %} 
            primary
          {% else %}
            grey
          {% endif %}
      - type: template
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:window-open-variant
          {% else %}
            mdi:window-closed-variant
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          primary
          {% else %}
          grey
          {% endif %}
        entity: binary_sensor.window_sensor_kitchen_contact
    alignment: end
    card_mod:
      style: |
        ha-card {
         --chip-box-shadow: none;
         --chip-background: none;
         --chip-spacing: -0.5em;
         --chip-icon-size: 0.5em
         }
         
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            animation: clip 2s linear infinite;
          }
          @keyframes clip {
            50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
          }
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

Here’s my full room cards for now for anyone interested :

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:knife
        icon_color: |-
          {% if is_state('light.kitchen_main_light', 'on') %}
            orange
          {% endif %}
        primary: Kitchen
        secondary: >-
          {{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}°C 
          - {{ states('sensor.kitchen_multi_sensor_humidity')| round}}%
        tap_action:
          action: navigate
          navigation_path: kitchen
        hold_action:
          action: toggle
        entity: light.kitchen_lights
        multiline_secondary: false
        fill_container: false
        card_mod:
          style: |
            ha-card {
              background :rgba(var(--rgb-primary-text-color), 0.025);      
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: binary_sensor.kitchen_motion_sensor_occupancy
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:motion-sensor
              {% else %}
                mdi:motion-sensor-off
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: sensor.kitchen_cooktop_current_comsumption
            icon: mdi:stove
            icon_color: |-
              {% set consumptiontion_level = states(entity) | float(0) %}
              {% if consumptiontion_level > 0 %} 
                primary
              {% else %}
                grey
              {% endif %}
          - type: template
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:window-open-variant
              {% else %}
                mdi:window-closed-variant
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            entity: binary_sensor.window_sensor_kitchen_contact
        alignment: end
        card_mod:
          style: |
            ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: -0.5em;
            --chip-icon-size: 0.5em}
            }
    card_mod:
      style: |
        ha-card {
          height: 102px;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        secondary: >-
          {{ states('sensor.aqara_multi_sensor_2_living_room_temperature') |
          round(1) }} °C - {{
          states('sensor.aqara_multi_sensor_2_living_room_humidity') |
          round(0)}}%
        icon: mdi:sofa
        entity: light.living_room_lights
        icon_color: |-
          {% if is_state('light.living_room_lights', 'on') %}
            orange
          {% endif %}
        primary: Living Room
        hold_action:
          action: call-service
          service: light.toggle
          service_data:
            transition: 1
            brightness_pct: 75
          target:
            area_id: living_room
        tap_action:
          action: navigate
          navigation_path: livingroom
        multiline_secondary: false
        fill_container: true
        card_mod:
          style: |
            ha-card {
              background :rgba(var(--rgb-primary-text-color), 0.025);      
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:radiator
              {% else %}
                mdi:radiator-off
              {% endif %}
            entity: switch.living_room_heater_garden_left_switch_0
          - type: template
            entity: input_boolean.ryzen_5700x_pc
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:desktop-tower-monitor
              {% else %}
                mdi:desktop-tower-monitor
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: conditional
            conditions: []
            chip:
              type: template
              icon_color: |-
                {% if is_state(config.entity, 'off') %}
                grey
                {% else %}
                primary
                {% endif %}
              entity: climate.daikin_living_room
              icon: |-
                {% if is_state(entity, 'heat_cool') %}
                  mdi:sync
                {% elif is_state(entity, 'heat') %}
                  mdi:fire
                {% elif is_state(entity, 'cool') %}
                  mdi:snowflake
                {% elif is_state(entity, 'dry') %}
                  mdi:water-percent
                {% elif is_state(entity, 'fan_only') %}
                  mdi:fan
                {% else %}
                  mdi:air-conditioner
                {% endif %}
              card_mod:
                style: |

                  ha-card {
                    animation: spin linear infinite;
                    {% if is_state(config.entity, 'heat_cool') %}
                       animation: spin 3s ease-in-out infinite alternate;
                    {% elif is_state(config.entity, 'cool') %}
                       animation: cool 6s ease-in-out infinite;
                    {% elif is_state(config.entity, 'heat') %}
                       animation: heat 2s infinite;
                    {% elif is_state(config.entity, 'dry') %}
                       animation: dry 1.5s linear infinite;
                    {% elif is_state(config.entity, 'fan_only') %}
                       animation: spin 1s linear infinite;
                    {% endif %}
                  }
                  @keyframes cool {
                    0%, 100% { transform: rotate(25deg); }
                    25% { transform: rotate(-25deg); }
                    50% { transform: rotate(50deg); }
                    75% { transform: rotate(-50deg); }
                  }
                  @keyframes heat {
                    0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
                    10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
                    20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
                    30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
                    40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
                    50% { --icon-color: rgba(var(--rgb-red), 0); }
                  }
                  @keyframes dry {
                    0%, 100% { --icon-symbol-size: 21px; }
                    10%, 90% { --icon-symbol-size: 22px; }
                    20%, 80% { --icon-symbol-size: 23px; }
                    30%, 70% { --icon-symbol-size: 24px; }
                    40%, 60% { --icon-symbol-size: 25px; }
                    50% { --icon-symbol-size: 26px; }
                  }
          - type: template
            entity: binary_sensor.livingroom_window_contact_contact
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:window-open-variant
              {% else %}
                mdi:window-closed-variant
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: binary_sensor.livingroom_door_contact_contact
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:door-open
              {% else %}
                mdi:door-closed
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: media_player.living_room_speaker
            icon: |-
              {% if is_state(config.entity, 'playing') %}
                mdi:speaker-play
              {% else %}
                mdi:speaker-off
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'playing') %}
              primary
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: vacuum.vaccubot
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:robot-vacuum
              {% else %}
                mdi:robot-vacuum-off
              {% endif %}
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
          - type: template
            icon_color: |-
              {% if is_state(config.entity, 'on') %}
              primary
              {% else %}
              grey
              {% endif %}
            icon: |-
              {% if is_state(config.entity, 'on') %}
                mdi:air-humidifier
              {% else %}
                mdi:air-humidifier-off
              {% endif %}
            entity: humidifier.humidifier
        alignment: end
        card_mod:
          style: |
            ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: -0.5em;
            --chip-icon-size: 0.5em}
            }
    card_mod:
      style: |
        ha-card {
          height: 102px;
        }

And some WIP work on graph with dynamic color, directly integrated in the room cards thanks
PskNorzNoRz for the ideas !

[nonamejuju (Julien H)]

Ok I managed to have it working :

But now that bit of code isn’t working:

      ha-card {
      --chip-box-shadow: none;
      --chip-background: none;
      --chip-spacing: -0.5em;
      --chip-icon-size: 0.5em
      }

I think it has to be the placement of this key : “|”
From what I understand it act like the opening of an {}
When I put it like this:
" style: | ", ha-card {…} work but not ha-state-icon {…}

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.kitchen_motion_sensor_occupancy
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
        }
      ha-card {
      --chip-box-shadow: none;
      --chip-background: none;
      --chip-spacing: -0.5em;
      --chip-icon-size: 0.5em
      }
      }

[paddy0174 (Patrick)]

Just to throw in another possibility: on what device(s) do you experience this? It might be your browser and/or the underlying web engine.

Eg. older Amazon tablets are known for a not really up-to-date webview (that is the engine that powers Chrome, Safari, Edge; not Firefox). And if your device isn’t very powerful as well…

HA uses Javascript to “display” your dashboard. That is great, because many things can be done on the fly, the page doesn’t need to be re-rendered and all these things. But it has the disadvantage, that many things get rendered on your local machine, and not on the server. That means with a low powered device, it might need some time to render this… I for one am experiencing this with my (very) old Fire tablet (I believe it’s seven years old now) with LineageOS. It just needs more time to render the page, and while it does that, I’m seeing the same as you.

To investigate that further, we need to know what browser/app you’re running and on what device.

[dimitri.landerloos]

Try like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.kitchen_motion_sensor_occupancy
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none !important;
          --chip-background: none;
        }
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none !important;
          --chip-background: none;
        }
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none !important;
          --chip-background: none;
        }
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        --chip-icon-size: 0.5em;
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
    .: |
      ha-card {
        --chip-spacing: -0.5em;
      }

Changing the chip background and such using ha-card should be applied directly to the chip itself rather than through the main chip card.

You can do it through the main card but then it affects all chips equally, but in that case you would do it like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.kitchen_motion_sensor_occupancy
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
    .: |
      ha-card {
        --chip-box-shadow: none !important;
        --chip-background: none;
        --chip-spacing: -0.5em;
        --chip-icon-size: 0.5em;
      }

[nonamejuju (Julien H)]

Thank you after a quick test, the first solution dosen’t seem to work, the second one is perfect thought ! Thanks you

In the meantimes I found another solution, if I make an empty conditional chip I then can apply the animation to it, and keep only one ha-card to all the chips card:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions: []
    chip:
      type: template
      entity: binary_sensor.kitchen_motion_sensor_occupancy
      icon: |-
        {% if is_state(config.entity, 'on') %}
          mdi:motion-sensor
        {% else %}
          mdi:motion-sensor-off
        {% endif %}
      icon_color: |-
        {% if is_state(config.entity, 'on') %}
        primary
        {% else %}
        grey
        {% endif %}
      tap_action:
        action: more-info
      card_mod:
        style: |
          .content {
            animation: clip 2s linear infinite; if is_state(binary_sensor.kitchen_motion_sensor_occupancy,on)
          }
          @keyframes clip {
            75% { clip-path: polygon(0 0, 30% 0, 100% 100%, 0 100%); }
            }
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style: |
    mushroom-template-chip:nth-child(1)$: |
     ha-state-icon {
       {{ 'animation: clip 2s linear infinite;'}}
     }
     @keyframes clip {
       50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
     }
     ha-card {
    --chip-box-shadow: none;
    --chip-background: none;
    --chip-spacing: -0.5em;
    --chip-icon-size: 0.5em}
    }

But I think your solution is better and cleaner.
Now if I want to add a condition to only animate when there is motion, I went with two not working solution for now:

1

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: clip 2s linear infinite; if is_state(binary_sensor.kitchen_motion_sensor_occupancy, 'on')
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
    .: |
      ha-card {
        --chip-box-shadow: none !important;
        --chip-background: none;
        --chip-spacing: -0.5em;
        --chip-icon-size: 0.5em;
      }

or
2

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
      {% if is_state(binary_sensor.kitchen_motion_sensor_occupancy, 'on') %}
        animation: clip 2s linear infinite; 
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
    .: |
      ha-card {
        --chip-box-shadow: none !important;
        --chip-background: none;
        --chip-spacing: -0.5em;
        --chip-icon-size: 0.5em;
      }

What is the best best one ? And what I am missing to make them work ?

[dimitri.landerloos]

You cant just have if without endif.

So this:

      {% if is_state(binary_sensor.kitchen_motion_sensor_occupancy, 'on') %}
        animation: clip 2s linear infinite; 

needs to be:

      {% if is_state('binary_sensor.kitchen_motion_sensor_occupancy', 'on') %}
        animation: clip 2s linear infinite; 
      {% endif %}

Also missing ’ ’ around your entity id.

Or for your first example you need to wrap it like this:

{{'animation: clip 2s linear infinite;' if is_state('binary_sensor.kitchen_motion_sensor_occupancy', 'on')}}

You were also missing ’ ’ around your animation and around your entity.

I can also guarantee you that this section does not work as intended:

@nonamejuju

card_mod:
  style: |
    mushroom-template-chip:nth-child(1)$: |
     ha-state-icon {
       {{ 'animation: clip 2s linear infinite;'}}
     }
     @keyframes clip {
       50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
     }
     ha-card {
    --chip-box-shadow: none;
    --chip-background: none;
    --chip-spacing: -0.5em;
    --chip-icon-size: 0.5em}
    }

The mushroom-template-chip:nth-child(1)$ :| is now not seen as being a drilled down object but rather just an object to style directly and that just wont work because you now cant access the ha-state-icon that is inside the chip object.

But you are right my first solution provided forgot to account for the fact that you wanted to reduce the chip spacing so an accurate solution like my first instance where you can still individually address the chips rather than style all would be like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.kitchen_motion_sensor_occupancy
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none !important;
          --chip-background: none;
        }
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none !important;
          --chip-background: none;
        }
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none !important;
          --chip-background: none;
        }
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        --chip-icon-size: 0.5em;
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
    .: |
      ha-card {
        --chip-spacing: -0.5em;
      }

Updated my initial post