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

[cloudbr34k (Apples)]

Just saw this, this is great mate, how do you do this for vertical card??

[filikun]

EDIT: Changed from stack-in-card and tweaked it to work.

Also added this to theme masonry-view-card-margin: 0px 0px 0px 0px

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-template-card
    primary: Av
    secondary: ''
    icon: mdi:fan-off
    tap_action:
      action: call-service
      service: fan.turn_off
      data: {}
      target:
        entity_id: fan.storblas
    icon_color: |-
      {% if states('fan.storblas') == "off" %} red {% else %}
        grey
      {% endif %}
    card_mod:
      style:
        .: |
          :host {
            {% if states('fan.storblas') == "off" %}
              --primary-text-color: var(--red-color);
              --secondary-text-color: var(--red-color);
            {% else  %}
              --primary-text-color: gray;            
            {% endif %}
          }
          ha-card {
            --ha-card-border-width: 1px !important;
            --ha-card-border-radius: 28px 0px 0px 28px;
            {% if states('fan.storblas') == "off" %}
              background: rgba(var(--mush-rgb-red), 0.1); 
              --ha-card-border-color: var(--google-active-card) !important;
            {% endif %}           
          }               
  - type: custom:mushroom-template-card
    primary: På
    secondary: ''
    icon: mdi:fan
    tap_action:
      action: call-service
      service: fan.turn_on
      data: {}
      target:
        entity_id: fan.storblas
    icon_color: |-
      {% if states('fan.storblas') == "on" %} green {% else %}
        gray
      {% endif %}
    card_mod:
      style:
        .: |
          :host {
            {% if states('fan.storblas') == "on" %}
              --primary-text-color: var(--green-color);
              --secondary-text-color: var(--green-color);
            {% else  %}
              --primary-text-color: gray;            
            {% endif %}
          }
          ha-card {
            --ha-card-border-width: 1px !important;         
            --ha-card-border-radius: 0px 28px 28px 0px;          
            {% if states('fan.storblas') == "on" %}
              background: rgba(var(--mush-rgb-green), 0.1);
              --ha-card-border-color: var(--google-active-card) !important;
            {% endif %}           
          } 
layout:
  grid-template-columns: 1fr 1fr

---

OG post:

I’m not sure what’s going on here but for some reason on refresh I randomly get’s margin between my mushroom in a stack-in-card. I don’t know if this is mushroom or stack-in but if anyone of you had this problem please let me know how to fix it. It only happens randomly.

Wrong

Right

type: custom:stack-in-card
keep:
  border_radius: true
  background: true
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Av
    secondary: ''
    icon: mdi:fan-off
    tap_action:
      action: call-service
      service: fan.turn_off
      data: {}
      target:
        entity_id: fan.lillblas
    icon_color: |-
      {% if states('fan.lillblas') == "off" %} red {% else %}
        grey
      {% endif %}
    card_mod:
      style:
        .: |
          :host {
            {% if states('fan.lillblas') == "off" %}
              --primary-text-color: var(--red-color);
              --secondary-text-color: var(--red-color);
            {% else  %}
              --primary-text-color: gray;            
            {% endif %}
          }
          ha-card {
            --ha-card-border-width: 1px !important;
            --ha-card-border-radius: 28px 0px 0px 28px;
            {% if states('fan.lillblas') == "off" %}
              background: rgba(var(--mush-rgb-red), 0.1); 
              --ha-card-border-color: var(--google-active-card) !important;
            {% endif %}           
          }            
  - type: custom:mushroom-template-card
    primary: På
    secondary: ''
    icon: mdi:fan
    tap_action:
      action: call-service
      service: fan.turn_on
      data: {}
      target:
        entity_id: fan.lillblas
    icon_color: |-
      {% if states('fan.lillblas') == "on" %} green {% else %}
        gray
      {% endif %}
    card_mod:
      style:
        .: |
          :host {
            {% if states('fan.lillblas') == "on" %}
              --primary-text-color: var(--green-color);
              --secondary-text-color: var(--green-color);
            {% else  %}
              --primary-text-color: gray;            
            {% endif %}
          }
          ha-card {     
            --ha-card-border-width: 1px !important;         
            --ha-card-border-radius: 0px 28px 28px 0px;          
            {% if states('fan.lillblas') == "on" %}
              background: rgba(var(--mush-rgb-green), 0.1);
              --ha-card-border-color: var(--google-active-card) !important;
            {% endif %}           
          } 
