Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

There is plan to add custom buttons on entity card but no footer, header.

I prefer to keep mushroom card simple for now :sweat_smile: :

  • one icon
  • one name
  • one state
  • one line of control

Advanced things can be done with card_mod, vertical stack in card, etcā€¦

4 Likes

Yeah but they donā€™t look as pretty as yours :smiley:

How did you create the buttons on the room cards?
screenshot-community.home-assistant.io-2022.05.02-22_22_35

1 Like

this is based on the example provided by @dunner
It is a combination of stack-in-card, horizontal stacks + chips (templates and lights) + no borders

Salon example:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |
          {% if is_state('media_player.sony_bravia_tv', 'off') %}
            mdi:television-classic
          {% else %}
            mdi:television-classic-off
          {% endif %}
        icon_color: |
          {% if is_state('media_player.sony_bravia_tv', 'off') %}
            grey
          {% else %}
            indigo
          {% endif %}
        entity: light.kitchen_led
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        icon: |
          {% if is_state('light.kitchen_led', 'on') %}
            mdi:lightbulb-spot
          {% else %}
            mdi:lightbulb-spot-off
          {% endif %}
        icon_color: |
          {% if is_state('light.kitchen_led', 'on') %}
            yellow
          {% else %}
            grey
          {% endif %}
        entity: light.kitchen_led
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        entity: climate.saswell_gtz03
        icon: |
          {% if is_state('climate.saswell_gtz03', 'off') %}
            mdi:radiator-off
          {% elif is_state('climate.saswell_gtz03', 'auto') %}
            mdi:radiator-disabled
          {% else %}
            mdi:radiator
          {% endif %}
        icon_color: |
          {% if is_state('climate.saswell_gtz03', 'off') %}
            grey
          {% elif is_state('climate.saswell_gtz03', 'auto') %}
            orange
          {% else %}
            red
          {% endif %}
        content: '{{ states(''climate.saswell_gtz03'',) }}  '
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
    alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Salon
        layout: vertical
        icon: mdi:sofa
        icon_color: '#a37208'
        tap_action:
          action: navigate
          navigation_path: salon
        hold_action:
          action: more-info
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.ble_temperature_salon
            icon: mdi:thermometer
            icon_color: yellow
            content: '{{ states(''sensor.ble_temperature_salon'',) }} Ā°C '
            card_mod: null
            style: |
              ha-card {
                  box-shadow: 0px 0px;
              }
          - type: template
            entity: sensor.ble_temperature_salon
            icon: mdi:water-percent
            icon_color: teal
            content: '{{ states(''sensor.ble_humidity_salon'',) }} % '
            card_mod: null
            style: |
              ha-card {
                  box-shadow: 0px 0px;
              }
        alignment: center
~~
2 Likes

Does anyone else have an issue where mushroom cards wont render on a google nest hub?

indeed!

I think the that by default stack-in-card does not have borders
here I have condidational cards as well, showing different if phone is charging or not.
I shall change this simply to the different Icon by stateā€¦ :wink:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-person-card
    entity: device_tracker.sg21
    use_entity_picture: true
    hide_name: true
    layout: vertical
  - type: conditional
    conditions:
      - entity: binary_sensor.sg21_is_charging
        state: 'on'
    card:
      type: custom:mushroom-entity-card
      entity: sensor.sg21_battery_level
      layout: vertical
      name: SG21
      icon_color: light-green
      icon: mdi:battery-charging-medium
  - type: conditional
    conditions:
      - entity: binary_sensor.sg21_is_charging
        state: 'off'
    card:
      type: custom:mushroom-entity-card
      entity: sensor.sg21_battery_level
      name: SG21
      layout: vertical
      icon_color: green
      icon: mdi:battery-arrow-down

1 Like

Hi all,
I have got a problem handling the color of an entities icon, depending on its state.
In my case, I have a sensor for waste collection indicating, if waste has to be put for collection. But itā€™s not working. It defaults to blackā€¦
Here is the code for that:

cards:
  - type: custom:mushroom-entity-card
    entity: sensor.gcoll_bio
    icon_color: >-
      {% if is_state('sensor.gcoll_bio.state', 'HEUTE') %} red {% elif
      is_state('sensor.gcoll_bio.state', 'MORGEN') %} orange {% else %} green {%
      endif %}
  - type: custom:mushroom-entity-card
    entity: sensor.gcoll_paper

Itā€™s basically a horizontal-stack which holds two of those entities:


Any idea, whatā€™s wrong with the code? Already a lot of variantsā€¦ :frowning:

Maybe itā€™s because of the spaces before and after the color ?

That only works in the template card, doesnā€™t it?

2 Likes

missing the

%}

at the end of your {% elif statement after ā€œredā€

But also I donā€™t believe this works in entity card, youā€™ll need to use a template card if Iā€™m not mistaken.

1 Like

Does that change dynamically (without refreshing the page) if the state has been changed?

Is there a way to use the default icon of an entity in the template card?
I tried

{{ state_attr(entity, ā€˜iconā€™) }}

but for most entities which use their default icon then they donā€™t have the icon attribute.

It will work if you assign an icon via more-info dialogue-> coq top right

But be careful with the chars in your code, it has to be quotes like that:


{{ state_attr(entity, 'icon') }}

2 Likes

Thank you. This did exactly what I wanted. Long way round but we have it working :slight_smile:

1 Like

What have people done for cards to show a version is out of date ?

I know there is the update card but I like to see the version numbers etc ?

Has anyone done anything like this for Core, OS and addons ?

This is what I have on my old Dashboard, just loads of entity cards

Thanks

Martyn

SkƤrmavbild 2022-05-03 kl. 19.27.24

Current (bold) and latest. If a new version is available the icon turns yellow.
Mushroom template card.

type: custom:mushroom-template-card
primary: '{{ (states(''sensor.current_version'')) }}'
secondary: '{{ (states(''sensor.home_assistant_versions'')) }}'
icon: mdi:package-down
layout: vertical
icon_color: >-
  {% if (states('sensor.current_version')) ==
  (states('sensor.home_assistant_versions')) %}green{% else %}yellow{% endif
  %}
5 Likes

2 of the icons do not show up in the community:
image

HI you all,
the template card did the trick! Now itā€˜s working depending on the state!
Thanks very much indes!

how did you get all the info into 1 tile?

Yea Iā€™m trying to avoid that as i have a lot of entitles.
Thanks anyway.