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

I have since redesigned the card to this

Script

alias: Pihole Timer Finish
sequence:
  - service: timer.finish
    metadata: {}
    data: {}
    target:
      entity_id:
        - timer.pht
  - type: turn_on
    device_id: main device here
    entity_id: main device here
    domain: switch
  - service: input_boolean.turn_off
    target:
      entity_id:
        - input_boolean.pht
    data: {}
mode: single
icon: mdi:timer-off-outline

Automation

alias: Pihole Timer Finish
sequence:
  - service: timer.finish
    metadata: {}
    data: {}
    target:
      entity_id:
        - timer.pht
  - type: turn_on
    device_id: main device here
    entity_id: main device here
    domain: switch
  - service: input_boolean.turn_off
    target:
      entity_id:
        - input_boolean.pht
    data: {}
mode: single
icon: mdi:timer-off-outline

Card Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: PiHole
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 15% 20% 65%
      margin: '-10px 0px 0px 0px'
    cards:
      - type: custom:mushroom-template-card
        entity: input_boolean.pht
        icon: mdi:apple
        tap_action:
          action: toggle
          confirmation:
            text: Are you sure you want to start the timer?
        hold_action:
          action: call-service
          confirmation:
            text: Are you sure you want cancel the timer?
          service: script.pihole_timer_finish
        icon_color: transparent
        card_mod:
          style: |

            {% if is_state('switch.pi_hole', 'off') %}
            ha-state-icon {
            animation: beat 1.3s ease-out infinite both;
                 }
                @keyframes beat {
                0% { transform: scale(.9); }
               10% { transform: scale(1.1); }
               17% { transform: scale(1.05); }
               33% { transform: scale(1.1); }
               60% { transform: scale(1); }
                }
              {% endif %}
              
            {% if is_state('switch.pi_hole', 'on') %}  ha-state-icon:after {
            content: ""; position: relative; background-image:
            url("/local/pics/pi-on.png") ;  background-repeat:no-repeat;
            background-size: 100%;  background-position: center;  height: 50px;
            width: 40px;  top: -6px; left: 12px; border-radius: 50%;
                     } 
            {% else %} ha-state-icon:after { content: ""; position: relative;
            background-image: url("/local/pics/pi.png"); 
            background-repeat:no-repeat; background-size: 100%; 
            background-position: center;  height: 50px; width: 40px;  top: -6px;
            left: 12px; border-radius: 50%; animation: sprinkle 4s ease-in-out
            infinite;
               } 
            {% endif %}
            ha-card {
             border: none !important;
             background:none;
            }  ha-state-icon { color: transparent !important; border: none
            !important;
             --icon-symbol-size: 1px;
                }

             
      - type: custom:button-card
        entity: timer.pht
        name: Time Left
        show_name: true
        show_state: true
        show_label: false
        show_icon: false
        tap_action:
          action: none
        custom_fields:
          status:
            card:
              type: custom:button-card
              entity: switch.pi_hole
              tap_action: none
              show_state: true
              show_name: false
              show_icon: false
              styles:
                card:
                  - color: |
                      [[[
                       if(states['input_boolean.pht'].state == 'off') return 'lime'
                       else return 'red';
                       ]]] 
                  - font-size: 14px
                  - background: transparent
                  - border: none
                  - text-transform: uppercase
        styles:
          name:
            - position: absolute
            - width: 60px
            - top: 5%
            - left: 10%
            - z-index: 1
            - font-size: 13px
            - color: grey
          card:
            - height: 60px
            - width: 70px
            - top: 3px
            - background: none
            - border: none
            - color: |
                [[[
                  if(states['input_boolean.pht'].state == 'off') return 'lime'
                  else return 'red';
                ]]] 
          state:
            - position: absolute
            - left: 40%
            - top: 35%
            - z-index: 0
            - font-size: 12px
          custom_fields:
            status:
              - position: absolute
              - left: 32%
              - top: 70%
              - z-index: 2
              - width: 30px
        card_mod:
          style: |
            ha-card {
            border-radius: 8px !important;
             }
      - type: custom:mushroom-number-card
        name: ''
        entity: input_number.pht
        tap_action:
          action: toggle
        layout: horizontal
        display_mode: slider
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: none !important;
                --shape-color: none;
                
                }
            mushroom-number-value-control$:
              mushroom-slider$: |
                .slider {
                 position: absolute !important;
                 width: 90% !important;
                 left: 12px;
                 z-index: 0;
                 height: 44px !important;
                 flex-shrink: 1;
                 flex-grow: 1;
                 margin-top:2px;
                 --bg-color: rgba(169, 169, 169, 0.2);
                 --main-color: {{ 'rgba(0, 255, 0, .42)' if is_state('switch.pi_hole', 'on') else 'rgba(255, 0, 0, .2)' }}  ;
                 }
            .: |
              ha-state-icon {
                color:transparent;
                --icon-symbol-size: 1px;
                      }

              ha-card {
                  border: none !important;
                  background: none;
                      }  
            mushroom-state-info$: |
              .container {
                flex-direction: row !important;
                position: absolute !important;
                width: 79%;
                top: 17px;
                align-items: baseline;
              }
              .primary {
                color: transparent !important;
                position: relative;
                   flex-shrink: 0;
                flex-grow: 1;
                z-index: 1;
              }
              .primary:after {
                content: "{{states('input_number.pht')| int(0)}} Min ";
                position:absolute;
                color: {{ 'lime' if is_state('switch.pi_hole', 'on') else 'red' }}  ;
                left: 1px;
                font-weight: 400;
                top: 3px;
                width: 30px !important;
                z-index: 1 ;
              }
              .secondary {
                color: transparent !important;
                position: relative ;
                flex-shrink: 1;
                flex-grow: 1;
                          }
