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

Yes, just like this:

Outside On

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Outside
    secondary: '{{ states(''sensor.weatherflow_air_temperature'') | round (0) }} °C'
    icon: mdi:tree
    entity: group.outside_lights
    tap_action:
      action: navigate
      navigation_path: outside
    hold_action:
      action: toggle
    icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host {
          background: url('/local/backyard.png') center;
          background-size: cover;
          background-blend-mode: overlay;
          background-color: rgba(var(--rgb-card-background-color), 0.8);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.weatherflow_is_raining
            state: 'on'
        chip:
          type: template
          icon_color: grey
          icon: >-
            mdi:weather-{{ states('weather.weatherflow_hourly_based_forecast')
            }}
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: group.outside_gates_doors
            state: 'on'
        chip:
          type: template
          icon_color: grey
          icon: mdi:gate
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('group.outside_lights', 'on') %}
          box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
      {% endif %}
    }
4 Likes