card_mod:
  style:
    .: |
      ha-card {
            background: transparent !important;
      }   

[burg93 (Adam)]

Keen to see this once it’s complete! Very much what I’ve been looking for, if only there was a way to subscribe to a “tell me when complete” topic on here!

[Guizmos]

I try to put an animation on the icons of the conditional chip-cards.
But impossible to find a solution that works for the different chip-cards, only the first one is animated.

Here is the code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.update
            state: 'on'
        chip:
          type: template
          entity: input_boolean.notifications
          icon: mdi:bell
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                --chip-border-width: 0;
                --chip-box-shadow: {{ "0px 0px 30px red" if is_state('input_boolean.update', 'on') }};
              }

              /* Notification indicator */
              ha-card:after {
                /* Turn on indicator if there is a notification */
                {% set notifications = (expand(states.group.grp_update_all) | selectattr('state', 'eq', 'on') | list | count) %}
                {% if notifications > 0 %}
                  content: "{{ expand(states.group.grp_update_all) | selectattr( 'state', 'eq', 'on') | list | count }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-red));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  font-size: 0.3em;
                {% endif %}
                
                /* Position & style notification */
                position: absolute;
                background: rgb(var(--rgb-red));
                border-radius: 50%;
                top: -3px;
                right: -3px;
                width: 15px;
                height: 15px;
              }
      - type: conditional
        conditions:
          - entity: input_boolean.update
            state: 'on'
        chip:
          type: template
          entity: input_boolean.notifications
          icon: mdi:store
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                --chip-border-width: 0;
                --chip-box-shadow: {{ "0px 0px 30px red" if is_state('input_boolean.update', 'on') }};
              }
              /* Notification indicator */
              ha-card:after {
                {% if states('sensor.hacs', ['1','2','3','4','5','6','7','8','9','10']) %}
                  content: "{{ states('sensor.hacs') |float |int }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-red));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  font-size: 0.3em;
                {% endif %}
                /* Position & style notification */
                position: absolute;
                background: rgb(var(--rgb-red));
                border-radius: 50%;
                top: -3px;
                right: -3px;
                width: 15px;
                height: 15px;
              } 
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-icon {
            animation: boing 1.5s ease infinite;
            transform-origin: 50% 90%;
          }
          @keyframes boing {
            0% { transform: scale3d(1, 1, 1); }
            7% { transform: scale3d(1.25, 0.75, 1); }
            10% { transform: scale3d(0.75, 1.25, 1); }
            12% { transform: scale3d(1.15, 0.85, 1); }
            16% { transform: scale3d(0.95, 1.05, 1); }
            19% { transform: scale3d(1.05, 0.95, 1); }
            25% { transform: scale3d(1, 1, 1); }
          }
        mushroom-template-chip:nth-child(2)$: |
          ha-icon {
            animation: fade-out 1.5s infinite;
            transform-origin: 50% 90%;
          }
          @keyframes fade-out {
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
          }
        mushroom-template-chip:nth-child(3)$: |
          ha-icon { 
            animation: sprinkle 2s linear infinite;
            transform-origin: 29% 88%; 
          }
          @keyframes sprinkle {
            0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
            1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
            6%, 21%, 36%, 51% { transform: rotate(2deg); }
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      /* margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 4;
      top: 170px;
      /* Add background to host to prevent transparent card */
      border-radius: var(--ha-card-border-radius, 12px);

      /* Assign album art color to variable used in sticky media player */
      {% if is_state('binary_sensor.ping_dalg_pc', 'on') %}
      {% elif is_state('binary_sensor.ping_dalg_dell', 'on') %}
      {% elif is_state('input_boolean.notifications', 'on') %}
      {% else %}
        /* Hide the sticky media player when it is idle */
        display: none !important;
      {% endif %}
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";
      top: 0px;
      position: fixed;

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      /* background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      /* border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.3);

      /* Set styling of card */
      border-radius: var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      /* background: rgba(var(--rgb-card-background-color), 0.3);

      /* Set styling of card */
      /* border-radius: var(--ha-card-border-radius, 12px);
      /* box-shadow: var(--ha-card-box-shadow);
      /* border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));

      /* Adjust opacity of card */
      background: transparent;

      /* Set styling of card */
      border-radius: var(--ha-card-border-radius, 12px);
      box-shadow: none;
      border: none;
    }

