Have the same problem, just a red exclamation mark.
The layout-card was missing. 
It’s based on a css grid using the Layout card:
Try like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: |
{% if is_state('sensor.washer_status', 'Done') %}
mdi:washing-machine-alert
{% elif is_state('sensor.dryer_status', 'Done') %}
mdi:tumble-dryer-alert
{% elif is_state('sensor.washer_status', 'Running') %}
mdi:washing-machine
{% elif is_state('sensor.dryer_status', 'Running') %}
mdi:tumble-dryer
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: |
{% if is_state('sensor.washer_status', 'Done') or
is_state('sensor.dryer_status', 'Done') %}
red
{% elif is_state('sensor.washer_status', 'Running') or
is_state('sensor.dryer_status', 'Running') %}
orange
{% else %}
blue
{% endif %}
layout: horizontal
primary: Waschküche
tap_action:
action: navigate
navigation_path: laundry
- type: custom:mushroom-chips-card
chips:
- type: template
icon: none
tap_action:
action: none
- type: template
icon: |
{% if is_state('sensor.washer_status', 'Done') %}
mdi:washing-machine-alert
{% elif is_state('sensor.washer_status', 'Running') %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: |
{% if is_state('sensor.washer_status', 'Done') %}
red
{% elif is_state('sensor.washer_status', 'Running') %}
orange
{% elif is_state('sensor.washer_status', 'Off') %}
#646464
{% else %}
white
{% endif %}
content_info: none
- type: template
icon: |
{% if is_state('sensor.dryer_status', 'Done') %}
mdi:tumble-dryer-alert
{% elif is_state('sensor.dryer_status', 'Running') %}
mdi:tumble-dryer
{% else %}
mdi:tumble-dryer-off
{% endif %}
icon_color: |
{% if is_state('sensor.dryer_status', 'Done') %}
red
{% elif is_state('sensor.dryer_status', 'Running') %}
orange
{% elif is_state('sensor.dryer_status', 'Off') %}
#646464
{% else %}
white
{% endif %}
content_info: none
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('sensor.washer_status', 'Running') }}
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); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('sensor.dryer_status', 'Running') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
3 Likes
Thanks to @piitaya for adding all the Mushroom 
colors to HA as RGB variables. You don’t have to define them in your theme as mush-rgb-<color> anymore, and you can use them with any card. 
The new color variables are:
--rgb-primary-color
--rgb-accent-color
--rgb-disabled-color
--rgb-primary-text-color
--rgb-secondary-text-color
--rgb-text-primary-color
--rgb-card-background-color
--rgb-red-color
--rgb-pink-color
--rgb-purple-color
--rgb-deep-purple-color
--rgb-indigo-color
--rgb-blue-color
--rgb-light-blue-color
--rgb-cyan-color
--rgb-teal-color
--rgb-green-color
--rgb-light-green-color
--rgb-lime-color
--rgb-yellow-color
--rgb-amber-color
--rgb-orange-color
--rgb-deep-orange-color
--rgb-brown-color
--rgb-grey-color
--rgb-blue-grey-color
--rgb-black-color
--rgb-white-color
6 Likes
You can do it vertically like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
icon_color: purple
primary: Calendar Clock
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
}
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
icon_color: purple
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 67% 67%;
clip-path: circle(17% at 67% 67%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
height: 66px;
top: -99px;
}
card_mod:
style: |
ha-card {
height: 99px;
}
3 Likes
Working hard over the last few days to ‘convert’ my dashboards to more a mushroom look and feel. One of the cards I have created (=copy paste from other and changed some things) is below.
My question is on the sensor values on top of the cards: what I struggle to find is how I can change a) the number of decimals in the sensors on top and b) the corresponding unit (eg. not show the unit or show a unit I prefer).
How it looks now:
The code:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.benext_solar_electric_production_w
primary_info: state
secondary_info: name
name: Now
icon: mdi:sun-wireless
- type: custom:mushroom-entity-card
entity: sensor.solarday
primary_info: state
secondary_info: name
name: Daily
icon: mdi:sun-clock
- type: custom:mushroom-entity-card
entity: sensor.solar_net
primary_info: state
secondary_info: name
name: NET
icon: mdi:solar-power
- type: custom:apexcharts-card
graph_span: 1d
apex_config:
chart:
height: 150px
fontFamily: Raleway,sans-serif
legend:
show: false
experimental:
color_threshold: true
brush: true
brush:
selection_span: 1d
header:
show: false
title: Server Rack
show_states: false
colorize_states: true
yaxis:
- id: first
decimals: 1
apex_config:
tickAmount: 2
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 2
series:
- entity: sensor.power_consumption
name: Power
yaxis_id: first
show:
legend_value: false
type: column
group_by:
func: avg
duration: 60min
color_threshold:
- value: 0
color: '#228B22'
- value: 0.1
color: '#d35400'
- value: 1.5
color: '#c0392b'
- entity: sensor.benext_solar_electric_production_w
name: Solar
yaxis_id: second
color: '#00bb33'
show:
legend_value: false
group_by:
func: avg
duration: 60min
7 Likes
Thanks for your support. The icons are now wobbling, but I had already a
card_mod:
style:
defined against the chips with the following input:
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
It is only taking one or the other i.e. when the icons are working, the chips circle are no longer invisble. How do I combine the two card_mods?
1 Like
It is simple once you learn how 
type: custom:mushroom-template-card
primary: Front Doorbell
secondary: '{{ states(entity) | int }} %'
icon: |-
{% if states(entity) | float > 80 %}
mdi:battery-80
{% elif states(entity) | float > 60 %}
mdi:battery-60
{% elif states(entity) | float > 40 %}
mdi:battery-40
{% elif states(entity) | float > 20 %}
mdi:battery-20
{% else %}
mdi:battery-10
{% endif %}
icon_color: |-
{% if states(entity) | float > 80 %}
green
{% elif states(entity) | float > 60 %}
yellow
{% elif states(entity) | float > 40 %}
orange
{% elif states(entity) | float > 20 %}
red
{% else %}
black
{% endif %}
entity: sensor.front_door_battery
3 Likes
You can combine the card_mod like this:
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('sensor.washer_status', 'Running') }}
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); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('sensor.dryer_status', 'Running') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
1 Like
You would need to use Mushroom Template cards and do something like this:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.benext_solar_electric_production_w
icon: mdi:sun-wireless
secondary: Now
primary: '{{ states(entity) | float | round(0) }} W'
icon_color: blue
- type: custom:mushroom-template-card
entity: sensor.solarday
icon: mdi:sun-clock
secondary: Daily
primary: '{{ states(entity) | float | round(2) }} kWh'
icon_color: blue
- type: custom:mushroom-template-card
entity: sensor.solar_net
icon: mdi:solar-power
secondary: NET
primary: '{{ states(entity) }}'
icon_color: blue
1 Like
Thank you so much - it IS simple, can you point me in the right direction of where i can reference this in the future or read from? be great to learn the different bits to pull together. Thank you
1 Like
The documentation for Templating can be found here.
HA Templating uses Jinja2, so you can find various references on the www.
https://jinja.palletsprojects.com/en/3.1.x/templates/#
It may be a bit daunting, but have a look at the examples here. I try to provide ones that have the essential components and there are many other contributors. I find a good way to learn is to create a separate dashboard where you can create cards and figure out how it all works.
2 Likes
I am a bit confused by the new theme situation. For instance, do the Mushroom cards now respond to those new variables as well as the original mush-rgb ones (so I could use the “mush” ones to apply only to the Mushroom cards)? If I have used mush-rgb in my own theme, do I now have to change it to --rgb ones? And do all the other Mushroom variables still work in my own theme? And should I now remove
# HA variables
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-radius: 12px
from my own theme, because those are now the HA defaults (there being no need for a default Mushroom theme any more). So many questions! Hope you can enlighten me…
1 Like
If I’m understanding correctly, your chip is conditional and only shows up if the input_boolean.home is on, but in your screenshot the chip shows Away, how does that work?
Is anyone aware of how to add an icon, inline of a title.
For example, i have a title called “Harper’s Bedroom”
I would like to have the icon of the bunny beside it (similar to the megaphone in the link here - where the questions has been asked before) .
type: custom:mushroom-title-card
title: ''
subtitle: Harpers Room {{icon:'mdi:rabbit-variant-outline'}}
doesn’t work and similar variants seem not to work too
Thanks Rhys! This fixed it. Almost feel ashamed that I did not know the template sensor existed.
1 Like
You can’t use an mdi icon in the Mushroom Title card, but you can use emoji.
type: custom:mushroom-title-card
subtitle: Harper's Room 🐇
2 Likes
No the Mushroom cards do not use the new variables yet. The --mush-rgb-<color> variables are used to override the default Mushroom colors but by defining them in your theme it allows you to use them in other cards. With the new --rgb-<color>-color variables we no longer need to do that. You can continue to use --mush-rgb-<color> or change to --rgb-<color>-color.
The Mushroom cards will work without any theme file, but if you want to change the defaults you can.
1 Like
I just started with exploring the custom Mushroom Cards. But now I have seen the new Tile Card in Home Assistant I got the feeling that more Mushroom look-a-like cards will be introduced soon in standard Home Assistant.
So I started doubting if it is wise to migrate more of my dashboard screens to custom Mushroom or that it is better to wait a bit so that similar cards become available in standard Home Assistant.
Is my assumption correct? And if so where can I find roadmap/plans about upcoming front-end changes?
What sensor you have in solar net?