Home Assistant dashboard card: Mushroom
Here you find Home Assistant (lovelace) dashboard examples related to the mushroom cards which you can easily add to your own dashboards.
Since Home Assistant version 2024.8 it has similar functionality built in natively, it’s called Badges.
Mushroom 
is a card which can let you add a small widget on your dashboard.
Click on one of these icons below to go to the corresponding example code:
The git repository of the Mushroom card is https://github.com/piitaya/lovelace-mushroom
Install the Mushroom card via this button
Custom styling
For some examples, some custom CSS styling is applied which isn’t possible by default.
You need the extra HACS integration card_mod.
You can Install this integration, via this button, into your own Home Assistant instance.
Table of Contents
Introduction
The mushroom card has a whole set of different card types. In my examples here, I only use two of them. If you want to know more about them all, check this page https://github.com/piitaya/lovelace-mushroom#cards
Cards
I show here some examples of the two cards, the Tile and Chip card.
Title card
The title card shows data based on a template.
What to wear when you go outside
Show what to wear for clothes when you go outside. You can change it the way you like or extend it by adding rain expectations.
# Source code by vdbrink.github.io
# Mushroom title card with a clothing advice
# Dashboard card code
type: custom:mushroom-title-card
title: >2
Wear a {% if states('sensor.feels_like_temperature')|int <= 5 %}winter coat and gloves
{% elif states('sensor.feels_like_temperature')|int <= 12 %}jacket
{% elif states('sensor.feels_like_temperature')|int <= 16 %}sweater
{% elif states('sensor.feels_like_temperature')|int > 16 %}T-shirt
{% endif %} when you go outside. It feels as {{ states('sensor.feels_like_temperature')|int }} °C.
Welcome text and weather forecast for today (Dutch)
Dutch welcome text based on the time of the day, and the name of the logged-in user.
Then show also the minimal and maximum temperature for today and a textual description of the weather.
# Source code by vdbrink.github.io
# Mushroom title card with a greeting and weather forecast
# Dashboard card code
type: custom:mushroom-title-card
title: >2
{%- if now().hour < 12 -%}Goeiemorgen
{%- elif now().hour < 18 -%}Goeiemiddag
{%- else -%}Goeieavond{%- endif -%}, {{user}}.
Vandaag is het tussen de {{states('sensor.meteoserver_d0tmin')}} en de
{{ states('sensor.meteoserver_d0tmax') }} °C
met {{ states('sensor.meteoserver_verw').lower() }}.
Time and date with large font
Larger font size to show the time and the full date.
# Source code by vdbrink.github.io
# Mushroom title cards with a large time and date
# configuration.yaml
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: '{{now().strftime(''%H:%M'')}}'
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 90px !important;
}
- type: custom:mushroom-title-card
title: {{states('sensor.date_only_formatted')}}
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 30px !important;
}
Are you looking for more template examples? Check also my dedicated page about templates!
- Count the number of lights on
- Calculate temperature differences
- Minutes since mail is delivered
- What to wear outside
- Expected rain amount
- Rain intensity
- DIY Sink leak status
- DIY Chair occupancy status
Chips card
Chips cards are a small icon that indicates a status.
CO2 colored icon indicator based on a number
Show a green icon, without any text, if the level is less the 800 ppm, less than 1200 ppm yellow, less than 1500 ppm red.
Create your own CO2 sensor (SCD40)
Create your own CO2 sensor (SenseAir S8)
# Source code by vdbrink.github.io
# Mushroom chip with a CO2 value
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:molecule-co2
icon_color: |-
{% if is_state('sensor.senseair_co2_value', 'unavailable') %}
blue
{% elif states('sensor.senseair_co2_value')|int > 1500 %}
red
{% elif states('sensor.senseair_co2_value')|int > 1200 %}
orange
{% elif states('sensor.senseair_co2_value')|int > 800 %}
yellow
{% else %}
green
{% endif %}
entity: sensor.senseair_co2_value
content: ''
Weather alarm state colored icon indicator based on a value
Show a green icon, when the value is Code groen, yellow for Code geel and red for Code rood.
The used entity here is based on the KNMI weather alarm scraper.
You can decide what happens when you click on it, in this example you redirect to the website of the KNMI where you can see all the details about the current weather alarm status.
# Source code by vdbrink.github.io
# Mushroom chip with the KNMI weather alarm code
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:weather-lightning-rainy
icon_color: |-
{% if is_state('sensor.knmi_weercode', 'Code groen') %}
green
{% elif is_state('sensor.knmi_weercode', 'Code geel') %}
yellow
{% elif is_state('sensor.knmi_weercode', 'Code rood') %}
red
{% else %}
gray
{% endif %}
entity: sensor.knmi_weercode
content: ''
tap_action:
action: url
url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
Bigger icon
Show the mushroom icon in a much bigger size with the card_mod HACS integration, see https://github.com/thomasloven/lovelace-card-mod for more info.
Install card_mod via this button
# Source code by vdbrink.github.io
# Mushroom chip with a trash can icon
# Dashboard card code
type: custom:mushroom-chips-card
chips:
chip:
type: template
entity: sensor.cyclus_gft
icon: mdi:trash-can-outline
content: ""
card_mod:
style: |
ha-card {
--chip-icon-size: 100px;
width: 100px !important;
height: 100px !important;
}
:host {
--card-mod-icon-color:
{% if is_state('sensor.gft_waste_pickup_countdown', 'unavailable') %}
#1C1C1C
{% elif states('sensor.gft_waste_pickup_countdown')|int == 1 %}
green
{% elif states('sensor.paper_waste_pickup_countdown')|int == 1 %}
blue
{% elif states('sensor.plastic_waste_pickup_countdown')|int == 1 %}
orange
{% elif states('sensor.rest_waste_pickup_countdown')|int == 1 %}
grey
{% else %}
#1C1C1C
{% endif %}
}
Nice weather (only an icon)
Show (it only based on a condition) only a green icon, without any text, of a seat when the custom binary sensor nice_outside is on Otherwise this icon isn’t visible.
# Source code by vdbrink.github.io
# Mushroom chip when the binary sensor nice_outside is on
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.nice_outside
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:seat
entity: binary_sensor.nice_outside
content: ''
Temperature (custom icon)
Show a (outdoor/room/pool/etc) temperature.
# Source code by vdbrink.github.io
# Mushroom chip with the outside temperature
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_outside_feels_like
icon: mdi:sun-thermometer
Temperature (colored icon and text)
Set the icon and text color based on the entity value.
To override the colors, you need the extra HACS integration card_mod.
You can Install this integration, via this button, into your own Home Assistant instance.
# Source code by vdbrink.github.io
# Mushroom chip with the feels-like temperature
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.tempest_temperature_feels_like_rounded
icon: mdi:hand-back-right
tap_action:
action: navigate
navigation_path: /lovelace-diverse/test2
card_mod:
style:
.: |
ha-card {
--icon-primary-color:
{% if is_state('sensor.tempest_temperature_feels_like_rounded', 'unavailable') %}
#1C1C1C;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 5 %}
blue;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 14 %}
yellow;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 18 %}
orange;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int > 25 %}
red;
{% else %}
green;
{% endif %}
--text-color:
{% if is_state('sensor.tempest_temperature_feels_like_rounded', 'unavailable') %}
gray;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 5 %}
blue;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 14 %}
yellow;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 18 %}
orange;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int > 25 %}
red;
{% else %}
green;
{% endif %}
}
Person status
Show this icon only when I’m at home.
# Source code by vdbrink.github.io
# Mushroom chip which only shows when the person is at home
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.vdbrink
state: home
chip:
type: entity
entity: person.vdbrink
name: Me
use_entity_picture: true
hide_state: true
hide_name: false
Persons count in a specific zone
Show the number of persons who are currently in the zone home.
# Source code by vdbrink.github.io
# Mushroom chip with the number of persons currently in the zone home
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: zone.home
Door open (custom picture)
Show a custom picture when the front door is open. Otherwise hide it.
# Source code by vdbrink.github.io
# Mushroom chip with a custom door icon, only shown when the front door contact is open
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.contact_front_door_contact
state: 'on'
chip:
type: template
picture: https://img.icons8.com/plasticine/344/door-opened.png
content: Open
More examples
Looking for more examples? Check this link:
« See also my other Home Assistant pages
^^ Top | Homepage | Best Buy Tips | Automation Ideas | Blog posts | Sitemap