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

[Mattia2399]

you can get inspired if you want

[Imygaf]

I am using chips to show location of family members. At the moment I can only see the person icon and either the name or the state (home, away etc).
Is there any way to show the name of person and also the state so I can see who each chip relates to.

Thanks

[maurizio53 (Maurizio Fabiani)]

Will you share the code?

[Mattia2399]

as soon as I finish creating the home screen, of course

[jeroenvdd89 (Jeroen)]

I ‘kinda’ solved my issue with some card shenanigans:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-entity-card
    entity: cover.rol_badkamer
    name: Rolluik
    icon: mdi:window-shutter
    tap_action:
      action: more-info
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
    fill_container: true
    style: |
      ha-card {
      border: none;
      }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:weather-sunset-up
        fill_container: false
        layout: vertical
        entity: input_boolean.zonsopgang_badkamer_rolluik
        icon_color: |-
          {% if is_state('input_boolean.zonsopgang_badkamer_rolluik','on') %}
          amber
          {% endif %}
        style: |
          ha-card {
          border: none;
          }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:arrow-up
        fill_container: false
        layout: vertical
        icon_color: |-
          {% if is_state('cover.rol_badkamer','open') %}
          grey
          {% else %}
          blue
          {% endif %}
        tap_action: null
        action: call-service
        service: cover.open_cover
        target:
          entity_id: cover.rol_badkamer
        data: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
        style: |
          ha-card {
            border: none;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:arrow-down
        fill_container: false
        layout: vertical
        icon_color: |-
          {% if is_state('cover.rol_badkamer','closed') %}
          grey
          {% else %}
          blue
          {% endif %}
        tap_action: null
        action: call-service
        service: cover.close_cover
        target:
          entity_id: cover.rol_badkamer
        data: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
        style: |
          ha-card {
            border: none;
            }

[wgumaa (Waleed)]

Its a combination of themes.

I used Soft UI theme

https://community.home-assistant.io/t/lovelace-soft-ui-simple-and-clean-lovelace-configuration/159357

Then combined it with a bit of coding to “neumorphism” theme

https://github.com/VonWelter/neumorphism?fbclid=IwAR2mnVHFYWQ-Yv-GJHa-VKGGq4wGa_aqfHApDbW4upe36nb7fPfTm3CO1kQ

Hope that helps

[mhackdo18]

Hi Mattia
Can u share the code for the card

You cuccina and salloto ilike
Some Entity below thanks

[royle (roy)]

Hey, there

Does anyone know how to add word-warp to this CSS?

 card_mod:
      style:
        mushroom-shape-icon$: |
          .shape:after {
            content: "{{ state_attr(config.entity, 'current_temperature') | round(0) }}°";
            position: absolute;
            font-size: var(--card-primary-font-size);
            font-weight: bolder;
            {% set status = state_attr('climate.3family_room','hvac_action')
            %}

            {% if status == 'off' %}

            color: grey

            {% elif status == 'cooling' %}

            color: blue

            {% elif status == 'heating' %}

            color: red

            {% else %}

            color: grey

            {% endif %}
          }
          .shape {
            box-shadow: var(--ha-card-box-shadow) !important;
          }
        .: |
          ha-card {
            --ha-card-background: none;
            box-shadow: none;
            --ha-card-border-width: 0;
          }
          mushroom-shape-icon {
            --shape-color: white !important;
          }

[sarruman (Stratos)]

Hi, have you ever sorted this out?
I’m facing the same problem as you.
Thank you in advance!

[MARTWIN (Martinho)]

Getting really close to this, I’ll show you the result once it’s finished ^^

@edit

Buttons

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if states('input_boolean.room_kitchen') == 'on' %}
      mdi:robot-excited-outline
      {% else %}
      mdi:robot-dead
      {% endif %}
    fill_container: true
    multiline_secondary: true
    entity: input_boolean.room_kitchen
    tap_action:
      action: toggle
    layout: horizontal
    hold_action:
      action: more-info
    icon_color: |-
      {% if states('input_boolean.room_kitchen') == 'on' %}
      blue-grey
      {% else %}
      disabled
      {% endif %}
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/jarvis
    picture: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if is_state('input_boolean.room_kitchen', 'on') %}
            --icon-animation: tilt 4s steps(1) infinite, blink 4s infinite; 
            transform-origin: 50% 92%;
            {% endif %}
          }
          @keyframes tilt {
            0%, 100% { transform: rotate(0deg); }
            33% { transform: rotate(8deg); }
            66% { transform: rotate(-8deg); }
          }
          @keyframes blink {
            0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
            25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
            50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
            75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {% if states('light.luzes_kitchen') == 'on' %}

      mdi:lightbulb-on-outline

      {% elif states('binary_sensor.luz_kitchen') == 'on' and
      states('light.luzes_kitchen') == 'off' %}

      mdi:weather-sunny

      {% else %}

      mdi:brightness-5

      {% endif %}
    fill_container: true
    multiline_secondary: false
    entity: binary_sensor.luz_kitchen
    layout: horizontal
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /lovelace/lights
    double_tap_action:
      action: none
    icon_color: >-
      {% if states('light.luzes_kitchen') == 'on' %}

      orange

      {% elif states('binary_sensor.luz_kitchen') == 'on' and
      states('light.luzes_kitchen') == 'off' %}

      amber

      {% else %}

      disabled

      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if states('light.luzes_kitchen') == 'on' %}
            --icon-animation: illumination 2s infinite;
            {% elif states('binary_sensor.luz_kitchen') == 'on' and states('light.luzes_kitchen') == 'off' %}
            --icon-animation: sunny 8s ease-in-out infinite alternate;
            {% endif %}
          }

          @keyframes sunny {
            70% { transform: rotate(360deg) scale(1); }
            80% { transform: scale(1); }
            90% { transform: scale(1.15); }
            100% { transform: scale(1); }
          }

          @keyframes illumination {
            0%, 100% { clip-path: inset(0 0 0 0); }
            80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {% if states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'on' %}

      mdi:motion-sensor

      {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'off' %}

      mdi:cat

      {% else %}

      mdi:transition

      {% endif %}
    fill_container: true
    multiline_secondary: false
    entity: binary_sensor.occupancy_kitchen
    layout: horizontal
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /lovelace/secure
    double_tap_action:
      action: none
    icon_color: >-
      {% if states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'on' %}

      blue-grey

      {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'off' %}

      brown

      {% else %}

      disabled

      {% endif %}
    picture: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'on' %}
            --icon-animation: clip 2s linear infinite;
            {% elif states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'off' %}
            --icon-animation: huh 4s ease infinite;
            transform-origin: 50% 60%;
            {% endif %}
          }

          @keyframes clip {
            50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
          }
          .shape {
            --shape-animation: motion 2s linear infinite;
          }
          @keyframes huh {
            0%, 10%, 75%, 100% { transform: rotate(0deg); }
            15% { transform: rotate(-25deg); }
            30%, 35% { transform: rotate(-40deg); }
            50% { transform: rotate(12deg); }
            65% { transform: rotate(-8deg); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {% if states('binary_sensor.window_kitchen') == 'on' %} mdi:door {% elif
      states('cover.estore_cozinha') == 'opening' or
      states('cover.estore_cozinha') == 'closing' %} mdi:garage-variant {% elif
      states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} mdi:window-closed-variant {%
      elif states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} mdi:garage-open-variant {%
      elif states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} mdi:garage-variant {% elif
      states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} mdi:window-closed-variant
      {% elif states('binary_sensor.window_kitchen') == 'off' %}
      mdi:window-closed-variant {% endif %}
    fill_container: true
    multiline_secondary: false
    entity: binary_sensor.window_kitchen
    layout: horizontal
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /lovelace/secure
    double_tap_action:
      action: none
    icon_color: >-
      {% if states('binary_sensor.window_kitchen') == 'on' %} green {% elif
      states('cover.estore_cozinha') == 'opening' or
      states('cover.estore_cozinha') == 'closing' %} brown {% elif
      states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} blue-grey {% elif
      states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} blue-grey {% elif
      states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} disabled {% elif
      states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} disabled {% elif
      states('binary_sensor.window_kitchen') == 'off' %} disabled {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if states('binary_sensor.window_kitchen') == 'on' %}
            --icon-animation: open 6s ease-in-out infinite;
            transform-origin: 30%;
            {% elif states('cover.estore_cozinha') == 'opening' or states('cover.estore_cozinha') == 'closing' %}
            --icon-animation: door 3s steps(1) infinite alternate;
            {% endif %}
          }

          @keyframes open {
            0%, 66% { transform: rotateY(0deg); }
            33% { transform: rotateY(-120deg); }
          }
          .shape {
            perspective: 45px;
          }
          @keyframes door {
            0% { clip-path: inset(0 0 0 0); }
            25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
            50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
            75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }

Kitchen (aka Cozinha)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.room_kitchen
    primary: Cozinha
    secondary: |
      {{ states('sensor.temp_kitchen') | round(0) }}°C | {{
      states('sensor.humd_kitchen') | round(0) }}%
    icon: >

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}

      mdi:fridge-bottom


      {% elif is_state('light.candeeiro_cozinha', 'on') %}

      mdi:fridge


      {% elif is_state('light.varanda_churrasqueira', 'on') %}

      mdi:balcony


      {% elif is_state('media_player.speaker_kt', 'playing') or
      is_state('media_player.speaker_kt', 'playing') %}

      mdi:volume-high


      {% else %}

      mdi:fridge-outline


      {% endif %}
    icon_color: >
      {% if is_state('light.lightstrip_kitchen_light', 'on') %} 

      {{ '#%02x%02x%02x' % state_attr('light.lightstrip_kitchen_light',

      'rgb_color') }}


      {% elif is_state('light.candeeiro_cozinha', 'on') or
      is_state('light.varanda_churrasqueira', 'on') %}

      amber


      {% elif is_state('media_player.speaker_kt', 'playing') or
      is_state('media_player.speaker_kt', 'playing') %}

      purple 


      {% else %}

      disabled


      {% endif %}
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: cozinha
    hold_action:
      action: call-service
      service: light.turn_off
      data:
        transition: 3
      target:
        area_id: kitchen
    double_tap_action:
      action: toggle
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.1);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.vacuum_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('input_boolean.vacuum_kitchen') == 'on' %}
            mdi:robot-vacuum {% elif states('input_boolean.vacuum_kitchen') ==
            'on' and states('vacuum.robot_cleaner') == 'returning' %}
            mdi:robot-vacuum {% endif %}
          icon_color: |
            {% if states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'cleaning' %}
            pink
            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}
            light-green
            {% else %}
            disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 1
      - type: conditional
        conditions:
          - entity: binary_sensor.luz_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('light.luzes_kitchen') == 'on' %}
            mdi:lightbulb-on-outline {% elif states('binary_sensor.luz_kitchen')
            == 'on' and states('light.luzes_kitchen') == 'off' %}
            mdi:weather-sunny {% else %} mdi:brightness-5 {% endif %}
          icon_color: |
            {% if states('light.luzes_kitchen') == 'on' %} orange {% elif
            states('binary_sensor.luz_kitchen') == 'on' and
            states('light.luzes_kitchen') == 'off' %} amber {% else %} disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 2
      - type: conditional
        conditions:
          - entity: binary_sensor.occupancy_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'on' %}
            mdi:motion-sensor
            {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'off' %}
            mdi:cat
            {% else %}
            mdi:transition
            {% endif %}
          icon_color: |
            {% if states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'on' %}
            blue-grey
            {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'off' %}
            brown
            {% else %}
            disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 3
      - type: conditional
        conditions:
          - entity: input_boolean.jarvis_ai
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('binary_sensor.window_kitchen') == 'on' %}
            mdi:door
            {% elif states('cover.estore_cozinha') == 'opening' or
            states('cover.estore_cozinha') == 'closing' %}

            mdi:garage-variant

            {% elif states('cover.estore_cozinha') == 'open' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_day') == 'on' %}

            mdi:window-closed-variant

            {% elif states('cover.estore_cozinha') == 'open' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_night') == 'on' %}

            mdi:garage-open-variant

            {% elif states('cover.estore_cozinha') == 'closed' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_day') == 'on' %}

            mdi:garage-variant

            {% elif states('cover.estore_cozinha') == 'closed' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_night') == 'on' %}

            mdi:window-closed-variant

            {% elif states('binary_sensor.window_kitchen') == 'off' %}

            mdi:window-closed-variant

            {% endif %}
          icon_color: |
            {% if states('binary_sensor.window_kitchen') == 'on' %} green {%
            elif

            states('cover.estore_cozinha') == 'opening' or
            states('cover.estore_cozinha')

            == 'closing' %} brown {% elif states('cover.estore_cozinha') ==
            'open' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_day') == 'on' %} blue-grey {% elif

            states('cover.estore_cozinha') == 'open' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_night') == 'on' %} blue-grey {% elif

            states('cover.estore_cozinha') == 'closed' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_day') == 'on' %} disabled {% elif

            states('cover.estore_cozinha') == 'closed' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_night') == 'on' %} disabled {% elif

            states('binary_sensor.window_kitchen') == 'off' %} disabled {% endif
            %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 4
      - type: conditional
        conditions:
          - entity: input_boolean.timer_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_daytime') == 'active' %}
            mdi:clock-time-seven


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_extra') == 'active' %}
            mdi:clock-time-ten


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_noble') == 'active' %}
            mdi:clock-time-five


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_late') == 'active' %}
            mdi:clock-time-one


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_tv') == 'active' %}
            mdi:clock-time-six


            {% elif states('timer.kitchen_ceiling') == 'active' %}
            mdi:clock-time-twelve


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_daytime') == 'active' %}
            mdi:clock-time-seven-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_extra') == 'active' %}
            mdi:clock-time-ten-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_noble') == 'active' %}
            mdi:clock-time-five-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_late') == 'active' %}
            mdi:clock-time-one-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_tv') == 'active' %}
            mdi:clock-time-six-outline

            {% else %}
            mdi:clock-time-twelve-outline
            {% endif %}
          icon_color: |
            {% if states('timer.kitchen_daytime') == 'active' %}
            orange
            {% elif states('timer.kitchen_extra') == 'active' %}
            teal
            {% elif states('timer.kitchen_noble') == 'active' %}
            purple
            {% elif states('timer.kitchen_late') == 'active' %}
            deep-purple
            {% elif states('timer.kitchen_tv') == 'active' %}
            pink
            {% elif states('timer.kitchen_ceiling') == 'active' %}
            blue-grey
            {% else %}
            disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 5
      - type: conditional
        conditions:
          - entity: input_boolean.trash_kt
            state: 'on'
        chip:
          type: template
          icon: mdi:delete-empty
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 6
      - type: conditional
        conditions:
          - entity: input_boolean.room_kitchen
            state: 'off'
        chip:
          type: template
          icon: mdi:chip
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 7
      - type: conditional
        conditions:
          - entity: media_player.speaker_kt
            state_not: unavailable
          - entity: media_player.speaker_kt
            state_not: 'off'
        chip:
          type: template
          icon: |
            {% if states('media_player.speaker_kt') == 'playing' %}
            mdi:speaker-wireless
            {% else %}
            mdi:speaker
            {% endif %}          
          icon_color: |
            {% if states('media_player.speaker_kt') == 'playing' %}
            purple
            {% else %}
            blue-grey
            {% endif %}          
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 8
      - type: conditional
        conditions:
          - entity: media_player.tv_kt
            state_not: unavailable
          - entity: media_player.tv_kt
            state_not: 'off'
        chip:
          type: template
          icon: |
            {% if states('media_player.tv_kt') == 'playing' %}
            mdi:speaker-wireless
            {% else %}
            mdi:speaker
            {% endif %}          
          icon_color: |
            {% if states('media_player.tv_kt') == 'playing' %}
            purple
            {% else %}
            blue-grey
            {% endif %}          
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 9
      - type: conditional
        conditions:
          - entity: alarm_control_panel.kitchen
            state: triggered
        chip:
          type: template
          icon: mdi:shield-alert-outline
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 10
    alignment: end
    card_mod:
      style:
        mushroom-conditional-chip:nth-child(1):
          mushroom-template-chip$: |
            ha-icon {
              animation: shake 4000ms ease-in-out infinite;
              transform-origin: 50% 68%;
              clip-path: polygon(0 0, 0 100%, 55% 100%, 34% 75%, 75% 41%, 85% %, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
            }
            @keyframes shake {
              0%, 100% { transform: rotate(-5deg) rotate(15deg); }
              50%  { transform: rotate(-10deg); }
              25%  { transform: rotate(-14deg) rotate(9deg); }
              75%  { transform: rotate(21deg) rotate(-16deg); }
            }
        mushroom-conditional-chip:nth-child(2):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('light.luzes_kitchen') == 'on' %}
              animation: illumination 2s infinite;
              {% elif states('binary_sensor.luz_kitchen') == 'on' and states('light.luzes_kitchen') == 'off' %}
              animation: sunny 8s ease-in-out infinite alternate;
              {% endif %}        
            }

            @keyframes sunny {
              70% { transform: rotate(360deg) scale(1); }
              80% { transform: scale(1); }
              90% { transform: scale(1.15); }
              100% { transform: scale(1); }
              }
            @keyframes illumination {
              0%, 100% { clip-path: inset(0 0 0 0); }
              80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
        mushroom-conditional-chip:nth-child(3):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'on' %}
              animation: clip 2s linear infinite;
              {% elif states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'off' %}
              animation: huh 4s ease infinite;
              transform-origin: 50% 60%;
              {% endif %}
            }

            @keyframes clip {
              50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
              }
            .shape {
              --shape-animation: motion 2s linear infinite;
              }
            @keyframes huh {
              0%, 10%, 75%, 100% { transform: rotate(0deg); }
              15% { transform: rotate(-25deg); }
              30%, 35% { transform: rotate(-40deg); }
              50% { transform: rotate(12deg); }
              65% { transform: rotate(-8deg); }
              }
        mushroom-conditional-chip:nth-child(4):
          mushroom-template-chip$: |
            ha-icon {

              {% if states('binary_sensor.window_kitchen') == 'on' %}
              animation: open 6s ease-in-out infinite;
              transform-origin: 30%;
              {% elif states('cover.estore_cozinha') == 'opening' or states('cover.estore_cozinha') == 'closing' %}
              animation: door 3s steps(1) infinite alternate;
              {% endif %}
            }


            @keyframes open {
              0%, 66% { transform: rotateY(0deg); }
              33% { transform: rotateY(-120deg); }
              }
            .shape {
              perspective: 45px;
              }
            @keyframes door {
              0% { clip-path: inset(0 0 0 0); }
              25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
              50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
              75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
              }
        mushroom-conditional-chip:nth-child(5):
          mushroom-template-chip$: |
            ha-icon {
              animation: clock 5s ease-in-out infinite;
            }

            @keyframes clock {
              100% { transform: rotate(360deg) scale(1); }
              }
        mushroom-conditional-chip:nth-child(6):
          mushroom-template-chip$: |
            ha-icon {
              animation: ping 1.25s ease-out infinite ;
            }

            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
                border-radius: 10px
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
              }
        mushroom-conditional-chip:nth-child(7):
          mushroom-template-chip$: |
            ha-icon {
              animation: ping 1.25s ease-out infinite;
            }

            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
                border-radius: 10px
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
              }
        mushroom-conditional-chip:nth-child(8):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('media_player.speaker_kt') == 'playing' %}
              animation: beat 1.3s ease-out infinite both;
              transform-origin: 50% 80%;
              {% endif %}
            }

            @keyframes beat {
              0% { transform: scale(0.95); }
              10% { transform: scale(1.0); }
              17% { transform: scale(1.10); }
              33% { transform: scale(1.05); }
              60% { transform: scale(0.95); }
              }
        mushroom-conditional-chip:nth-child(9):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('media_player.tv_kt') == 'playing' %}
              animation: beat 1.3s ease-out infinite both;
              transform-origin: 50% 80%;
              {% endif %}
            }

            @keyframes beat {
              0% { transform: scale(0.95); }
              10% { transform: scale(1.0); }
              17% { transform: scale(1.10); }
              33% { transform: scale(1.05); }
              60% { transform: scale(0.95); }
              }
        mushroom-conditional-chip:nth-child(10):
          mushroom-template-chip$: |
            ha-icon {
              animation: ping 1.25s ease-out infinite ;
            }

            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
                border-radius: 10px
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
              }
              
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            margin-right: 6px;
          }
            
