Can I make certain parts of the text bold?
I don’t want all the text in bold, just the numbers
type: custom:mushroom-template-card
primary: Hej, {{user}}
secondary: >-
Senaste aktiviteten i hemmet var {{ states.sensor.senaste_aktivitet.state }}.
Det är {{ states.sensor.inomhus_temperature.state }}° inomhus, och {{
states.sensor.utomhus_3_temp_degc.state }}° utomhus.
icon: mdi:home
icon_color: '#2196f2'
multiline_secondary: true
fill_container: false
What if you try like this:
type: custom:mushroom-template-card
entity: sensor.pollen_graeser_81
primary: grasses
icon: mdi:grass
icon_color: |
{% set state = states('sensor.pollen_graeser_81') %}
{% if state >= 3 %}
red
{% elif state >= 1.5 %}
orange
{% else %}
green
{% endif %}
Very good to everyone. Somebody can help me? I am not able to change the color of the Icon, neither the emtity nor the state. It’s possible?. Thanks in advance. I leave the code here:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.partition_area_1
states:
- armed_away
name: BWHOUSE
icon: mdi:shield-home
styles:
icon:
- color: |
[[[
if (entity.state == 'Armada ausente') return 'yellow';
return 'red'
]]]
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 70%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.45); }
60% { transform: scale(1); }
}
.: |
ha-card {
box-shadow: none;
background: none;
background-color: rgba(0,0,0,0);
border: 0px;
}
layout: horizontal
show_keypad: false
secondary_info: state
that worked! Thanks. So the key was eliminating the use of a dedicate template card for the room icon:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:silverware-fork-knife
icon_color: blue
and just combining that with the actual template card showing the room name and sensor info. Thank you!
I’ve seen the use of this pattern in the card_mod to color chips based on the state of the entity in the chip using the --chip-background in css:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room_lamp
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
margin: 12px 24px 0px 0px;
--chip-background:
{% if states('light.living_room_lamp') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 32px;
}
However, what if there are multiple chips in the card. How would you style each chip independently?
Update: Answered my own question here
Just answered my own question with some mucking. Posting here in case it helps someone:
When a light is off:
When it’s on: (notice the icon and the background changes)
This is the YAML. Notice the card_mod CSS styling is in each chip:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: >
{{ states('sensor.house_main_temperature')|float|round(0) }} {{ state_attr('sensor.house_main_temperature', 'unit_of_measurement') }}
icon: mdi:sofa
icon_color: red
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room_lamp
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.living_room_lamp') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
- type: template
entity: media_player.living_room_tv
icon: mdi:television
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states(media_player.living_room_tv') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: start
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
This card was based on someone else’s work that I wish I could give credit to… I cannot find the previous post.
Thanks for sharing this.
Just starting off with Mushroom Card so please excuse my dumbness.
Works good, but … when I tap on ‘Living Room’ I get this error.
I’m assuming I need to add a Tap Action somewhere to display more-info of the temperature.
Playing with it but just can’t get it right.
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: >
{{ states('sensor.living_room_temperature')|float|round(0) }} {{
state_attr('sensor.living_room_temperature', 'unit_of_measurement')
}}
icon: mdi:sofa
icon_color: red
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.living_room') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
- type: template
entity: media_player.living_room_tv
icon: mdi:television
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states(media_player.living_room_tv') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: left
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
Thanks again for sharing 
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.living_room_temperature
primary: Living Room
secondary: >
{{ states('sensor.living_room_temperature')|float|round(0) }} {{
state_attr('sensor.living_room_temperature', 'unit_of_measurement')
}}
icon: mdi:sofa
icon_color: red
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.living_room') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
- type: template
entity: media_player.living_room_tv
icon: mdi:television
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states(media_player.living_room_tv') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: left
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
It’s now working with the above code 
Thanks again for sharing, did I tell you how much I love YAML 
I have a question, and yes I am new to this. What I am trying to do is change the color of the icon as the ping value changes (not even sure Ping integration supports this). Instead of just on or off (green/red) I would like to see if it would be possible to go yellow if a device is responding but with dropped packets or a degraded response.
Currently I only know how to change based upon Up-Down values, here is a code sample. Could someone be so kind to point me in the right direction if it even supported?
type: custom:mushroom-template-card
entity: binary_sensor.test_laptop
icon: mdi:check-network-outline
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''red'' }}'
primary: Test Laptop
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: ping 1.5s infinite,blink 1.5s ease-in-out infinite; ;' if is_state(config.entity, 'off') }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
No expert on this but … I’m assuming if you have this Ping value/state reporting within HA then it would be possible to do something based on that value/state.
The network gurus here may be able to better answer your question.
The issue is that I haven’t defined anything for that tap action as you’ve discovered so my card also has that same warning/error.
I’m still in development of my dashboard and my goal is to either disable the tap action or yo navigate you to a dashboard for the room with more cards that give more details etc.
Same here my friend
My above code works with tap action for me now.
Thanks for sharing, shout out to OP of code too 
Hi all,
is there an option to add spaces in the mushroom cards?
e.g. between “Test” and the Timestamp and the word “Uhr”
type: custom:mushroom-template-card
icon: mdi:lightbulb-auto-outline
entity: input_boolean.auto_kellerlicht_weekend
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
primary: 'werktags:'
secondary: >-
Test:{{ (as_timestamp(now()) | timestamp_custom("%Y-%m-%d", true)) }} Uhr
tap_action:
action: toggle
this is my fav design so far!
I need some help as i am a css noob
How can i get rid of this line above the % ?
regards
Hi,
try this.
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--border-width: 0px;
}
I translate it:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Chambres
secondary: |-
{% if states('cover.chambres_covers') == 'closed' %}
Fermés
{% else %}
Ouverts
{% endif %}
icon: |-
{% if states('cover.chambres_covers') == 'closed' %}
mdi:window-shutter
{% else %}
mdi:window-shutter-open
{% endif %}
entity: Volets
icon_color: blue
fill_container: false
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
multiline_secondary: true
layout: horizontal
card_mod:
style: |
ha-card {
--icon-size: 55px;
--icon-symbol-size: 35px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:arrow-down-drop-circle
entity: cover.chambres_covers
name: Rolluik kamer down
show_state: false
show_name: false
layout: vertical
styles:
card:
- height: 60px
icon:
- color: grey
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.chambres_covers
- type: custom:button-card
icon: mdi:pause-circle
entity: cover.chambres_covers
name: Rolluik kamer still
show_state: false
show_name: false
layout: vertical
styles:
card:
- height: 60px
icon:
- color: grey
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.chambres_covers
- type: custom:button-card
icon: mdi:arrow-up-drop-circle
entity: cover.chambres_covers
name: Rolluik kamer up
show_state: false
show_name: false
layout: vertical
styles:
card:
- height: 60px
icon:
- color: grey
tap_action:
entity: cover.chambres_covers
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.chambres_covers
thanks again, works very well. going deeper into the rabbit hole 
I just noticed the chips card alignment options are this:
Chips alignment (
end,center,justify), when empty default behavior isstart
Out of curiosity, why does this not use more standard alignment terms like “left”, “right” instead of “start” and “end”