Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[bacco007]

Try this:

          style: |
            ha-card {
              border: 0px !important;
              box-shadow: none !important;
              padding-top: 8px;
              --chip-height: 60px;
              --chip-background: none;
            }

[Mobiledude (Ronin)]

That did the trick! Thank you!

[PatrickJanson]

I love the cards on the right top.
What integration/app is that?

[Mobiledude (Ronin)]

just a card

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: >-
          {{ 'mdi:lightbulb' if is_state('light.all_lights', 'on') else
          'mdi:lightbulb-off' }}
        layout: vertical
        icon_color: '{{ ''orange'' if is_state(''light.all_lights'', ''on'') else ''disabled'' }}'
        badge_icon: transparent
        badge_color: '{{ ''orange'' if is_state(''light.all_lights'', ''on'') else ''none'' }}'
        secondary: ''
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Verlichting
              content:
                type: vertical-stack
                cards:
                  - type: custom:expander-card
                    gap: ''
                    padding: ''
                    clear: true
                    title: ''
                    overlay-margin: 2em
                    child-padding: ''
                    button-background: transparent
                    expanded: true
                    title-card:
                      type: custom:mushroom-title-card
                      title: ''
                      subtitle: Lampen ingeschakeld
                    cards:
                      - type: custom:auto-entities
                        filter:
                          include:
                            - domain: light
                              state: 'on'
                              group: light.all_lights
                              options:
                                type: custom:mushroom-light-card
                                icon_color: amber
                                use_light_color: true
                                collapsible_controls: true
                          exclude: []
                        card:
                          square: false
                          columns: 2
                          type: grid
                        show_empty: true
                        card_param: cards
                        sort:
                          method: friendly_name
                  - type: custom:expander-card
                    gap: ''
                    padding: ''
                    clear: true
                    title: ''
                    overlay-margin: 2em
                    child-padding: ''
                    button-background: transparent
                    expanded: false
                    title-card:
                      type: custom:mushroom-title-card
                      title: ''
                      subtitle: Lampen uitgeschakeld
                    cards:
                      - type: custom:auto-entities
                        filter:
                          include:
                            - domain: light
                              state: 'off'
                              group: light.all_lights
                              options:
                                type: custom:mushroom-light-card
                                icon_color: amber
                                use_light_color: true
                                collapsible_controls: true
                          exclude: []
                        card:
                          square: false
                          columns: 2
                          type: grid
                        show_empty: true
                        card_param: cards
                        sort:
                          method: friendly_name
        card_mod:
          style: |
            {% if is_state('light.all_lights', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              border: 0px !important;
              box-shadow: none !important;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:motion-sensor' if is_state('binary_sensor.motion', 'on') else
          'mdi:motion-sensor-off' }}
        icon_color: >-
          {{ 'green' if is_state('binary_sensor.motion', 'on') else 'disabled'
          }}
        layout: vertical
        badge_color: '{{ ''green'' if is_state(''binary_sensor.motion'', ''on'') else ''none'' }}'
        badge_icon: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Bewegingssensoren
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: binary_sensor.motion
                      options:
                        type: custom:mushroom-entity-card
                        layout: vertical
                  exclude: []
                card_param: cards
                sort:
                  method: state
                  reverse: true
                show_empty: true
                card:
                  square: false
                  columns: 2
                  type: grid
        card_mod:
          style: |
            {% if is_state('binary_sensor.motion', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(binary_sensor.motion) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:door-open' if is_state('binary_sensor.deuren', 'on') else
          'mdi:door-closed' }}
        icon_color: >-
          {{ 'white' if is_state('binary_sensor.deuren', 'on') else 'disabled'
          }}
        layout: vertical
        badge_color: '{{ ''orange'' if is_state(''binary_sensor.deuren'', ''on'') else ''none'' }}'
        badge_icon: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Buitendeuren
              content:
                square: false
                columns: 2
                type: grid
                cards:
                  - type: custom:mushroom-template-card
                    entity: binary_sensor.gang_deurcontact_voordeur_contact
                    icon: >-
                      {{ 'mdi:door-open' if is_state('entity', 'open') else
                      'mdi:door-closed' }}
                    icon_color: >-
                      {{ 'white' if is_state('entity', 'open') else 'disabled'
                      }}
                    primary: '{{ state_attr(entity, ''friendly_name'') }}'
                    secondary: >-
                      {{
                      relative_time(as_datetime(states('binary_sensor.gang_deurcontact_voordeur_contact_last_changed')))
                      }} ago
                  - type: custom:mushroom-template-card
                    entity: binary_sensor.kamer_deurcontact_balkon_contact
                    icon: >-
                      {{ 'mdi:door-open' if is_state('entity', 'on') else
                      'mdi:door-closed' }}
                    icon_color: '{{ ''white'' if is_state(''entity'', ''on'') else ''disabled'' }}'
                    primary: '{{ state_attr(entity, ''friendly_name'') }}'
                    secondary: >-
                      {{
                      relative_time(as_datetime(states('binary_sensor.kamer_deurcontact_balkon_contact_last_changed')))
                      }} ago
        card_mod:
          style: |
            {% if is_state('binary_sensor.deuren', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.binary_sensor.deuren) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:television' if is_state('media_player.mediaspelers', 'on')
          else 'mdi:television-off' }}
        icon_color: >-
          {{ 'orange' if is_state('media_player.mediaspelers', 'on') else
          'disabled' }}
        layout: vertical
        badge_color: >-
          {{ 'orange' if is_state('media_player.mediaspelers', 'on') else 'none'
          }}
        badge_icon: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Media
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: media_player.mediaspelers
                      options:
                        type: custom:mushroom-media-player-card
                        icon: mdi:television
                        use_media_info: true
                        show_volume_level: true
                        volume_controls:
                          - volume_buttons
                          - volume_set
                        media_controls:
                          - on_off
                          - play_pause_stop
                  exclude: []
                card_param: cards
                sort:
                  method: friendly_name
                show_empty: true
                card:
                  square: false
                  columns: 2
                  type: grid
        card_mod:
          style: |
            {% if is_state('media_player.mediaspelers', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.media_player.mediaspelers) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        icon: >-
          {{ 'mdi:blinds-horizontal' if is_state('cover.all_blinds', 'open')
          else 'mdi:blinds-horizontal-closed' }}
        layout: vertical
        icon_color: '{{ ''white'' if is_state(''cover.all_blinds'', ''open'') else ''disabled'' }}'
        badge_icon: transparent
        badge_color: '{{ ''orange'' if is_state(''cover.all_blinds'', ''open'') else ''none'' }}'
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Blinds
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - domain: cover
                      options:
                        type: custom:mushroom-cover-card
                        show_buttons_control: true
                  exclude:
                    - entity_id: cover.garage_door
                    - entity_id: cover.all_blinds
                    - entity_id: cover.bedroom_blinds
                    - entity_id: cover.kitchen_blinds
                    - entity_id: cover.living_room_blinds
                card:
                  type: grid
                  square: false
                  columns: 2
                card_param: cards
                sort:
                  method: friendly_name
        card_mod:
          style: |
            {% if is_state('cover.all_blinds', 'open') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.cover.all_blinds) | selectattr( 'state', 'eq', 'open') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: '{{ ''mdi:fan'' if is_state(''fan.fans'', ''on'') else ''mdi:fan-off'' }}'
        icon_color: '{{ ''white'' if is_state(''fan.fans'', ''on'') else ''disabled'' }}'
        layout: vertical
        badge_icon: transparent
        badge_color: '{{ ''orange'' if is_state(''fan.fans'', ''on'') else ''none'' }}'
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Fans
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - domain: fan
                      options:
                        type: custom:mushroom-fan-card
                        show_percentage_control: true
                  exclude:
                    - entity_id: fan.fans
                card:
                  type: grid
                  square: false
                  columns: 2
                card_param: cards
                sort:
                  method: friendly_name
        card_mod:
          style: |
            {% if is_state('fan.fans', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.fan.fans) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:window-open' if is_state('group.exterior_windows', 'on') else
          'mdi:window-closed' }}
        icon_color: >-
          {{ 'white' if is_state('group.exterior_windows', 'on') else 'disabled'
          }}
        layout: vertical
        badge_color: '{{ ''orange'' if is_state(''group.exterior_windows'', ''on'') else ''none'' }}'
        badge_icon: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Exterior Windows
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: group.exterior_windows
                      options:
                        type: custom:mushroom-entity-card
                        secondary_info: last-changed
                  exclude: []
                card_param: cards
                sort:
                  method: friendly_name
                show_empty: true
                card:
                  square: false
                  columns: 2
                  type: grid
        card_mod:
          style: |
            {% if is_state('group.exterior_windows', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.group.exterior_windows) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:water-alert' if is_state('binary_sensor.water_leak', 'on')
          else 'mdi:water-off' }}
        icon_color: >-
          {{ 'white' if is_state('binary_sensor.water_leak', 'on') else
          'disabled' }}
        layout: vertical
        badge_icon: transparent
        badge_color: >-
          {{ 'orange' if is_state('binary_sensor.water_leak', 'on') else 'none'
          }}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Water Leak Sensors
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: binary_sensor.water_leak
                      options:
                        type: custom:mushroom-entity-card
                        secondary_info: last-changed
                  exclude: []
                card_param: cards
                sort:
                  method: friendly_name
                show_empty: true
                card:
                  square: false
                  columns: 2
                  type: grid
        card_mod:
          style: |
            {% if is_state('binary_sensor.water_leak', 'on') %}
            mushroom-badge-icon:after {
              content: "{{ expand(states.binary_sensor.water_leak) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #000000;
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            {% endif %}
            ha-card {
              background: none !important;
              border: 0px !important;
              box-shadow: none !important;
              }
view_layout:
  grid-area: badges
card_mod:
  style: |
    ha-card {
      --ha-card-border-radius: 0px;
      height: 74px !important;
      margin-right: -9px;
      margin-left: -9px;
      margin-top: -14px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 6px;

    }
    :host {
      z-index: 998;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      --layout-margin: 0px 0px 0px 0px !important;
    }

[ffm777 (Carlo)]

Very nice looking dashboard. Could you please share which card you are using for the electricity consumption on the right hand side? Thank you!

[Mobiledude (Ronin)]

Sure, it is a Sankey card. Anyone using the Sankey Chart Card?

[johnbull (Johan Forsgard)]

@rhysb

Try using a Template Chip:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.countdown
    content: '{{ states(entity) }}'
    icon: mdi:timer-outline

That works!!!
Thanks!!!

[reypm]

Can you post some screenshots?

[spo0n125]

@rhysb

sensor.devices_with_low_battery

Hi

Can you please show me you configuration for this sensor?

Thanks in advance

[reypm]

hmmm wonder how the notification badge (little red dot) works … I thought the badge would appear if a light is on or so but in my case it does not work

[Michael_Dahl]

It works here

Do you have the all lights group?
I had to create it manually with the lights i need to monitor

[reypm]

I did, gonna double check if I messed up with something while I was adapting it to my needs

you were right, I did not update that value properly now it works thanks for the hint

[Michael_Dahl]

I have also created an automation, the if the “input_boolean.notifications”, are on for more then 5 min, the set it to off (Auto close the bar)

[reypm]

show us the code

[Michael_Dahl]

alias: auto toogle input_boolean.notifications
description: ""
trigger:
  - platform: state
    entity_id:
      - input_boolean.notifications
    for:
      hours: 0
      minutes: 5
      seconds: 0
    to: "on"
condition: []
action:
  - if:
      - condition: state
        entity_id: input_boolean.notifications
        for:
          hours: 0
          minutes: 5
          seconds: 0
        state: "on"
    then:
      - service: input_boolean.turn_off
        data: {}
        target:
          entity_id: input_boolean.notifications
mode: single

[Tarcisio (Tarcisio Alves de Menezes)]

Hello guys!
Does anybody know how would be the yaml to change this --mdc-icon-size property in card-mod?
Changing on chrome does exactly what I need, but I can’t find out how I’m supposed to do in yaml.

[Sddawson]

Yes, I only want the Title text to be white. So I’ll have to stick with what I have. Appreciate the confirmation.

The animation problem is very puzzling. Even after an HA restart, it’s not working. So with this in the theme:

steve_theme:
  card-mod-theme: "steve_theme"
  card-mod-card: |
    .type-custom-mushroom-entity-card:active {
      transform: scale(0.85);
      transition: 0s;
    }

  card-mod-card-yaml: |
    mushroom-title-card$: |
      h1 {
        --primary-text-color: white;
      }
      h2 {
        --secondary-text-color: white;  
      }

and this (snippet) in my cards, the Eco+ button animates, but the Eco button doesn’t. Neither does any other standalone Mushroom Entity card. Can you spot anything?

  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: input_boolean.myenergi_mode_eco_2
        name: Eco+
        secondary_info: none
        layout: vertical
        tap_action:
          action: call-service
          service: input_boolean.turn_on
          data: {}
          target:
            entity_id: input_boolean.myenergi_mode_eco_2
        hold_action:
          action: more-info
        icon_color: blue
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.85);
                transition: 0s;
            }
      - type: custom:mushroom-entity-card
        entity: input_boolean.myenergi_mode_eco
        name: Eco
        secondary_info: none
        layout: vertical
        tap_action:
          action: call-service
          service: input_boolean.turn_on
          data: {}
          target:
            entity_id: input_boolean.myenergi_mode_eco
        hold_action:
          action: more-info
        icon_color: blue