card_mod:
  style: |
    ha-card {
    background-image: url("/local/pics/wood.png"); 
    border: none;
    }
4 Likes

What’s the switch? I need a timer that can be controlled from gui, which turns off the automation of the hood in the bathroom

The switch is the actual device you are trying to control.

For example my server fan

The remaining timer, input_number and input_boolean are virtual.

Is the hood controlled by a switch connected to HA?

yes, the hood is connected to HA

Hi all,

I’m trying to “replicate” the Minimalist Room Card with Mushroom and Card-Mod. I’m doing it with copy&paste of what I found on the web, I’m not so good with card-mod and I need a little bit of help :smiley:

This is what I’ve done:

Imgur

The issues that I have are:

  1. I would like that the height of the room on the top right “Bagno Ale”, would be the same as all the other rooms.

  2. I would like in the bottom half of each card, a big icon in the background so I can easily know which room it is at a glance. Best thing is that it changes color from grey to orange if I turn on a light of that room.

  3. Put a shadow to the whole card, or even change other stuff.

Here is the code of the room “Salone” on the top left

Card "Salone"
type: custom:mod-card
style:
  .: |
    ha-card {
       background: var(--ha-card-background, var(--card-background-color, #fff));
    }
  hui-vertical-stack-card:
    $:
      .: |
        #root {
          gap: 0px !important;
        }
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Salone
          icon: mdi:sofa
          entity: light.salone_tavolo_finestra
          icon_color: '{% if is_state(''light.all_salone'',''on'') %} orange {% endif %}'
          tap_action:
            action: toggle
          double_tap_action:
            action: call-service
            service: light.turn_off
            target:
              area_id: soggiorno
            data: {}
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                --ha-card-background: none;
              }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: sensor.riscaldamento_temperature
              content: '{{ states(''sensor.riscaldamento_temperature'') | round(1) }} ºC'
              icon: >-
                {% set state=states('sensor.riscaldamento_temperature')|float(0)
                %} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
                mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
              icon_color: >-
                {% set state=states('sensor.riscaldamento_temperature')|float(0)
                %} {% if state<20 %} blue {% elif state<24 %} green {% elif
                state<27 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: salone
            - type: template
              entity: sensor.riscaldamento_humidity
              content: '{{ states(''sensor.riscaldamento_humidity'') | round(1) }} %'
              icon: mdi:water-percent
              icon_color: >-
                {% set state=states('sensor.riscaldamento_humidity')|float(0) %}
                {% if state<30 %} blue {% elif state<60 %} green {% elif
                state<80 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: salone
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px; 
                margin-top: -10px;
                padding-top: 0px;
                --chip-height: 35px;
              }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_tavolo_finestra
              icon_color: >-
                {% if is_state('light.salone_tavolo_finestra','on') %} orange {%
                endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    --ha-card-background: none;
                  }
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_divano_finestra
              icon_color: >-
                {% if is_state('light.salone_divano_finestra','on') %} orange {%
                endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    padding-right: 50px !important;
                    --ha-card-background: none;
                  }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_tavolo_corridoio
              icon_color: >-
                {% if is_state('light.salone_tavolo_corridoio','on') %} orange
                {% endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    --ha-card-background: none;
                  }
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_divano_corridoio
              icon_color: >-
                {% if is_state('light.salone_divano_corridoio','on') %} orange
                {% endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    padding-right: 50px !important;
                    --ha-card-background: none;
                  }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: binary_sensor.aqara_finestra_salone_piccola_contact
              icon: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_piccola_contact')
                %}  {% if state=='on'%} mdi:window-open {% else %}
                mdi:window-closed {% endif %}
              icon_color: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_piccola_contact')
                %}  {% if state=='on'%} amber {% elif state=='unavailable' %}
                red {% else %} grey {% endif %}
              tap_action:
                action: more-info
            - type: template
              entity: binary_sensor.aqara_finestra_salone_grande_contact
              icon: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_grande_contact')
                %}  {% if state=='on'%} mdi:window-open-variant{% else %}
                mdi:window-closed-variant {% endif %}
              icon_color: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_grande_contact')
                %}  {% if state=='on'%} amber {% elif state=='unavailable' %}
                red {% else %} grey {% endif %}
              tap_action:
                action: more-info
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px; 
                margin-top: -10px;
                padding-top: 0px;
                --chip-height: 40px;
              }
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:fire
          entity: climate.salone
          icon_color: >-
            {% set state=states('climate.salone') %}  {% if state=='heat'%}
            amber {% else %} grey {% endif %}
          tap_action:
            action: navigate
            navigation_path: '#salone-hvac'
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:snowflake
          entity: climate.153931628014499_climate
          icon_color: >-
            {% set state=states('climate.153931628014499_climate') %}  {% if
            state=='off'%} grey {% else %} blue {% endif %}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:robot-vacuum
          entity: vacuum.gregorio
          icon_color: >-
            {% set state=states('vacuum.gregorio')  %}  {% set
            stanza=states('input_text.gregorio_stanza_pulizia')  %}  {% if state
            == "cleaning" and stanza=='8'%} green   {% elif state == "returning"
            and stanza=='8' %} yellow   {% else  %} grey {% endif %}
          tap_action:
            action: call-service
            service: script.DO_Gregorio_pulisci_stanza
            service_data:
              rooms: 8
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
              {% if is_state('vacuum.gregorio','cleaning') and
              is_state('input_text.gregorio_stanza_pulizia','8') %}
                ha-card { animation: blink 2s linear infinite; }
                @keyframes blink { 50% {opacity: 0;} }
              {%- endif %}
        - type: custom:mushroom-template-card
          primary: null
          icon: >-
            {% set state=states('cover.tapparelle_salone') %}  {% if
            state=='open'%} mdi:window-shutter-open {% else %}
            mdi:window-shutter {% endif %}
          entity: cover.tapparelle_salone
          icon_color: >-
            {% set state=states('cover.tapparelle_salone') %}  {% if
            state=='open'%} amber {% else %} grey {% endif %}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }

