Yes, have a look here:
If you want it clickable you would be better off moding a Mushroom Template Card to look like a Title Card.
1 Like
Thank you.!!!. i only went back about 500 posts and tried myself
2 Likes
Trying to understand what you are wanting. A picture paints a thousand words 
hello may i ask you something how should i put that in this card the st. nick spinner, can you help me with that?
in this card, but only spinning as he more power than 20watt can that? en stop spinning under the 21watt
type: custom:mushroom-template-card
primary: |2-
{{ states("sensor.hybride_cv_power") }} watt |
{{ states("sensor.hybride_cv_energy") }} kwh
secondary: hybride/airco
icon: >-
{{ 'mdi:heat-pump'if states('sensor.hybride_cv_power') | float(0) > 21 else
'mdi:heat-pump-outline' }}
entity: switch.hybride_cv
layout: vertical
multiline_secondary: false
icon_color: green
fill_container: false
tap_action:
action: more-info
Best regards jonathan
Many thanks,
It worked like charm 
Best regards
Thekholm
1 Like
Hi again!
I`m trying to get animated icon to work with color change of icon!?
When playing it should be mdi:speaker and color indigo, when off it should be grey and mdi:speaker-off.
I almost have it, but the mdi:speaker-off does not work, it do work if I take away the animated icon part?
Help Please!
type: custom:mushroom-media-player-card
entity: media_player.bluesound_matrum
volume_controls: []
name: Bluesound
media_controls:
- play_pause_stop
- next
icon: mdi:speaker
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{{ '--icon-animation: beat 1.3s ease-out infinite both; ' if is_state(config.entity, 'playing') }}
{{ '--card-mod-icon: mdi:speaker;' if is_state(config.entity, 'playing') else '--card-mod-icon: mdi:speaker-off;' }}
{{ '--icon-color: rgb(var(--rgb-indigo)) !important;' if is_state(config.entity, 'playing') else '--icon-color: rgb(var(--rgb-grey)) !important;' }}
{{ '--shape-color: rgba(var(--rgb-indigo), 0.2) !important;' if is_state(config.entity, 'playing') else '--shape-color: rgba(var(--rgb-grey), 0.2) !important;' }}
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Best regards
Thekholm
How to change the secondary line in media card?
type: custom:mushroom-media-player-card
entity: media_player.bluesound_badrum
name: Bluesound
volume_controls: []
tap_action:
action: toggle
hold_action:
action: more-info
use_media_info: false
media_controls:
- next
- play_pause_stop
Thanks
Thekholm
Thank you very much
5 Likes
Willing to share your whole config with the additional information on the right top 
?
Many thanks
thank you very much.
1 Like
Hi again,
Is it possible to have an animated icon only when you press the icon (on/off), lets say 1-2 sec?
/Thekholm
Probably something like this:
type: custom:mushroom-template-card
primary: |2-
{{ states("sensor.hybride_cv_power") }} watt |
{{ states("sensor.hybride_cv_energy") }} kwh
secondary: hybride/airco
icon: >-
{{ 'mdi:heat-pump'if states('sensor.hybride_cv_power') | float(0) > 21 else
'mdi:heat-pump-outline' }}
entity: switch.hybride_cv
layout: vertical
multiline_secondary: false
icon_color: green
fill_container: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 0.5s linear infinite reverse;' if states('sensor.hybride_cv_power') | float > 21 }}
border-radius: 50%;
border: 8px dotted rgb(var(--rgb-red));
}
.shape {
border: 4px dashed rgb(var(--rgb-green));
{{ '--shape-animation: spin 2s linear infinite;' if states('sensor.hybride_cv_power') | float > 21 }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
Animations and --card-mod-icon won’t work on that selector like that. Have a look at how I’ve done it here:
I believe it’s a no based on this documentation but wanted to confirm in case I am missing a workaround - is it possible to add/control source in the Media Player card similar to the mini media player?
Loving the animations, can you make one for a trash can?
Thanks
1 Like
Hi,
is there any way to start an already existing automation?
Looking for a good example …
Thx
Stefan
Yes, have a look at the example in Part 2 of my animation posts:
Thank you so much,
1 Like
Hi
How can we stop de animation as we stop the heater?
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: heater
secondary: ''
entity: switch.heater_schuur
tap_action:
action: toggle
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
1 Like