Iāve been scratching my head in the exact same way, Iāve coded web sites in the distant past but none of this came up then. I guess things moved on while I was doing other things!
If anyone finds a good explainer for | and .: I think a lot of us would love to read it.
Replying to myself but just wanted to update that Iāve managed to make my intended cards work, and want to leave them here so people can just adapt them for themselves if needed:
Note that those cards are still kind of a āmessā but were more of a test to see what I could / couldnāt do, and what worked and what didnāt. So whatās there, works. Just replace what you need / understand itās construction.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.room_kitchen
primary: Cozinha
secondary: >-
{{ states('sensor.temp_kitchen') | round(1) }}Ā°C | {{
states('sensor.humd_kitchen') | round(0) }}%
icon: mdi:fridge-outline
icon_color: >
{{ '#%02x%02x%02x' % state_attr('light.lightstrip_kitchen_light',
'rgb_color') if states('light.lightstrip_kitchen_light') == 'on' else
'disabled' }}
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: cozinha
hold_action:
action: call-service
service: light.turn_off
data:
transition: 3
target:
area_id: kitchen
double_tap_action:
action: toggle
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 80px;
height: 65px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.test_martwin') == 'on' and
states('input_boolean.room_bedroom') == 'on' %}
mdi:robot-vacuum
{% endif %}
icon_color: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.test_martwin') == 'on' and
states('input_boolean.room_bedroom') == 'on' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
alignment: end
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
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);
}
@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); }
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
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);
}
@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); }
}
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
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);
}
@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); }
}
card_mod:
style: |
ha-card {
height: 100px;
{% if is_state('light.lightstrip_kitchen_light', 'on') %}
background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
{% elif is_state('light.candeeiro_cozinha', 'on') %}
background: rgba(245, 192, 47, 0.1);
{% endif %}
}
As a plus, Iāve also managed to create a entity card that has an animated icon, background with states and so on. If you thing this is what you were looking for, get it here:
type: custom:mushroom-entity-card
entity: input_boolean.season_autumn
icon_color: deep-orange
icon: ''
fill_container: false
layout: vertical
tap_action:
action: toggle
name: Autumn
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.season_autumn', 'on') %}
ha-icon {
--icon-animation: wave 6s ease infinite;
}
@keyframes wave {
50% { transform: rotatey(180deg); --icon-color: rgb(var(--rgb-brown)); }
}
.shape {
--shape-animation: color 6s ease infinite;
}
@keyframes color {
50% { --shape-color: rgba(var(--rgb-brown), 0.2); }
}
}
{% endif %}
.: |
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
ha-card {
{% if is_state('input_boolean.season_autumn', 'on') %}
background: rgb(240, 163, 10, 0.05)
{% endif %}
}
For the RGBs, if you think you need anywhere to get them, get them here:
Can anyone help reduce the stack-in-card height? I canāt deal with it. Or maybe someone can advise on how to make such a card better 
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Pogoda
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 60% auto
margin: '-4px'
cards:
- type: custom:mushroom-template-card
icon: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
mdi:weather-night
{% elif state == "cloudy" %}
mdi:weather-cloudy
{% elif state == "fog" %}
mdi:weather-fog
{% elif state == "hail" %}
mdi:weather-hail
{% elif state == "lightning" %}
mdi:weather-lightning
{% elif state == "lightning-rainy" %}
mdi:weather-lightning-rainy
{% elif state == "partlycloudy" %}
mdi:weather-partly-cloudy
{% elif state == "pouring" %}
mdi:weather-pouring
{% elif state == "rainy" %}
mdi:weather-rainy
{% elif state == "snowy" %}
mdi:weather-snowy
{% elif state == "snowy-rainy" %}
mdi:weather-snowy-rainy
{% elif state == "sunny" %}
mdi:weather-sunny
{% elif state == "windy" %}
mdi:weather-windy
{% elif state == "windy-variant" %}
mdi:weather-windy-variant
{% else %}
mdi:weather-cloudy-alert
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
orange
{% elif state == "cloudy" %}
grey
{% elif state == "fog" %}
grey
{% elif state == "lightning" %}
yellow
{% elif state == "lightning-rainy" %}
blue
{% elif state == "partlycloudy" %}
amber
{% elif state == "sunny" %}
amber
{% elif state == "pouring" %}
blue
{% elif state == "rainy" %}
blue
{% elif state == "snowy" %}
black
{% elif state == "snowy-rainy" %}
black
{% elif state == "windy" %}
green
{% elif state == "windy-variant" %}
green
{% else %}
default
{% endif %}
primary: |-
{% set condition_map = {
"clear-night": "pogodna noc",
"cloudy": "pochmurno",
"exceptional": "warunki nadzwyczajne",
"fog": "mgÅa",
"hail": "grad",
"lightning": "wyÅadowania atmosferyczne",
"lightning-rainy": "burza",
"partlycloudy": "czÄÅciowe zachmurzenie",
"pouring": "ulewa",
"rainy": "deszczowo",
"snowy": "opady Åniegu",
"snowy-rainy": "deszcz ze Åniegiem",
"sunny": "sÅonecznie",
"windy": "wietrznie",
"windy-variant": "wietrznie"
}
%}
{{ condition_map.get(states(entity)) }}
tap_action:
action: navigate
navigation_path: /lovelace/climate
entity: weather.home
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0;
}
cards:
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
div.chip-container {
margin-bottom: -14px;
}
chips:
- type: entity
entity: sensor.temperature_outdoor
icon_color: amber
- type: entity
entity: sensor.humidity_outdoor
icon_color: blue
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: entity
entity: sensor.pressure_outdoor
icon_color: green
- type: entity
entity: sensor.home_forecast_precipitation_probability
icon_color: purple
This is awesome. Great work.
I use some icons for the job_state of my washing machine. Maybe you can make a animation for those icons.
Weightsensing: mdi:scale
Wash: mdi:waves
Rinse: mdi:water
spin: mdi:fan. For the spin i use the animation you already made.
Giving my two cents, you could try adding fill_container: true to the custom:mushroom-template-card.
Otherwise, if you really want to change manually or the previous didnāt work, something like this will do the trick:
card_mod:
style:
ha-card {
height: 123px;
}
Hi guys, these contents are really fantastic. I managed to animate a template card, but Iām struggling with chips cards. Could you give me a tip?
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.ao_ventilatore
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: rotate 1s linear infinite;' if is_state('fan.ao_ventilatore', 'on') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
still can not get it to work any more help?
Read what I posted 3 or 4 posts above. Thereās exactly what you need.
Hi, can anyone please recommend a flower/plant card fitting to the mushroom dashboard?
Thank you!
Can you tell what theme you are using?
Mushroom shadowā¦ But I guess such a card fits all mushroom dashbords, doesnāt it?
Yeah, me too! Thank you for your answer! However, it is not such a fit among the other cards, donāt you think?
I mean, the plant icon, its size etcā¦
Iām searching for something that doesnāt stand outā¦
In fact, what happened to this project?
Due to the fact that i have my 18 plants on one dashboard with no other cards. it is not a real problem.
But maybe it is an Option to build it on your own.
Put things together with vertcal-stack-in-card. The upper part as a template card and the lower may as chips card only with values.
Hi, can someone tell me why doesnāt change the icon_color?
I canāt do itā¦
type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
width: 360px;
height: 135px;
background-color: white;
border: none;
}
cards:
- type: custom:mushroom-light-card
entity: light.leds_armario
show_color_control: true
use_light_color: true
show_color_temp_color: true
show_brightness_color: true
style: |
ha-card {
border: none;
background: #EBEBEB;
margin-top: 10px
}
- type: custom:stack-in-card
mode: vertical
style: |
ha-card {
width: 120px;
height: 135px;
border: none;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.openclose_2_temperature
icon_color: red
style: |
ha-card {
margin-left: 25px;
margin-top: 10px;
--chip-background: #F2F2F2;
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.openclose_2_battery
icon: mdi:battery-10
icon_color: red
content: '{{ states("sensor.openclose_2_battery") }}%'
style: |
ha-card {
border: none;
--chip-background: #f2f2f2;
margin-top: 5px;
margin-left: 25px;
width: 10px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.aqara_armario_balcao
icon: mdi:door-closed-lock
icon_color: >-
{% set porta=states("sensor.aqara_armario_balcao")%} {% if porta
== Fechada %} red {% else %} green {% endif %}
style: |
ha-card {
margin-top: 5px;
margin-left: 25px;
border: none;
--chip-background: #f2f2f2;
}
Try:
icon_color: >-
{{ 'red' if is_state(entity,'Fechada') else 'green' }}
Doesnāt work , but like that it worksā¦
'{{ ''red'' if is_state(entity,''Fechada'') else '' green }}'
thank you nightfever
Thank you so much for your template. Could you help me? I use youre template, however, my box still has a shadow
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: soggiorno
icon_color: blue
multiline_secondary: true
primary: ŠŃŃŠ°Š»ŃŠ½Ń
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ewelink_th01_temperature_2
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: entity
entity: sensor.ewelink_th01_humidity_2
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
Hi,
try this code for card-mod:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Studio
secondary: Dove si gioca
icon: mdi:space-station
tap_action:
action: navigate
navigation_path: studio
icon_color: deep-orange
multiline_secondary: true
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperatura_studio
icon_color: deep-orange
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: entity
entity: sensor.netatmo_casa_indoor_humidity
icon_color: deep-orange
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
I have also added this to my theme
# HA variables
ha-card-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.16)
ha-card-border-radius: 12px
ha-card-border-width: 0