card_mod:
  style: |
    ha-card {
      height: 100px;

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}
         background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
      {% elif is_state('light.candeeiro_cozinha', 'on')  or is_state('light.varanda_churrasqueira', 'on') %}
         background: rgba(245, 192, 47, 0.1);
      {% elif is_state('media_player.speaker_kt', 'playing') or is_state('media_player.speaker_kt', 'playing') %}
         background: rgba(170, 0, 255, 0.1);
      {% elif is_state('input_boolean.room_kitchen', 'off') or is_state('input_boolean.trash_kt', 'on') or is_state('alarm_control_panel.kitchen', 'triggered') %}
         background: rgba(229, 20, 0, 0.25);
      {% endif %}
    }

[quinquelhas (Marco)]

Hey everybody,

How i add one picture in a mushroom-template-card?

I have like that

picture: /local/fotos/teste.jpg

but doesn’t work
someone can help?

[MikeMunich (Mike)]

A new question has arisen. To navigate between individual views, I use a small bar with chip cards.

The currently active page, I control with a different icon color. However, I would prefer to be able to “underline” the current page.

Does anyone of you have an idea if and how this would be possible?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:home
        tap_action:
          action: navigate
          navigation_path: home
      - type: template
        icon: mdi:cog
        tap_action:
          action: navigate
          navigation_path: system
      - type: template
        icon: mdi:lan
        tap_action:
          action: navigate
          navigation_path: network
      - type: template
        icon: mdi:docker
        icon_color: disabled
        tap_action:
          action: navigate
          navigation_path: docker
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-font-size: 0.3em;
          --chip-height: 42px          
            }