[Dibbler (Thomas Bail)]

@Rhysb (Kudos) has shared a lot of animation in a sequence of 5 posts. In one of these is the right handling of chip animations described.

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

Mushroom Animations - Part 1 [Mushroom Chip Animated Scene] I thought I’d share some CSS animations I’ve been working on for Mushroom cards. All these CSS animations require Thomas Lovén’s card_mod. This can be installed via HACS. There are a few, so I’ll probably add them gradually. Make sure to return to this post so you don’t miss out. Built-in Mushroom Animations There are two built-in animations for Mushroom cards that can be used without specifying a…

[Guizmos]

thank you for the answer
I found solution :

add this to each card:

          card_mod:
            style: |
              .content {
                animation: boing 3s ease infinite;
                transform-origin: 50% 90%;
              }
              @keyframes boing {
                0% { transform: scale3d(1, 1, 1); }
                7% { transform: scale3d(1.25, 0.75, 1); }
                10% { transform: scale3d(0.75, 1.25, 1); }
                12% { transform: scale3d(1.15, 0.85, 1); }
                16% { transform: scale3d(0.95, 1.05, 1); }
                19% { transform: scale3d(1.05, 0.95, 1); }
                25% { transform: scale3d(1, 1, 1); }
              }

Complete code :

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.update
            state: 'on'
        chip:
          type: template
          entity: input_boolean.notifications
          icon: mdi:bell
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                --chip-border-width: 0;
                --chip-box-shadow: {{ "0px 0px 30px red" if is_state('input_boolean.update', 'on') }};
              }
              /* Notification indicator */
              ha-card:after {
                /* Turn on indicator if there is a notification */
                {% set notifications = (expand(states.group.grp_update_all) | selectattr('state', 'eq', 'on') | list | count) %}
                {% if notifications > 0 %}
                  content: "{{ expand(states.group.grp_update_all) | selectattr( 'state', 'eq', 'on') | list | count }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-red));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  font-size: 0.3em;
                {% endif %}

                /* Position & style notification */
                position: absolute;
                background: rgb(var(--rgb-red));
                border-radius: 50%;
                top: -3px;
                right: -3px;
                width: 15px;
                height: 15px;
              }
              .content {
                animation: fade-out 1.5s infinite;
                transform-origin: 50% 90%;
              }
              @keyframes fade-out {
                0% { opacity:1; }
                50% { opacity:0; }
                100% { opacity:1; }
              }
      - type: conditional
        conditions:
          - entity: input_boolean.update
            state: 'on'
        chip:
          type: template
          entity: input_boolean.notifications
          icon: mdi:store
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                --chip-border-width: 0;
                --chip-box-shadow: {{ "0px 0px 30px red" if is_state('input_boolean.update', 'on') }};
              }
              /* Notification indicator */
              ha-card:after {
                {% if states('sensor.hacs', ['1','2','3','4','5','6','7','8','9','10']) %}
                  content: "{{ states('sensor.hacs') |float |int }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-red));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  font-size: 0.3em;
                {% endif %}
                /* Position & style notification */
                position: absolute;
                background: rgb(var(--rgb-red));
                border-radius: 50%;
                top: -3px;
                right: -3px;
                width: 15px;
                height: 15px;
              } 
              .content {
                animation: boing 3s ease infinite;
                transform-origin: 50% 90%;
              }
              @keyframes boing {
                0% { transform: scale3d(1, 1, 1); }
                7% { transform: scale3d(1.25, 0.75, 1); }
                10% { transform: scale3d(0.75, 1.25, 1); }
                12% { transform: scale3d(1.15, 0.85, 1); }
                16% { transform: scale3d(0.95, 1.05, 1); }
                19% { transform: scale3d(1.05, 0.95, 1); }
                25% { transform: scale3d(1, 1, 1); }
              }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      /* margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 4;
      top: 170px;
      /* Add background to host to prevent transparent card */
      border-radius: var(--ha-card-border-radius, 12px);

      /* Assign album art color to variable used in sticky media player */
      {% if is_state('binary_sensor.ping_dalg_pc', 'on') %}
      {% elif is_state('binary_sensor.ping_dalg_dell', 'on') %}
      {% elif is_state('input_boolean.notifications', 'on') %}
      {% else %}
        /* Hide the sticky media player when it is idle */
        display: none !important;
      {% endif %}
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";
      top: 0px;
      position: fixed;

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      /* background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      /* border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.3);

      /* Set styling of card */
      border-radius: var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      /* background: rgba(var(--rgb-card-background-color), 0.3);

      /* Set styling of card */
      /* border-radius: var(--ha-card-border-radius, 12px);
      /* box-shadow: var(--ha-card-box-shadow);
      /* border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));

      /* Adjust opacity of card */
      background: transparent;

      /* Set styling of card */
      border-radius: var(--ha-card-border-radius, 12px);
      box-shadow: none;
      border: none;
    }

