An example with a if statement that controls the animation.
type: custom:mushroom-template-card
primary: Spin
entity: fan.bedroom_fan
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
{% endif %}
Thank you so so much! 
@rhysb Hi, is it possible to create an animation such as a pulsation effect or something else inside or outside the temperature entity, knowing that the entity is on an picture element ? I’ve tried but I can’t get it to work.
I have a custom:mushroom-entity-card whose entity is a switch and I wonder if it is possible to animate the icon based on the switch state 
as you can see in the code below the icon is a fan which means switch is on, spin the fan, switch is off do nothing, can I get some help? I did some search in the forums but was unable to found my answer 
type: custom:mushroom-entity-card
entity: switch.smartplug_top_fan_switch
name: Top Fan
fill_container: true
icon: mdi:fan
icon_type: icon
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
@reypm I literally just posted this yesterday (2 post ago) in this thread.
This code adjusted to use your switch vs the fan I posted.
type: custom:mushroom-template-card
primary: Spin
entity: switch.smartplug_top_fan_switch
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
{% endif %}
This is not the thread for this question. Please review
There are instructions for both picture element and animations in this extensive guide.
Hello,
My secondary text has suddenly turned white instead of gray. What do I add/change in the theme to get back the gray color?
Mushroom with Alarmo?
Has anyone been able to get the mushroom alarm card to show the Alarmo keypad, rather than the standard Alarm keypad? In fact I can’t get the mushroom alarm card to work at all with Alarmo? Any advice?
Hello everyone,
I’m still relatively new to HA, but I’m making progress. Over the past few days, I’ve successfully experimented with the template cards and achieved very good results for myself.
Now I’m struggling with the mushroom-number-card.
Basically, the card is functioning. What I would like to do now is limit the maximum value to 1600 and color the slider red if the value is not 1600.
Is that even possible?
Possibly, can this be supplemented with Card-Mod? I would be very grateful for any help.
type: custom:mushroom-number-card
entity: number.bkw_limit_nonpersistent_absolute
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.bkw_limit_nonpersistent_absolute
data:
value: '1600'
icon_color: green
name: Einspeise-Limit
layout: horizontal
Hi,
I have a small problem with the layout of one of my cards since the update to 2024.3.0: On the following card, the conditional mushroom chips used to have a bit of a margin to the lower edge of the card. This margin is now gone with 2024.3.0. Does anyone know how to add the margin back to the card?
EDIT: Sorry, solved it myself. Just had to reduce the size of the first card within the stack by adding “margin-bottom: -7px !important;” to the card style.
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Wohnen
secondary: >-
{{ states('sensor.xiaomi_temperature_wohnzimmer') | float(1) }} °C | {{
states('sensor.xiaomi_humidity_wohnzimmer') | int(0) }} %
icon: mdi:sofa
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: "EG"
icon_color: teal
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-background-color), 0.025);
--mush-icon-size: 64px;
height: 56px;
margin-left: -20px !important;
}
ha-card {
--card-primary-font-size: 15px;
--card-secondary-font-size: 13px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.wohnzimmerlampen
state: 'on'
chip:
type: entity
entity: light.wohnzimmerlampen
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.wohnzimmerlampen
content_info: none
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: climate.wohnzimmer
state: 'heat'
chip:
type: entity
entity: climate.wohnzimmer
icon_color: red
tap_action:
action: more-info
content_info: none
icon: mdi:fan
- type: conditional
conditions:
- entity: climate.wohnzimmer
state: 'cool'
chip:
type: entity
entity: climate.wohnzimmer
icon_color: blue
tap_action:
action: more-info
content_info: none
icon: mdi:fan
- type: conditional
conditions:
- entity: sensor.geschirrspuler_operation_state
state: 'Run'
chip:
type: entity
entity: sensor.geschirrspuler_remaining_program_time
icon_color: grey
tap_action:
action: more-info
content_info: none
icon: mdi:dishwasher
- type: conditional
conditions:
- entity: binary_sensor.fibaro_kueche_bewegung
state: 'on'
chip:
type: entity
entity: binary_sensor.fibaro_kueche_bewegung
icon_color: grey
tap_action:
action: none
content_info: none
icon: mdi:chef-hat
- type: conditional
conditions:
- entity: binary_sensor.presence_sensor_fp2_e84e_presence_sensor_1
state: 'on'
chip:
type: entity
entity: binary_sensor.presence_sensor_fp2_e84e_presence_sensor_1
icon_color: grey
tap_action:
action: none
content_info: none
icon: mdi:walk
- type: conditional
conditions:
- entity: binary_sensor.humidity_warning_wohnen
state: 'on'
chip:
type: entity
entity: binary_sensor.humidity_warning_wohnen
icon_color: red
tap_action:
action: none
content_info: none
icon: mdi:water-percent-alert
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 92px;
{% if is_state('light.wohnzimmerlampen', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Hi I experience exactly the same, but I think it is not the bottom margin but the position in general.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Arbeitszimmer
secondary: >-
{{ states('sensor.heizkoerperthermostat_arbeitszimmer_actual_temperature')
| round(1) }}°C
icon: mdi:monitor
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
entity: light.lichtschalter_arbeitszimmer
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/arbeit
double_tap_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
badge_icon: >
{% if is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'heating') %}
mdi:radiator
{% elif is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'cooling') %}
mdi:snowflake
{% else %} mdi:radiator-disabled {% endif %}
badge_color: >
{% if is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
--ha-card-border-width: 0;
}
mushroom-badge-icon {
left: 138px;
top: 40px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.ledvance_smart_plug_1_switch
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:power-socket-de
- type: conditional
conditions:
- entity: binary_sensor.fensterkontakt_arbeitszimmer_state
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
- type: conditional
conditions:
- entity: binary_sensor.bewegungssensor_arbeitszimmer_iaszone
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: switch.klima_arbeitszimmer_power
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:air-conditioner
alignment: end
card_mod:
style: |
ha-card {
--chip-icon-size: 25px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.lichtschalter_arbeitszimmer', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Good day, everyone. Please help me to move second part of my Person Card to the left, for some reason it’s cut off on the phone screen. Thank you
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
Charging 🔌
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
entity: sensor.sm_s918u_battery_state
icon: mdi:battery-charging-high
icon_color: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
yellow
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
teal
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
alignment: center
I solved:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -68px !important;
}
Just add a negative margin-top: to the chips card
card_mod:
style: |
ha-card {
--chip-icon-size: 25px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
margin-top:-10px;
}
This is assuming you have card-mod installed
card_mod:
style:
mushroom-number-value-control$: >
mushroom-slider { {% if states('number.bkw_limit_nonpersistent_absolute')
| int(0) != 88 %}
--main-color: red !important;
--bg-color: rgba(255,0,0, .2) !important;
{%endif%}
}
mushroom-shape-icon$: |
.shape { {% if states('number.bkw_limit_nonpersistent_absolute')
| int(0) != 88 %}
--shape-color: rgba(255,0,0, .2) !important;
--icon-color: red !important;
{%endif%}
}
I used my own entity so my number not 1600. I didn’t look into your max value question. That number is set by the device, but I’m sure there is a way with an input_number
Hi, I feel like an idiot but in all fairness I’m a newbie to HASS. I have blinds controlled via broadlink, and all I have is 3 scripts mapped to each broadlink call. DOWN | STOP | UP.
I’d like to use the mushroom card (without the state), but have three of those buttons line to the right.
Another issue is that those buttons have some text area next to them which is currently a single space.
Can some please let me know the best cards to use? Thank you
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-entity-card
icon: mdi:roller-shade
name: Blind 1
entity: script.room_1_blind_1_down
tap_action:
action: none
secondary_info: none
fill_container: true
- type: custom:mushroom-entity-card
icon: mdi:arrow-down-bold
entity: script.room_1_blind_1_down
secondary_info: none
name: ' '
fill_container: false
- type: custom:mushroom-entity-card
icon: mdi:stop
entity: script.room_1_blind_1_stop
secondary_info: none
name: ' '
fill_container: false
- type: custom:mushroom-entity-card
icon: mdi:arrow-up-bold
entity: script.room_1_blind_1_up
secondary_info: none
name: ' '
fill_container: false
I’d lean towards Chips Card if you are using scripts. I’ll put together a quick sample. You have a ton of options…
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 35% 65%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-cover-card
entity: cover.blind_tilt_098a
name: PC
tap_action:
action: toggle
icon: mdi:blinds-horizontal-closed
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
border-radius: 4px !important;
}
.: |
ha-state-icon {
color: white;
--icon-symbol-size: 20px;
}
ha-card {
border: none;
--card-primary-font-size: 10px;
--card-secondary-font-size: 10px;
position:absolute;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: script.fan_speed_1
content_info: none
tap_action:
action: toggle
icon: mdi:arrow-up-bold
- type: entity
entity: script.fan_speed_1
content_info: none
tap_action:
action: toggle
icon: mdi:stop
- type: entity
entity: script.fan_speed_1
content_info: none
icon: mdi:arrow-down-bold
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-icon-size: 20px;
--chip-border-radius: 4px;
padding: 10px;
--chip-background: red;
}
Wonderful. Works like a charm. Many thanks.
Great! 
This works exactly as I imagined. Many thanks for the quick support. 
Hopefully, it will also help me with future implementations.
I’ll take another look at Min/Max.
I created a sensor to count the lights on, and it works well by querying it on the home assistant.
- platform: template
sensors:
luci_accese_counter:
friendly_name: "Numero Luci Accese"
value_template: "{{ states.light | selectattr('state','eq','on') | list | count }}"
type: custom:mushroom-template-card
primary: 'Luci accese'
secondary: ''
icon: mdi:lightbulb-question-outline
badge_color: ''
badge_icon: '{{ states.sensor.luci_accese_counter.state }}'
the badge appears, but not the number of lights
Hi, you can do it like this:
- type: custom:mushroom-template-card
primary: Lichter
secondary: ''
icon: mdi:lightbulb
layout: vertical
icon_color: orange
badge_icon: none
badge_color: transparent
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/lichter
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ states('sensor.anzahl_lichter_an') }}";
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%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}