style: |
  ha-card { 
    border-radius: 10px;
  }

[akkaria (Adam)]

I’m using the mushroom-cover card and would like to change the CSS of the buttons. For example shape, radius and/or size, box shadow etc but don’t seem to be having any luck.

I believe it is the .button class and i’m using card_mod but even then, when i add the code it doesn’t change anything. If i change this in the chrome inspector it updates on the screen, just doesn’t allow me to do it through Home Assistant using the card_mod. Anyone else have any luck or is this purely not possible?

[rhysb (Rhys)]

You can cater for the temp and color buttons like this.

Mushroom Light Slider

type: custom:mushroom-light-card
entity: light.rhys_bedside_light
show_brightness_control: true
tap_action:
  action: toggle
use_light_color: true
icon: mdi:led-strip-variant
show_color_temp_control: true
show_color_control: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }
    .: |
      mushroom-light-brightness-control, mushroom-light-color-temp-control,
      mushroom-light-color-control {      
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        opacity: 0.3;
        --control-height: 66px;
        --control-border-radius: var(--ha-card-border-radius, 12px);
        --rgb-disabled: var(--rgb-card-background-color);
      } 
      mushroom-state-item {
        z-index: 1;
        max-width: fit-content;
        margin-bottom: 0px;
        pointer-events: none;
      } 
      mushroom-shape-icon {
        pointer-events: auto;
      }  
      mushroom-button {
        position: absolute;
        width: calc(var(--control-height) * var(--control-button-ratio)) !important;
        height: var(--control-height) !important;
        top: var(--spacing);
        right: var(--spacing);
      }
      mushroom-button:nth-child(3) {
        right:  calc(2 *var(--spacing) + var(--control-height) * var(--control-button-ratio));
      }
      .actions :not(:last-child) {
        margin-right: 0px !important;
      }

