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

Of course. Here’s the one for my bedroom as is has a temperature sensor, 3 windows, shades and a media player.

The icon and content template are a bit complicated but I wanted to show which windows are open because it gets damn hot in there if I don’t close the right windows at the wright time.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: BEDROOM
    secondary: ''
    icon: |-
      {% if is_state('light.BEDROOM', 'on') %}
        mdi:bed-king
      {% elif is_state('light.BEDROOM', 'off') %}
        mdi:bed-king    
      {% elif is_state('light.BEDROOM', 'unavailable') %}
        mdi:lightbulb-question
      {% else %}
        mdi:lightbulb-question
      {% endif %}
    entity: light.BEDROOM
    icon_color: |-
      {% if is_state('light.BEDROOM', 'on') %}
        amber
      {% elif is_state('light.BEDROOM', 'off') %}
        disabled
      {% elif is_state('light.BEDROOM', 'unavailable') %}
        disabled
      {% else %}

      {% endif %}
    fill_container: false
    multiline_secondary: true
    tap_action:
      action: navigate
      navigation_path: /lovelace-mobile/BEDROOM
    hold_action:
      action: toggle
    double_tap_action:
      action: none
  - square: false
    columns: 4
    type: grid
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: null
            double_tap_action:
              action: none
            content: '{{ states(''sensor.temperature_BEDROOM'') | float }}°C'
            entity: sensor.temperature_BEDROOM
            tap_action:
              action: more-info
            hold_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            double_tap_action:
              action: none
            entity: null
            icon: >-
              {% if is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% elif is_state('binary_sensor.fenster_S_BEDROOM', 'on') %}
                phu:panel-glass-door-open
              {% else %}
                none
              {% endif %}
            icon_color: red
            tap_action:
              action: none
            hold_action:
              action: none
            content: >-
              {% if is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
                all
              {% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
                LR
              {% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
                LS
              {% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
              is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
                RS
              {% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') %}
                L
              {% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
                R
              {% elif is_state('binary_sensor.fenster_S_BEDROOM', 'on') %}
                S
              {% else %}
                
              {% endif %}
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.sonnenschutz_BEDROOM
            icon: >-
              {%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
              'current_position') | int %} {% if jalousie >= 2 %}
                mdi:blinds-open
              {% else %}
                
              {% endif %}
            icon_color: yellow
            double_tap_action:
              action: none
            tap_action:
              action: more-info
            hold_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: media_player.BEDROOM
            icon: |-
              {% if is_state('media_player.BEDROOM', 'playing') %}
                 mdi:music   
              {% else %}
                    
              {% endif %}
            icon_color: |-
              {% if is_state('media_player.BEDROOM', 'playing') %}
                 #d8a159   
              {% else %}
                    
              {% endif %}
            double_tap_action:
              action: none
            tap_action:
              action: more-info
            hold_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }
        alignment: center

5 Likes