And here is the code of the room “Bagno Ale” on the top right:

Card "Bagno Ale"
type: custom:mod-card
style:
  .: |
    ha-card {
       background: var(--ha-card-background, var(--card-background-color, #fff));
    }
  hui-vertical-stack-card:
    $:
      .: |
        #root {
          gap: 0px !important;
        }
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Bagno Ale
          icon: mdi:face-woman-shimmer
          entity: light.bagno_ale
          icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
          tap_action:
            action: toggle
          double_tap_action:
            action: call-service
            service: light.turn_off
            target:
              area_id: bagno_piccolo
            data: {}
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                --ha-card-background: none;
              }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: sensor.bagno_piccolo_temperature
              content: '{{ states(''sensor.bagno_piccolo_temperature'') | round(1) }} ºC'
              icon: >-
                {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
                %} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
                mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
              icon_color: >-
                {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
                %} {% if state<20 %} blue {% elif state<24 %} green {% elif
                state<27 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: bagno_piccolo
            - type: template
              entity: sensor.bagno_piccolo_humidity
              content: '{{ states(''sensor.bagno_piccolo_humidity'') | round(1) }} %'
              icon: mdi:water-percent
              icon_color: >-
                {% set state=states('sensor.bagno_piccolo_humidity')|float(0) %}
                {% if state<30 %} blue {% elif state<60 %} green {% elif
                state<80 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: bagno_piccolo
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px; 
                margin-top: -10px;
                padding-top: 0px;
                --chip-height: 35px;
              }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.bagno_ale
              icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    padding-right: 50px !important;
                    --ha-card-background: none;
                  }
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:fire
          entity: climate.bagno_piccolo
          icon_color: >-
            {% set state=states('climate.bagno_piccolo') %}  {% if
            state=='heat'%} amber {% else %} grey {% endif %}
          tap_action:
            action: navigate
            navigation_path: '#bagno_ale-hvac'
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:robot-vacuum
          entity: vacuum.gregorio
          icon_color: >-
            {% set state=states('vacuum.gregorio')  %}  {% set
            stanza=states('input_text.gregorio_stanza_pulizia')  %}  {% if state
            == "cleaning" and stanza=='4'%} green   {% elif state == "returning"
            and stanza=='4' %} yellow   {% else  %} grey {% endif %}
          tap_action:
            action: call-service
            service: script.DO_Gregorio_pulisci_stanza
            service_data:
              rooms: 4
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
              {% if is_state('vacuum.gregorio','cleaning') and
              is_state('input_text.gregorio_stanza_pulizia','4') %}
                ha-card { animation: blink 2s linear infinite; }
                @keyframes blink { 50% {opacity: 0;} }
              {%- endif %}