[cob94440 (chris)]

Great work as usual.
For your media payer card, is there a way to bypass muted color from node red please

I launch radio flux so they have non album art. How tu have thé radio logo as image

Thé radio code IS like

type: entities
title: Radios
entities:

• type: custom:mini-media-player
  name: Master
  icon: mdi:speaker
  entity: media_player.media_group
  group: true
  source: icon
  volume_stateless: false
  shortcuts:
  align_text: left
  columns: 2
  buttons:
  - type: music
  id: http://stream.virginradio.fr/virgin.aac
  name: Virgin radio
  image: /local/images/Virgin Radio.jpg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://stream.rfm.fr/rfm-wr2.mp3
  name: RFM Night Fever
  image: /local/images/RFM.jpg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://radiomeuh.ice.infomaniak.ch/radiomeuh-128.mp3
  name: Radio Meuh
  image: /local/images/Radio Meuh.jpeg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://jazz-wr06.ice.infomaniak.ch/jazz-wr06-64.aac
  name: Jazz Radio Funk
  image: /local/images/Jazz Radio.jpg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://fusionfm.ice.infomaniak.ch:8000/fusionfm-192.mp3
  name: Fusion FM
  image: /local/images/Fusion.jpeg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://ouifm.ice.infomaniak.ch/ouifm-high.mp3
  name: Oui FM
  image: /local/images/Oui FM.jpeg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://radiofg.impek.com/max1.mp3
  name: Radio FG
  image: /local/images/FG.png
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://stream.rtsfm.com/rts-beziers
  name: RTS
  image: /local/images/RTS.jpg
  cover: /local/images/led-multi.jpeg
  artwork: cover