Is this exactly the right syntax (for instance, with all dashes in the class)?

    .type-custom-mushroom-entity-card:active {
      transform: scale(0.85);
      transition: 0s;
    }

[rhysb (Rhys)]

You can control the Mushroom Badge & Icon sizes like this.

Mushroom Icon Size:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
  style: |
    :host {
      --mush-icon-size: 50px;
      --mush-icon-symbol-size: 0.8em;
    }

If you want to change it globally, then add this to your theme:

      mush-icon-size: 50px;
      mush-icon-symbol-size: 0.8em;

Mushroom Badge Size:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: green
card_mod:
  style: |
    :host {
      --mush-badge-size: 20px;
      --mush-badge-icon-size: 0.6em;
    }

If you want to change it globally, then add this to your theme:

      mush-badge-size: 20px
      mush-badge-icon-size: 0.6em

[rhysb (Rhys)]

Yes, that looks correct.

Remove the mushroom-title-card card-mod and it should work fine.

Use just this:

steve_theme:
  card-mod-theme: "steve_theme"
  card-mod-card: |
    .type-custom-mushroom-entity-card:active {
      transform: scale(0.85);
      transition: 0s;
    }

[rhysb (Rhys)]

Sure, have a look here:

Mushroom Cards - Build a beautiful dashboard easily (Part 1)

Not per room, but whole house is done. Mushroom low battery popup: [Low Battery] sensor: - platform: template sensors: devices_with_low_battery: friendly_name: 'Devices with Low Battery' unit_of_measurement: devices value_template: >- {% set ignore_entities = [] %} {{ states.sensor | selectattr('attributes.device_class', 'eq', 'battery') | rejectattr('entity_id', 'in', ignore_entities) | map(attribute…