Fantastic!
Thank you sir 
Dear all,
first of all thank you for this page, because it helped me already a lot to customize the mushroom cards to my needs. With one thing I still struggle unfortunately. Is it also possible to change the width of all the chips in the chips card? I want that they have the same width independent of the content in the chips.
Greetz to all!
Hi @dimitri.landerloos, This is just great!. I have been testing this in my lab page 
I have a thing that is not working. Individually they are but when put together one of the two stops working.
This is my code:
type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-card {
font-variant: small-caps;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 45px;
--card-primary-font-size: 58px;
--primary-text-color: #EA906C;
--secondary-text-color: teal;
align-items: end;
}
badge_icon: ''
badge_color: ''
When I do it this way the font size and color is not working. Must be something I am doing wrong but I tried many different combinations but I canāt figure it out.
greetings
Have a look in the first post the section about what the $ and .: | symbols do. But to fix your code its just this:
type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 45px;
--card-primary-font-size: 58px;
--primary-text-color: #EA906C;
--secondary-text-color: teal;
align-items: end;
}
.: |
ha-card {
font-variant: small-caps;
}
badge_icon: ''
badge_color: ''
You are great and thanks for explaining the $ and .: | symbols
It is somewhat clear now 
At least I know how it should be used.
You could set a min and max width to the same on all your chip types like this. But content will overflow.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.dimitri_landerloos
- type: template
icon: mdi:test-tube
icon_color: green
- type: weather
entity: weather.openweathermap
- type: conditional
conditions:
- condition: state
entity: light.lounge_main_light
state: 'on'
chip:
type: alarm-control-panel
entity: alarm_control_panel.home_mode
- type: spacer
- type: menu
- type: light
entity: light.pc_lights
card_mod:
style: |
mushroom-template-chip {
max-width: 80px;
min-width: 80px;
}
mushroom-conditional-chip {
max-width: 80px;
min-width: 80px;
}
mushroom-entity-chip {
max-width: 80px;
min-width: 80px;
}
mushroom-weather-chip {
max-width: 80px;
min-width: 80px;
}
mushroom-light-chip {
max-width: 80px;
min-width: 80px;
}
mushroom-menu-chip {
max-width: 80px;
min-width: 80px;
}
mushroom-spacer-chip {
max-width: 80px;
min-width: 80px;
}
Or maybe a bit neater like this:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.dimitri_landerloos
- type: template
icon: mdi:test-tube
icon_color: green
- type: weather
entity: weather.openweathermap
- type: conditional
conditions:
- condition: state
entity: light.lounge_main_light
state: 'on'
chip:
type: alarm-control-panel
entity: alarm_control_panel.home_mode
- type: spacer
- type: menu
- type: light
entity: light.pc_lights
card_mod:
style: |
mushroom-template-chip,
mushroom-conditional-chip,
mushroom-entity-chip,
mushroom-weather-chip,
mushroom-light-chip,
mushroom-menu-chip,
mushroom-spacer-chip {
max-width: 80px;
min-width: 80px;
}
When I do this it creates an extra border around my weather chip, it does not replace the border that is already there. And I actually want to remove my border but I have no luck with that either 
I have done it like this now:
card_mod:
style: |
ha-card {
--chip-background: transparent;
--chip-border-color: transparent;
}
Is that the right way?
With that you are making it so all chips have no background and no border. If thats what you want then sure.
Otherwise if you only want to change one at a time you need to make sure you place the card mod under the chip itself like this for example.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
border: inset blue 2px !important;
}
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
border: outset green 2px !important;
}
What you have used is like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
border: outset green 2px !important;
}
And this will apply to the card containing the chips, instead of the chip itself.
Thanks! good to know the difference to 
Template card with vertical layout.
Iām looking to bring the Off (primary) up closer to the bottom of the button and struggling.
Any help is appreciated. Thanks!
Please do post what you have tried next time
type: custom:mushroom-template-card
primary: 'Off'
secondary: Test
icon: mdi:power
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
bottom: 10px !important;
}
Hi guys 
I have this interesting problemā¦ I would like to animate a chip card with the condition.
If I write the script like this, the icon is displayed when āinput_boolean.vd_testā is turned on, but the animation does not work 
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.vd_test
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.vd_test
icon: mdi:test-tube
icon_color: red
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
But when I create a classic ācustom:mushroom-template-cardā the animation works normally 
type: custom:mushroom-template-card
icon: mdi:pulse
icon_color: accent
primary: ''
secondary: Aktivita domƔcnosti
card_mod:
style: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
ha-card {
border: unset;
background: unset;
padding-left: 0px !important;
{
Does anyone know where the problem might be? 
I am redesigning a mobile dashboard and would like to display chip cards based on conditions. Of course animated icons 
For example, if the washing machine is on, show the icon and animate it.
Thank you in advance for any help! 
@dimitri.landerloos , i tried this card mod code. the static boder line works. the animated border does not work on this card.
im trying to show the border when there is motion, for now the border stays ad all time. Can you pherhaps point me in the right direction?
the code:
show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.oprit
camera_image: camera.oprit
aspect_ratio: 16x9
card_mod:
style: |
ha-card {
-- if (binary_sensor.motion_sensor_inloopkast_occupancy == 'on') return;
border: 2.5px outset red
}
the output:
the red border is there all the time.
Hi Jeroen,
- Your question has nothing to do with mushroom cards. This topic can only really help you with that.
- What you seem to be applying is not yaml or css.
A yaml template controlling whether the border should be shown or not would be something like this:
type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
style: |
ha-card {
{% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'on' %}
border: red outset 2px !important;
{% endif %}
}
You can only mix yaml templates with the CSS in card mod. Nothing else. Any state output of the yaml template is rendered as is in the CSS btw.
point 1, youre right! i have a lot of mushroom card, and this is I think the only not mushroom card, found youre ācard modā guide
and i toughed i will askā¦ you never no.
but , it is working now wiht youre code! So thank you verry much.
I have the same problem, I think chips donāt support animation icons.
Not true. But there does seem to be an issue with the built in animations:
I see you pointed out to at some keyframes, I tried the dishwasher etc, they have already keyframes.
On an entity card they work, when I take a chips card it wonāt work.
Show me what you have tried. I have multiple chip animations.
Examples:
