Sorry, I misread it as the title card.
This should work for an entity card
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
The .container element is a flexbox so I just changed it to row and added alignment and a gap between the children elements.
Here is some more info on flexbox A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
This worked! Thank you so much
Hi @Guizmos I really like this approach.
I have now configured a dashboard with this config and changed to use my own entities.
I do have some issues with popup cards, how do I get them to be transparent or the gray color you have? Mine is just the white popup.
Is this the Theme? what theme are you using?
I also have issues getting the swipe card background to change based on the media being played.
Thank you
Small breaking change for card mod animation with 3.0.5 release . It was necessary to clarify how to customize animation because there was multiple way to do it and some doesnât work for some browsers.
--icon-animation has been removed because it doesnât work on Safari iOS with custom animations.
If you want to customize icon animation, you must use ha-state-icon selector with animation property.
Example
card_mod:
style: |
ha-state-icon {
animation: spin infinite linear spin;
}
Thanks for the update! glad that i havent finished my guide yet 
honestly this makes it easier now too as it will all be the same.
Cheers for this fix.
Out of curiosityâŚ
Are you having the same problem with the icon border of the person entity within the map? (Seems to happen on reload of webpage and resolves after closing the popup and reopening)
Does your battery card display the outline correctly? Mine does not.
Not sure what card you are referring to with the map so i cant really test that.
but the battery card works perfectly for me.
(after changing ââicon-animationâ. to just âanimationâ) for Mushroom version 3.0.5
It seems I slightly misread the post you replied to.
The card they and I are using is rhysbâs person pop-up.
When the mentioned breaking the circle shape, my brain misplaced it as the issue Iâm having with a map circle shape used in the card being inconsistant.
Re: the battery, I had a hunch after copying your code didnât work. Looks like I have a theme variable thatâs messing that one up. I will investigate. Fixed this, my value uses transparency so swapped to using a custom variable.
I;m really sorry but I can;t get it rightâŚ
my icon is moving (bouncing) when music is playing, as helped by awesome examples of @rhysb animations
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('media_player.gh_mini', 'playing') %}
--icon-animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100%
{% endif %}
}
.shape {
{% if is_state('media_player.gh_mini', 'playing') %}
perspective: 7px;
--shape-animation: ping 2s infinite;%
{% endif %}
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-teal), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
.: |
shall I stick to the mushroom-shape-icon$: selector ?
i changed ha-icon to ha-state-icon and --icon-animation to animation but it is not working for me
any tips please :)?
it would be good to do one one how to apply to Brower Mod Pop up Card. 
Ill put that in the âextra info sectionâ
type: custom:stack-in-card
mode: vertical
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: switch.nest
icon: >-
{{ 'mdi:speaker-wireless' if is_state(entity, 'on') else
'mdi:speaker-off' }}
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''pink'' }}'
layout: vertical
primary: Nest
secondary: '{{ states("switch.nest") }}'
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.tv
icon: >-
{{ 'mdi:television-classic' if is_state(entity, 'on') else
'mdi:television-classic-off' }}
icon_color: '{{ ''cyan'' if is_state(entity, ''on'') else ''pink'' }}'
layout: vertical
primary: TV
secondary: '{{ states("switch.tv") }}'
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.fountain
icon: mdi:fountain
icon_color: green
layout: vertical
primary: Spring
secondary: '{{ states("switch.fountain") }}'
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
@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%); }
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
.: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: rgba(190,14,122, 0.1);
width: px;
height: px;
}
I changed the ha-icon to ha-state-icon and --icon-animation to animation. After this the last icon is not aligned with the first two. What am I doing wrong?
Kindly guide.
You dont need the â.:â
Delete it and it alligns again.
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
@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%); }
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
ha-card {
padding: 5px 0px 0px 0px !important;
}
Thank you. It workedâŚ
Hello, again breaking changes with a new update (v3.0.5). Can someone with knowledge please help me what I need to change this time to get my fan spinning again 
Unfortunately I canât see what is wrong.
Thanks in advance for your help!
type: custom:mushroom-template-card
icon: mdi:fan
entity: switch.ventilator
tap_action:
action: toggle
icon_color: '{{ ''green'' if is_state(''switch.ventilator'', ''on'') else ''grey'' }}'
primary: Ventilator
secondary: '{{ states(entity) | title }}'
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
{% if is_state('switch.ventilator','on') %}
animation: spin infinite linear spin;
@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 {
50% { 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);
}
{% else %}
{% endif %}
}
I think you need to change mushroom-shape-icon, see 2 posts up
Unfortunately that didnât solved the problem. Still not spinning. 
Assume you have CTRL F5 ?.
Look at 2 post above its laid out different, endif is before keyframes
Your animation name is spin, but the two defined @keyframes are shake and drum. Was this working previously using those names?
Sorry, I also need help 
The examples I saw all have the | right after âstyleâ, which I donât. I donât understand what the different commands actually do and cannot adjust it myself⌠Sorry for jumping onto the âhelp meâ train.
card_mod:
style:
.: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
mushroom-shape-icon$: |
ha-icon {
{% if states('timer.waschmaschine')!='idle' %}
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% endif %}
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 {
50% { 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); }
}
I tried adjusting the following two versions but it didnât change anything.
style:
.: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
mushroom-shape-icon$: |
ha-state-icon {
{% if states('timer.waschmaschine')!='idle' %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% endif %}
transform-origin: 50% 110%;
}
style:
.: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
ha-state-icon$: |
{% if states('timer.waschmaschine')!='idle' %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% endif %}
transform-origin: 50% 110%;