The code that I don’t understand, is the first part of both cards:

type: custom:mod-card
style:
  .: |
    ha-card {
       background: var(--ha-card-background, var(--card-background-color, #fff));
    }
  hui-vertical-stack-card:
    $:
      .: |
        #root {
          gap: 0px !important;
        }

I’m trying to put some card-mod/css attributes, like “color: red”, just to see if something changes, but actually nothing changes :smiley:

Could someone help me please? It would be very much appreciated :slight_smile:
Thanks!

I don’t recommend the copy and paste method.

Please review this first for Mushroom card editing and the second link for almost all additional mod info…

Your posted card was all over the place. I cut a portion of the unnecessary code out so you can play around with the settings.

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Bagno Ale
        icon: mdi:face-woman-shimmer
        entity: light.bagno_ale
        icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
        tap_action:
          action: toggle
        double_tap_action:
          action: call-service
          service: light.turn_off
          target:
            area_id: bagno_piccolo
          data: {}
        card_mod:
          style: |
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 0px !important;
              box-shadow: none;
              --ha-card-background: none;
              border: none;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.bagno_piccolo_temperature
            content: '{{ states(''sensor.bagno_piccolo_temperature'') | round(1) }} ºC'
            icon: >-
              {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
              %} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
              mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
            icon_color: >-
              {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
              %} {% if state<20 %} blue {% elif state<24 %} green {% elif
              state<27 %} amber {% else %} red {% endif %}
            tap_action:
              action: navigate
              navigation_path: bagno_piccolo
            card_mod:
              style: |
                ha-card {
                 --chip-box-shadow: none;
                 --chip-background: none;
                 --chip-spacing: 0px; 
                 margin-top: -10px;
                  padding-top: 0px;
                 --chip-height: 55px;
                  border: none;
          - type: template
            entity: sensor.bagno_piccolo_humidity
            content: '{{ states(''sensor.bagno_piccolo_humidity'') | round(1) }} %'
            icon: mdi:water-percent
            icon_color: >-
              {% set state=states('sensor.bagno_piccolo_humidity')|float(0) %}
              {% if state<30 %} blue {% elif state<60 %} green {% elif state<80
              %} amber {% else %} red {% endif %}
            tap_action:
              action: navigate
              navigation_path: bagno_piccolo
            card_mod:
              style: |
                ha-card {
                 --chip-box-shadow: none;
                 --chip-background: none;
                 --chip-spacing: 0px; 
                 margin-top: -10px;
                  padding-top: 0px;
                 --chip-height: 55px;
                  border: none;
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:lightbulb
            entity: light.bagno_ale
            icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  padding-top: 5px !important;
                  padding-bottom: 0px !important;
                  box-shadow: none;
                  margin-right: 50px !important;
                  padding-right: 50px !important;
                 background: none;
                   border: none;
                }
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:fire
        entity: climate.bagno_piccolo
        icon_color: >-
          {% set state=states('climate.bagno_piccolo') %}  {% if state=='heat'%}
          amber {% else %} grey {% endif %}
        tap_action:
          action: navigate
          navigation_path: '#bagno_ale-hvac'
        card_mod:
          style: |
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 0px !important;
              box-shadow: none;
              margin-left: 100px;
              padding-right: 50px !important;
              background: none;
               border: none;
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:robot-vacuum
        entity: vacuum.gregorio
        icon_color: >-
          {% set state=states('vacuum.gregorio')  %}  {% set
          stanza=states('input_text.gregorio_stanza_pulizia')  %}  {% if state
          == "cleaning" and stanza=='4'%} green   {% elif state == "returning"
          and stanza=='4' %} yellow   {% else  %} grey {% endif %}
        tap_action:
          action: call-service
          service: script.DO_Gregorio_pulisci_stanza
          service_data:
            rooms: 4
        card_mod:
          style: |
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 0px !important;
              box-shadow: none;
              margin-left: 100px;
              padding-right: 50px !important;
             background: none;
              border: none;
            }
            {% if is_state('vacuum.gregorio','cleaning') and
            is_state('input_text.gregorio_stanza_pulizia','4') %}
              ha-card { animation: blink 2s linear infinite; }
              @keyframes blink { 50% {opacity: 0;} }
            {%- endif %}

This is how it works,

thank you so much.

But I can’t enter code into my chip card (I attach code).

Thanks again for the help.

type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
entity: light.luci_soggiorno
show_state: false
show_label: true
label: |
  [[[
    return Math.round(states['sensor.weather_station_temperature'].state) + "°C" + "&nbsp&nbsp" + Math.round(states['sensor.weather_station_humidity'].state) + " %";
  ]]]
tap_action:
  action: navigate
  navigation_path: '#soggiorno'
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: light.luci_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: switch.interruttori_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:power-socket-eu
            {% else %}
              mdi:power-socket-eu
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              red
            {% else %}
              white
            {% endif %} 
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(140, 199, 161, 1)' if is_state('switch.interruttori_soggiorno', 'on') else 'rgba(140, 199, 161, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('switch.interruttori_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 30px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if is_state('switch.interruttori_soggiorno', 'on') %}
                animation: tilt 4s steps(1) infinite, blink 4s infinite; 
                transform-origin: 50% 92%;
                {% else %}
                {% endif %}
              }
              @keyframes tilt {
                0%, 100% { transform: rotate(0deg); }
                33% { transform: rotate(8deg); }
                66% { transform: rotate(-8deg); }
              }
              @keyframes blink {
                0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
                25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
                50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
                75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
              }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: climate.soggiorno
          icon: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              mdi:fire
            {% else %}
              mdi:thermostat
            {% endif %}
          icon_color: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: media_player.tv_samsung_58
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:television
            {% else %}
              mdi:television
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              blue
            {% else %}
              white  
            {% endif %}
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(186, 233, 234, 1)' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") else 'rgba(186, 233, 234, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") %}
                animation: fire 1.5s infinite;
                transform-origin: 50% 85%;
                {% else %}
                {% endif %}
              }
              @keyframes fire {
                  0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv_samsung_58', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv_samsung_58', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 30px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if is_state('media_player.tv_samsung_58', 'on') %}
                {{ '--icon-animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;' if is_state(config.entity, 'on') else '--icon-animation: tube-off 2s linear forwards;' }}
              }
              @keyframes tube-off {
                1%, 15% { transform: scale(1, 0.2); }
                40%  { transform: scale(0.2); opacity: 1; }
                100%  { transform: scale(0.2); opacity: 0; }
              }
              @keyframes tube-on {
                0% { transform: scale(0.2); opacity: 0; }
                5%  { transform: scale(1, 0.2); opacity: 0.3; }
                15%  { transform: scale(1); opacity: 0.4; }
                100%  { transform: scale(1); opacity: 1; }
              }
              @keyframes flicker {
                0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
                32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
              }
styles:
  grid:
    - grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: center
    - position: absolute
    - width: 80px
    - height: 80px
    - left: 0
    - bottom: 0
    - margin: 0 0 -25px -25px
    - background: '#72F3CD'
    - border-radius: 200px
  icon:
    - width: 35px
    - color: black
    - opacity: '0.6'
    - margin: 0 0 18px 15px
  card:
    - padding: 10px 20px 10px 10px
    - border: solid 2px rgba(114, 243, 205, 1)
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#72F3CD'
    - margin-bottom: 5px
  label:
    - justify-self: start
    - align-self: start
    - font-size: 16px
    - font-weight: 500
    - margin-bottom: 50px
    - color: '#fff'
type or paste code here

This will add what you are looking.
chrome-capture-2024-3-24

type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
entity: light.luci_soggiorno
show_state: false
show_label: true
label: |
  [[[
    return Math.round(states['sensor.weather_station_temperature'].state) + "°C" + "&nbsp&nbsp" + Math.round(states['sensor.weather_station_humidity'].state) + " %";
  ]]]
tap_action:
  action: navigate
  navigation_path: '#soggiorno'
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: light.luci_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: switch.interruttori_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:power-socket-eu
            {% else %}
              mdi:power-socket-eu
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              red
            {% else %}
              white
            {% endif %} 
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card:after {
                    content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgb(var(--rgb-orange));
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50% 50%;
                    top: -5px;
                    right: -10px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                    z-index: 1;
                                  }
              ha-card {
                --chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(140, 199, 161, 1)' if is_state('switch.interruttori_soggiorno', 'on') else 'rgba(140, 199, 161, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('switch.interruttori_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 30px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if is_state('switch.interruttori_soggiorno', 'on') %}
                animation: tilt 4s steps(1) infinite, blink 4s infinite; 
                transform-origin: 50% 92%;
                {% else %}
                {% endif %}
              }
              @keyframes tilt {
                0%, 100% { transform: rotate(0deg); }
                33% { transform: rotate(8deg); }
                66% { transform: rotate(-8deg); }
              }
              @keyframes blink {
                0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
                25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
                50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
                75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
              }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: climate.soggiorno
          icon: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              mdi:fire
            {% else %}
              mdi:thermostat
            {% endif %}
          icon_color: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: media_player.tv_samsung_58
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:television
            {% else %}
              mdi:television
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              blue
            {% else %}
              white  
            {% endif %}
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(186, 233, 234, 1)' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") else 'rgba(186, 233, 234, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") %}
                animation: fire 1.5s infinite;
                transform-origin: 50% 85%;
                {% else %}
                {% endif %}
              }
              @keyframes fire {
                  0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv_samsung_58', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv_samsung_58', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 30px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if is_state('media_player.tv_samsung_58', 'on') %}
                {{ '--icon-animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;' if is_state(config.entity, 'on') else '--icon-animation: tube-off 2s linear forwards;' }}
              }
              @keyframes tube-off {
                1%, 15% { transform: scale(1, 0.2); }
                40%  { transform: scale(0.2); opacity: 1; }
                100%  { transform: scale(0.2); opacity: 0; }
              }
              @keyframes tube-on {
                0% { transform: scale(0.2); opacity: 0; }
                5%  { transform: scale(1, 0.2); opacity: 0.3; }
                15%  { transform: scale(1); opacity: 0.4; }
                100%  { transform: scale(1); opacity: 1; }
              }
              @keyframes flicker {
                0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
                32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
              }
styles:
  grid:
    - grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: center
    - position: absolute
    - width: 80px
    - height: 80px
    - left: 0
    - bottom: 0
    - margin: 0 0 -25px -25px
    - background: '#72F3CD'
    - border-radius: 200px
  icon:
    - width: 35px
    - color: black
    - opacity: '0.6'
    - margin: 0 0 18px 15px
  card:
    - padding: 10px 20px 10px 10px
    - border: solid 2px rgba(114, 243, 205, 1)
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#72F3CD'
    - margin-bottom: 5px
  label:
    - justify-self: start
    - align-self: start
    - font-size: 16px
    - font-weight: 500
    - margin-bottom: 50px
    - color: '#fff'

3 Likes

Thank you so much, you are the best.

Thank you very much for providing this information. I convey my gratitude to the friend who shares it. @Ildar_Gabdullin

This was very important for me because there were some inconsistencies in the last dashboard I made. Even though I tried this method before, I couldn’t get any results, but now that I did it properly, it worked. Thank you very much again

By the way this is my last dashboard. I am still working on it. A strava app inspired dashboard.

3 Likes

Hello, I am trying to have a chip at the bottom right of a template card using the stack-in card. I been successful in doing that part but trying to animate the chip card has been impossible for me. Can someone help? Here is the code:

  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
            state: 'off'
        chip:
          type: template
          icon_color: red
          icon: mdi:door-open
    alignment: end
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if binary_sensor.lumi_lumi_sensor_magnet_aq2_opening', 'off') %}
              animation: pulse 2s ease-in-out infinite;
            {% endif %}
          }
        .: |
          ha-card {
            top: -42px;
            z-index: 0;                
          }
          :host {
            --ha-card-border-width: 0px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Here you go. Several issues.

  1. Chips require more complex mod code
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
  1. Your IF statement was incorrect. This is the corrected statement.
    {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'off' %}

  2. The animation required @keyframes

type: custom:mushroom-chips-card
chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
            state: 'off'
        chip:
          type: template
          icon_color: red
          icon: mdi:door-open
alignment: end
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
        {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'off' %}
          animation: pulse 2s ease-in-out infinite;
        {% endif %}
          }
        @keyframes pulse {
        0%  {pacity: 1}     
        50% {opacity: 0}
        100% {opacity: 1}
            }

       
    .: |
          ha-card {
            top: -42px;
            z-index: 0;                
          }
          :host {
            --ha-card-border-width: 0px;
          }
1 Like

Hi all,

This evening i’m struggling with the alignment of 3 mushroom cards in a horizontal stack. I searched and tried some options from this forum, but still didn’t find a solution yet.

Could somebody give me a bump in the correct direction on how to get my buttons centered horizontally (on the green line)?

center

My code:

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: action
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/home
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon: mdi:arrow-left
  - type: custom:mushroom-title-card
    title: Woonkamer
    alignment: center
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.time
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
    card_mod:
      style: |
        ha-card {
        background: none;
        box-shadow: none;
        text-align: center
        }
    alignment: end

I’m not sure I understand where you want the chips. Between the orange lines?

Thank you so much! I am trying to understand but I guess I am missing something. Can you explain what is the mistake in this one?

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Home Control
    secondary: '{{ states(''sensor.temp_avg'') }}°C - {{ states(''sensor.hum_avg'') }}%'
    icon: >-
      {% if is_state('climate.living_room_ac', 'heat') or
      (state_attr('climate.living_room', 'temperature') > 15) or
      is_state('climate.bedroom_ac', 'heat') or
      (is_state('binary_sensor.temperature_determiner', 'on') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on'))) %}
        mdi:fire
      {% elif (is_state('climate.living_room_ac', 'cool') or
      is_state('climate.bedroom_ac', 'cool') or
      (is_state('binary_sensor.temperature_determiner', 'off') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on')))) and
      (state_attr('climate.living_room', 'temperature') < 15) %}
        mdi:snowflake
      {% else %}
        mdi:home
      {% endif %}
    icon_color: >-
      {% if is_state('climate.living_room_ac', 'heat') or
      (state_attr('climate.living_room', 'temperature') > 15) or
      is_state('climate.bedroom_ac', 'heat') or
      (is_state('binary_sensor.temperature_determiner', 'on') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on'))) %}
        red
      {% elif (is_state('climate.living_room_ac', 'cool') or
      is_state('climate.bedroom_ac', 'cool') or
      (is_state('binary_sensor.temperature_determiner', 'off') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on')))) and
      (state_attr('climate.living_room', 'temperature') < 15) %}
        blue
      {% else %}
        yellow
      {% endif %}
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: fire 1.5s infinite;
            transform-origin: 50% 85%;
          }
          @keyframes fire {
              0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          }

Thank you!

  1. ha-state-icon not ha-icon

  2. --icon-animation: should be animation:

  3. There was an indent issue in the animation code as well.

chrome-capture-2024-3-25

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Home Control
    secondary: '{{ states(''sensor.temp_avg'') }}°C - {{ states(''sensor.hum_avg'') }}%'
    icon: >-
      {% if is_state('climate.living_room_ac', 'heat') or
      (state_attr('climate.living_room', 'temperature') > 15) or
      is_state('climate.bedroom_ac', 'heat') or
      (is_state('binary_sensor.temperature_determiner', 'on') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on'))) %}
        mdi:fire
      {% elif (is_state('climate.living_room_ac', 'cool') or
      is_state('climate.bedroom_ac', 'cool') or
      (is_state('binary_sensor.temperature_determiner', 'off') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on')))) and
      (state_attr('climate.living_room', 'temperature') < 15) %}
        mdi:snowflake
      {% else %}
        mdi:home
      {% endif %}
    icon_color: >-
      {% if is_state('climate.living_room_ac', 'heat') or
      (state_attr('climate.living_room', 'temperature') > 15) or
      is_state('climate.bedroom_ac', 'heat') or
      (is_state('binary_sensor.temperature_determiner', 'on') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on'))) %}
        red
      {% elif (is_state('climate.living_room_ac', 'cool') or
      is_state('climate.bedroom_ac', 'cool') or
      (is_state('binary_sensor.temperature_determiner', 'off') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on')))) and
      (state_attr('climate.living_room', 'temperature') < 15) %}
        blue
      {% else %}
        yellow
      {% endif %}
    layout: vertical
    card_mod:
     style: |
      ha-state-icon {
       animation: fire 1.5s infinite;
       transform-origin: 50% 85%;
       }
      @keyframes fire {
      0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
       }

hey,

i want to read an entity-state (in this case: "ontime: ") - how do i get this right? like this?

        badge_icon: >-
          {% if
          state_attr('sensor.berlin_grunbergallee_to_berlin_sudkreuz','ontime=true')
          %}
            mdi:help
          {% else %}
            mdi:check-bold
          {% endif %}

thanks!

This should work…

 badge_icon: >-
      {%- set i = state_attr('sensor.berlin_grunbergallee_to_berlin_sudkreuz','ontime') -%}
      {%- if i == 'true' -%}
        mdi:help
      {%- else -%}
       mdi:check-bold
      {%- endif -%}
1 Like

wow. i’d never come to this solution. i’ll try this!

Multiple ways to skin a cat :smiley_cat:

badge_icon: >-
      {{ 'mdi:help' if state_attr('sensor.berlin_grunbergallee_to_berlin_sudkreuz', 'ontime') ==
      'true' else ' mdi:check-bold' }}