[weppa]

@rhysb supplied me with the initial solution, so I recommend contacting him. He’s da man.

[tischer.s (Sebastian Tischer)]

I have no idea, what I am doing wrong - just doesn’t show any plugs

      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''green'' }}'
            icon: mdi:power-plug
            tap_action:
              action: more-info
            entity: switch.hwr_steckdose_switch
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''green'' }}'
            icon: mdi:power-plug
            tap_action:
              action: more-info
            entity: switch.abr_steckdose_switch

[Dibbler (Thomas Bail)]

Hi there,

again i have a problem with an animation in a chip. This card is based on @rhysb room card.

There should be an animated fountain icon if the fountain is on. If i put the card mod directly to the chip it is working more or less. Compared to the animation in a template card it just blinks the water part.

And the secon method shown below doen not animate anything

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garten & Terasse
    secondary: '{{ states(''sensor.ga_multisensor_temperature'') }} °C'
    picture: /local/areas/patio.jpg
    entity: light.pa_lights
    tap_action:
      action: navigate
      navigation_path: patio
    hold_action:
      action: call-service
      service: light.turn_off
      target:
        entity_id: light.pa_lights
    fill_container: true
    layout: horizontal
    card_mod:
      style: |
        :host {
          background: 
          {% if is_state('light.pa_lights', 'on') %}
            rgba(var(--rgb-yellow), 0.2);
          {% else %}
            rgba(var(--rgb-primary-text-color), 0.025);
          {% endif %}
          --mush-icon-size: 76px;
          --ha-card-border-width: 0;
          height: 66px;
          margin-left: -24px !important;
        }
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: switch.pa_fountain
            state: 'on'
        chip:
          type: template
          icon_color: blue
          icon: mdi:fountain
    card_mod:
      style: |
        mushroom-conditional-chip:nth-child(1)$: |
          ha-icon {
            animation: fountain 1.5s ease infinite;
          }
          @keyframes fountain {
            0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
            50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
            60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
            70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
            80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
         }       
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

What do i do wrong? Any help/hint is appreciated

[Guizmos]

Hi

I wrote the solution above.

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