• type: custom:mini-media-player
  entity: media_player.jbl_leo
  icon: mdi:speaker
  group: true
  hide:
  controls: true
  info: true
• type: custom:mini-media-player
  entity: media_player.jbl_link_portable_a4c0
  icon: mdi:speaker
  group: true
  hide:
  controls: true
  info: true
  style: |
  ha-card {
  position: relative;
  background: url(’/local/images/led-multi.jpeg’) center / cover;
  –mini-media-player-icon-color: var(–primary-text-color)
  }

[jata]

Hey community, this is a great project and a long thread. I have searched but haven’t found a clear answer. Here goes my question.

I want to use a card (entity or template) to show WAN status (connected) in the primary info slot and IP in secondary. The IP is an attribute of the entity WAN - a binary_sensor.

If I use an entity card, I can show ‘connected’ as primary but can’t find a way to get the attribute in the secondary. If I use a template card, I can get the state to show as ‘on’ in primary info and ip in the secondary - so using a template card seems to work best for this use case.

Can someone explain why the state is ‘on’ it is displayed as ‘connected’ when using the entity card? Is there a way to expose the ‘connected’ state/value using a template?

[Dreamoffice (Dave)]

how can i check 2 sensor value in one “if” condition? this ist not working

              {% if is_state('sensor.smart_state_of_charge', '100') && is_state('binary_sensor.openwb_cp1_autoladestatus', 'off')%}
                not charging