thank you for the answer I found solution : add this to each card: card_mod: style: | .content { animation: boing 3s ease infinite; transform-origin: 50% 90%; } @keyframes boing { 0% { transform: scale3d(1, 1, 1); } 7% { transform: scale3d(1.25, 0.75, 1); } 10% { transform: scale3d(0.75, 1.25, 1); } 12% { transform: scale3d(1.15, 0.85,…

Here is your code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garten & Terasse
    secondary: '{{ states(''sensor.ga_multisensor_temperature'') }} °C'
    picture: /local/areas/patio.jpg
    entity: light.pa_lights
    tap_action:
      action: navigate
      navigation_path: patio
    hold_action:
      action: call-service
      service: light.turn_off
      target:
        entity_id: light.pa_lights
    fill_container: true
    layout: horizontal
    card_mod:
      style: |
        :host {
          background: 
          {% if is_state('light.pa_lights', 'on') %}
            rgba(var(--rgb-yellow), 0.2);
          {% else %}
            rgba(var(--rgb-primary-text-color), 0.025);
          {% endif %}
          --mush-icon-size: 76px;
          --ha-card-border-width: 0;
          height: 66px;
          margin-left: -24px !important;
        }
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: switch.pa_fountain
            state: 'on'
        chip:
          type: template
          icon_color: blue
          icon: mdi:fountain
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0;
                --chip-border-width: 0;
              }
              .content {
                animation: fountain 1.5s ease infinite;
              }
              @keyframes fountain {
                0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
                50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
                60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
                70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
                80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
              }  
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

[Dibbler (Thomas Bail)]

@Guizmos Thanks for your help. As described the animation with the card mod directly at the chip is working, but not as expected.

This is the animation in a template card

And this is the animation in the chips card

As you see the template animation is like a fountain and the chip animation is like blinking.

So the big question is Why!

[Guizmos]

Your animation is set for a large icon size.
I wouldn’t be able to modify it to fit the chip-card icon.

By enlarging the icon we can see that it is well animated correctly

[Dibbler (Thomas Bail)]

Thats the point. Thanks. Like we say in germany: Too many trees to see the woods

[kry72]

HI,
how did you fix the spacing on the board?

[fugley]

one thing Ive noticed … change your theme from say mushroom to mushroom shadow and watch your problems disappear

[Mattia2399]

devi vedere l’animazione per i chip

[danwooller]

I don’t know what to suggest, I pasted your code into my dashboard and it worked fine.

Is your indentation correct? Have you tried pasting the code further up or down your page to see if it shows up?

[DeltaNu1142]

I’m trying some state-based confirmation in a mushroom template card. Here’s what I have:

type: custom:mushroom-template-card
entity: switch.living_room_table_lamp
tap_action:
  action: toggle
  confirmation:
    text: >-
      {% set state = (states.switch.living_room_table_lamp.state) %} {% if state
      == 'on' %}
        null
      {% else %}
        Are you sure you want to turn on the stove?
      {% endif %}
hold_action:
  action: more-info
primary: Living Room Stove
secondary: >-
  {% set state = (states.switch.living_room_table_lamp.state) %} {% set changed
  = as_timestamp(states.switch.living_room_table_lamp.last_changed) %} {% set
  diff2 = as_timestamp(now()) - changed %} {% if diff2 <= 1 %}
    Just turned {{state}}
  {% elif diff2 <= 59 %}
    Turned {{state}} {{diff2 | round(0) }} seconds ago
  {% elif diff2 <= 3599 and ((diff2/60) | round(0)) == 1 %}
    Turned {{state}} 1 minute ago
  {% elif diff2 <= 3599 %}
    Turned {{state}} {{ (diff2/60) | round(0) }} minutes ago
  {% elif diff2 <= 86399 and ((diff2/3600) | round(0)) == 1 %}
    Turned {{state}} 1 hour ago
  {% elif diff2 <= 86399 %}
    Turned {{state}} {{(diff2/3600) | round(0) }} hours ago
  {% elif diff2 >= 86400 and ((diff2/86400) | round(0)) == 1 %}
    Turned {{state}} 1 day ago
  {% elif diff2 >= 86400 %}
    Turned {{state}} {{(diff2/86400) | round(0) }} days ago
  {% else %} 
    Unknown
  {% endif %}
icon: |-
  {% if is_state('switch.living_room_table_lamp', 'on') %}
    mdi:fire
  {% else %}
    mdi:fire-off
  {% endif %}
icon_color: |-
  {% if is_state('switch.living_room_table_lamp', 'on') %}
    deep-orange
  {% else %}
    #6f6f6f
  {% endif %}
style: |
  ha-card {
  {% if is_state('switch.living_room_table_lamp', 'on') %}
    background-color: rgba(255, 0, 0, 0.24);
  {% else %}
    background-color: rgba(7, 103, 215, 0.24);
  {% endif %}
  }

Just assume all references to “lamp” mean “stove;” during testing, I don’t want the stove going on and off.

What I want is for confirmation to appear only when the stove is off; if the stove is on, I don’t need confirmation to shut it off. All of the other state-based stuff is working: icon, color, secondary text, background color… however, my confirmation dialog appears with the full text including {% %}, etc.

EDIT: This doesn’t work, either:

tap_action:
  action: toggle
  confirmation:
    text: |-
      {% set state = (states.switch.living_room_table_lamp.state) %}
        {% if state == 'off' %}
          Are you sure you want to turn on the stove?
      {% endif %}

Same issue… the full text between {% and %} appears in the confirmation box.

[Stenbumling]

I know its possible to split ui-lovelace.yaml and views
But is it possible to split even further?
building a dashboard with one view and going to use a lot of browser_mod.popup

- type: vertical-stack
    cards:
     include! /bla bla bla

or anyone know if its possible to do in browser_mod.popup
data: !include file?

[wgumaa (Waleed)]

Thanks @SteffenDE,

I used your card example and modified for my purposes:

This is what I have now (bottom card):

However the drum is flashing and i would like to get it spinning like the top one.

Any ideas on how you can modify the animation?

Here is the code:

type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {
      height: 130px !important;
    }
horizontal: false
cards:
  - type: custom:mushroom-template-card
    card_mod:
      style:
        mushroom-shape-icon$: >
          {% if
          is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
          'Running') %}
            ha-icon {
              --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
              transform-origin: 50% 110%;
            }
            @keyframes shake {
              0%, 100% { transform: translate(0, 0) rotate(0); }
              20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
              40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
              60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
              80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
            }
            @keyframes drum {
              40%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
            }
          {% endif %}
    entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
    layout: horizontal
    multiline_secondary: false
    primary: |2-
       {% set d ={
        'Delayed start': 'Delayed Start',
        'Running': 'Running', 
        'Cycle is finished': 'Cycle Ended',
        'Off': 'Off'
        } %}
        {{ d.get(states(entity)) }} 
    secondary: >
      Time to End -
      {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}} Min  

      {{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}  

      {{states('sensor.electrolux_sawa_washing_machine_wm1_cyclesubphase')}} 
    icon: >-
      {% if
      is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
      'Running') %}
        mdi:washing-machine
      {% elif
      is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
      'Cycle is finished') %}
        mdi:washing-machine-alert
      {% else %}
        mdi:washing-machine
      {% endif %}  
    icon_color: >-
      {% set state=states(entity) %}
      {% if state=='Running' %}
      blue
      {% elif state== 'Delayed start' %}
      ornage
      {% elif state== 'Cycle is finished' %}
      purple
      {% else %}
      grey
      {% endif %}
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        icon: mdi:tshirt-crew-outline
        entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
      - type: template
        icon: mdi:thermometer
        entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
          }}°C 
      - type: template
        icon: mdi:alpha-s-circle-outline
        entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
          }}
      - type: template
        entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {% set d ={ 'off': 'Locked', 'on': 'Unlocked',  } %} 
          {{d.get(states(entity)) }}
        icon: |-
          {% set state=states(entity) %}
          {% if state=='off' %}
          mdi:lock
          {% else %}
          mdi:lock-open-outline
          {% endif %}

Thanks in advance!