[sarruman (Stratos)]

First of all, I’d like to state that I admire your work! U consist an inspiration to me, though I’m totally new to home assistant and your dashboard and views are something totally unreachable to me…!
However, I try to learn from your examples!
Having said that, could you please share (an example of) the yaml of your dashboard ? I’ve read your posts about individual cards, but I’d like to copy- imitate your (ideal!) structure…!
I hope I don’t ask for much!
Thank you so much in advance!

[Sylwester (Sylwester Olik)]

Hi @rhysb. Is it possible to do wider Chips card so will auto match screen size. Just now I have used padding to make it a little more wider.

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: none;
    hold_action:
      action: call-service
      service: notify.mobile_app_sylwester_s_s21
      data:
        message: Ringing
        title: Find Phone
        data:
          ttl: 0
          importance: high
          priority: high
          tag: Find
          channel: alarm_stream
          timeout: 60
    icon: mdi:target
    icon_color: red
    content: Find Phone
alignment: center
card_mod:
  style: |
    ha-card {
      --chip-background: rgba(var(--rgb-red), 0.2);
      --chip-border-radius: var(--mush-control-border-radius, 12px);
      --chip-height: var(--mush-control-height, 36px);
      --chip-box-shadow: none;
      user-select: none;
      --chip-padding: 80px;
    }
    ha-card:active {
      --chip-background: rgba(var(--rgb-red), 0.4);
    }

[tfmeier (Thomas Meier)]

I’m considering 3 columns for my mushroom dashboard by removing the icon to create more screen real estate - see tile Lounge below. However at the moment the icon turns orange when the light in the room is on. Could I instead turn the whole tile orange if the light in the room is on? Or if that’s not possible could I ad least add a batch and change batch color accordingly?

This is my code with the icon

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: >-
      🌡️{{ states('sensor.atc_f3d3_temperature') | round(1) }}°C 🔋{{
      states('sensor.atc_f3d3_battery') | round(0) }}%
    icon: ''
    entity: light.controller_rgbw_22854b
    tap_action:
      action: navigate
      navigation_path: lounge
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('switch.kogan01', 'on') %}
        orange
      {% endif %}
    picture: ''
    badge_icon: mdi:home
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      🌡️{{ states('sensor.atc_b49c_temperature') | round(1) }}°C 🔋{{
      states('sensor.atc_b49c_battery') | round(0) }}%
    icon: mdi:home
    entity: light.controller_rgbw_22854b
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.controller_rgbw_22854b', 'on') %}
        orange
      {% endif %}
    badge_icon: ''
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home