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

[Haningback]

I would love if we could start sharing “popup”-like cards, heres mine:

Do anyone know if it is possible to show both “Brightness” and “Color temp” at the same time?

Current config (ps. its a declutering-template card):

  lyskort:
    card:
      type: tile
      name: '[[navn]]'
      entity: '[[entitet]]'
      show_entity_picture: true
      features:
        - type: light-brightness
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: '[[navn]]'
            content:
              type: custom:vertical-stack-in-card
              cards:
                - type: custom:mushroom-light-card
                  entity: '[[entitet]]'
                  layout: vertical
                  use_light_color: true
                  show_brightness_control: true
                  show_color_control: false
                  show_color_temp_control: true
                  card_mod:
                    style: |
                      ha-card {
                        {% if is_state(config.entity, 'on') %}
                          {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                          {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                          {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                          {% if r == null %}
                            background: rgba(255, 152, 0, 0.1);
                          {%- else -%}
                            background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
                          {%- endif %}
                        {%- endif %}
                      }
                - shorten_cards: false
                  consolidate_entities: true
                  child_card: true
                  hide_header: true
                  header: ''
                  color_wheel: true
                  persist_features: true
                  brightness: false
                  color_temp: false
                  white_value: false
                  color_picker: true
                  smooth_color_wheel: true
                  speed: false
                  intensity: false
                  force_features: false
                  show_slider_percent: false
                  full_width_sliders: true
                  brightness_icon: weather-sunny
                  white_icon: file-word-box
                  temperature_icon: thermometer
                  speed_icon: speedometer
                  intensity_icon: transit-connection-horizontal
                  type: custom:light-entity-card
                  entity: '[[entitet]]'
                  effects_list: false
                  card_mod:
                    style: |
                      ha-card {
                        {% if is_state(config.entity, 'on') %}
                          {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                          {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                          {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                          {% if r == null %}
                            background: rgba(255, 152, 0, 0.1);
                          {%- else -%}
                            background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
                          {%- endif %}
                        {%- endif %}
                      }

Only popup-card:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.utebod_ledstrip
    layout: vertical
    use_light_color: true
    show_brightness_control: true
    show_color_control: false
    show_color_temp_control: true
    card_mod:
      style: |
        ha-card {
          {% if is_state(config.entity, 'on') %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            {% if r == null %}
              background: rgba(255, 152, 0, 0.1);
            {%- else -%}
              background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
            {%- endif %}
          {%- endif %}
        }
  - shorten_cards: false
    consolidate_entities: true
    child_card: true
    hide_header: true
    header: ''
    color_wheel: true
    persist_features: true
    brightness: false
    color_temp: false
    white_value: false
    color_picker: true
    smooth_color_wheel: true
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: false
    full_width_sliders: true
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.utebod_ledstrip
    effects_list: false
    card_mod:
      style: |
        ha-card {
          {% if is_state(config.entity, 'on') %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            {% if r == null %}
              background: rgba(255, 152, 0, 0.1);
            {%- else -%}
              background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
            {%- endif %}
          {%- endif %}
        }

Edit: Trying to make a UI Minimalist-like popup… but dont wanna use that “theme” since its not easy to do changes on-the-fly and it locks you down with its templates-in-template’ nesting

Guess i can have a “only show color temp” mushroom-light card inside there

[unreal2k]

Wow this is fantastic, i was using IOTLink for my HTPC and was turning on my other computers with WOL. Yours is just next level, thanks for sharing.

[MikeMunich (Mike)]

Hello together,

i am experimenting with the following example

What i want to achieve is the following

That means, the “detail mushrooms” should be moved a little bit in

The Coding i use, i found in this Thread - perhaps anybody can give me a hint

One important note i think is, i want to replace the “Detail-Mushrooms” with Mushroom-Light-Card, to control my lights.

The Coding for this screen looks like

type: custom:stack-in-card
cards:
  - type: picture-entity
    image: >-
      https://img.freepik.com/free-photo/modern-stylish-scandinavian-kitchen-interior-with-kitchen-accessories-bright-white-kitchen-with-household-items_169016-4791.jpg?w=1800&t=st=1665996359~exp=1665996959~hmac=cc45d77acabe81fa736605220e5492e14c627ee692fbf5b26416a2316d753cb1
    entity: light.buero
    show_state: false
    show_name: false
    camera_view: auto
    aspect_ratio: '3'
    tap_action:
      action: toggle
    theme: Mushroom
  - type: custom:gap-card
    height: 2
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        primary: Mushroom
        secondary: Name
        icon: mdi:mushroom
        entity: light.buero
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
        fill_container: false
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.mushroom_matrum_card
        icon: >-
          {{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
          }}
        icon_color: black
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.mushroom_matrum_card
        state: 'on'
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:mushroom-light-card
          entity: light.buero
          secondary_info: none
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
        - type: custom:mushroom-template-card
          primary: Mushroom
          secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                  font-size: 14px !important;
                  font-weight: bold !important;
                  color: var(--primary-text-color) !important;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-template-card
          primary: Mushroom
          secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                  font-size: 14px !important;
                  font-weight: bold !important;
                  color: var(--primary-text-color) !important;
                }
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
          }

@rhysb
I hope you have an Idea, how i can achieve this

Thx in advance

[rak (Ralf Klüber)]

love it. I was not aware that you can have dedicated triggers for sensors.

However I dont get it to work. And I dont find examples for the triggers in the documentation. I oinly see examples with templates.

Can you please tell me how this should be put into configuration.yaml?

[Schimmelreiter (Hauke)]

Hi @rak - thanks a lot - works perfectly

[rak (Ralf Klüber)]

I think I have it:

template:
  - trigger:
      - platform: state
        entity_id:
          - person.ralf_kluber
        to: "home"
    sensor:
      - unique_id: arrived_ralf
        name: arrived_ralf
        icon: mdi:home-clock
        state: >-
          {% set last_changed = states.person.ralf.last_changed | as_local %}
          {{ as_timestamp(last_changed) | as_datetime() }}

[SteffenDE (Steffen)]

Yes, there are two types of templates (old and new one). The new one is a template integration with trigger and many more …

Look here: https://www.home-assistant.io/integrations/template/

[Holdestmade]

{% if states('sensor.runeborg_indoor_netatmo_rain_rain')|float(0) > 0 %}

[Mar1us]

Hi,

i´m a bit confused maybe you can help me.

I want to change the icon and the icon color based on the state for the entity card but this is not working only for the template card.

type: custom:mushroom-entity-card
entity: tv
icon: |-
  {% if is_state(entity, 'on') %}
    mdi:television
  {% elif is_state(entity, 'off') %}
    mdi:television-off
  {% endif %}
icon_color: |-
  {% if is_state(entity, 'on') %}
    green
  {% elif is_state(entity, 'off') %}
    red
  {% endif %}
tap_action:
  action: toggle

[Mar1us]

If i use this:

type: custom:mushroom-entity-card
entity: switch.fernseher
icon: |-
  {% if is_state(entity, 'on') %}
    mdi:television
  {% elif is_state('switch.fernseher', 'off') %}
    mdi:television-off
  {% endif %}
icon_color: |-
  {% if is_state('switch.fernseher', 'on') %}
    green
  {% elif is_state(entity, 'off') %}
    red
  {% endif %}
tap_action:
  action: toggle

It´s still empty

[Guizmos]

try :

type: custom:mushroom-template-card
entity: switch.fernseher
icon: |-
  {% if is_state('switch.fernseher', 'on') %}
    mdi:television
  {% else %}
    mdi:television-off
  {% endif %}
icon_color: |-
  {% if is_state('switch.fernseher', 'on') %}
    green
  {% else %}
    red
  {% endif %}
tap_action:
  action: toggle

[Lunkobelix]

Any plans to make a statistics Mushroom card? I display a lot of (long term) statistics in Home Assistant for electricity consumption and cost, car charging and more. Today I have to create tons of utility meters to keep track of everything but it is already available in the Energy Dashboard and possible to show with the statistics card. But that card is not as good looking and doesn’t blend to well with my Mushroom cards.

Having the same functionality but with Mushroom would be a game changer.

Statistic Card

[Mar1us]

still the same

[Tehlo]

You are the man! Thanks so much

[Jarne_Roussard]

hello @rhysb first of all very nice that you have made this media player very nice and handy i have adjusted it a bit to my taste now i have a question is it possible if i use my sonos for tv sound then i get black in the screen where normally the picture comes from the song would it be possible to do this based on everything the media title is on TV is this status so know it but just don’t know how to add it? thanks in advance!

type: custom:stack-in-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.sonos_beam
        icon: mdi:play
        use_media_info: true
        use_media_artwork: true
        show_volume_level: true
        media_controls:
          - play_pause_stop
          - previous
          - next
        volume_controls:
          - volume_buttons
          - volume_set
        fill_container: false
        card_mod:
          style: |
            mushroom-shape-icon {
              display: flex;
              {% set media_type = state_attr(config.entity, 'media_title') %}
              {% if media_type == 'TV' %}
                --card-mod-icon: mdi:television-classic;
                animation: flicker 1s linear infinite alternate;
              {% else %}
                --card-mod-icon: mdi:play;
              {% endif %}
            }
            @keyframes flicker {
              0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
              32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
            }
            @keyframes beat {
              0%, 60% { --icon-symbol-size: 21px; }
              5%, 17%, 57% { --icon-symbol-size: 22px; }
              10%, 20%, 51% { --icon-symbol-size: 23px; }
              25%, 45% { --icon-symbol-size: 24px; }
              30%, 39% { --icon-symbol-size: 25px; }
              33% { --icon-symbol-size: 26px; }
            }
            ha-card {
              --ha-card-border-width: 0;
            }
            ha-card:before {
              transform: translate3d(0,0,0);
              -webkit-transform: translate3d(0,0,0);
              content: "";

              background: url('/local/idle_art.png') center no-repeat;
              {% if not is_state(config.entity, 'playing') %}
                background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
              {% endif %}

              background-size: contain;
              margin: 4px 4px 16px;
              filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
              border-radius: var(--control-border-radius);

              {% set media_type = state_attr(config.entity, 'media_content_type') %}
              {% if media_type == 'TV' %}
                aspect-ratio: 16 / 9;
              {% else %}
                aspect-ratio: 1 / 1;
              {% endif %}
            }
      - type: conditional
        conditions:
          - entity: media_player.currently_playing
            state_not: 'off'
          - entity: media_player.currently_playing
            state_not: idle
        card:
          entity: media_player.currently_playing
          hide:
            icon: true
            name: true
            runtime: true
            source: true
            power: true
            state_label: true
            volume: true
            info: true
            progress: false
            controls: true
          more_info: false
          type: custom:mini-media-player
          toggle_power: false
          group: true
          card_mod:
            style:
              mmp-progress$: |
                paper-progress {
                  {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
                }
              .: |
                ha-card {
                  margin: 0px 12px 12px;
                  --mmp-progress-height: 12px !important;
                  height: var(--mmp-progress-height);
                  --mmp-accent-color: rgb(var(--rgb-indigo-color));
                  --mmp-border-radius: 12px !important;
                  --ha-card-border-width: 0;
                }
    card_mod:
      style: |
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;

          background: url('/local/idle_art.png') center no-repeat;
          {% if not is_state('media_player.currently_playing', 'idle') %}
            background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
          {% endif %}

          filter: blur(150px) saturate(200%);
          background-size: 100% 100%;
        }
        ha-card {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
        }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 58px
      margin: '-14px 0px -8px -4px;'
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.sonos_beam
        volume_controls:
          - volume_mute
          - volume_set
          - volume_buttons
        media_controls: []
        show_volume_level: true
        use_media_info: false
        icon_type: none
        primary_info: none
        secondary_info: none
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
              box-shadow: none;
              margin-right: -8px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:television-speaker
            alignment: end
            name: tv mode
            tap_action:
              action: call-service
              service: script.sonos_tv_mode
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:speaker-multiple
            alignment: end
            name: Groep sonos aan
            tap_action:
              action: call-service
              service: script.g
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:speaker
            alignment: end
            name: Groep sonos uit
            tap_action:
              action: call-service
              service: script.gv
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:shuffle-variant
            alignment: end
            name: shuffel aan
            tap_action:
              action: call-service
              service: script.sonos_shuffel_on
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:shuffle-disabled
            alignment: end
            name: shuffel uit
            tap_action:
              action: call-service
              service: script.sonos_shuffel_off
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:numeric-5-box
            alignment: end
            name: volume 5%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_5
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:numeric-10-box
            alignment: end
            name: volume 10%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_10
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:fast-forward-15
            alignment: end
            name: volume 15%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_15
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:dice-d20
            alignment: end
            name: volume 20%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_20
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
  - type: grid
    square: false
    columns: 4
    cards:
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_christmas_hits
        primary: Kerst-Hits
        secondary: ''
        icon: phu:christmas-tree
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_release_radar
        primary: R-Radar
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_top_50_be
        primary: Top50BE
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_top_50_nl
        primary: Top50NL
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_hot_hits_be
        primary: HothidsBE
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_discover_weekly
        primary: D-Weekly
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_2_vm
        primary: PMix2VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_3_vm
        primary: PMix3VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_4_vm
        primary: PMix4VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_5_vm
        primary: PMix5VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_nieuwste_nummers
        primary: NieuwsN
        secondary: ''
        icon: mdi:heart-circle-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_macky_gee
        primary: MackyGee
        secondary: ''
        icon: mdi:heart-pulse
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_qmusic_belguim
        primary: Qmusic
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_radio
        primary: TOPRadio
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_techno
        primary: TOPTechno
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_versuz
        primary: TOPVersuz
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_retroarena
        primary: TOPretroA
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }

here are the possible if sonos is on tv source

playing	
source_list: TV
group_members: media_player.sonos_beam, media_player.sonos_ra
volume_level: 0.04
is_volume_muted: false
media_content_id: x-sonos-htastream:RINCON_48A6B83ABBD601400:spdif
media_content_type: music
media_title: TV
shuffle: false
repeat: off
queue_size: 1
icon: phu:sonos-beam
friendly_name: Sonos Beam
supported_features: 981567
source: TV

[rhysb (Rhys)]

Hey Jarne, what are you wanting it to do when the source is TV? Are you wanting it to display the TV episode art or just a generic TV image?

[Jarne_Roussard]

So if the source TV is there will be an image of TV that I have in the www folder, so if you did that, if nothing is playing, but it won’t work, hopefully you get it now?

[rhysb (Rhys)]

You can add the ping animation to a big icon like this.

Mushroom Big Ping:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      mushroom-shape-icon {
        --icon-size: 76px;
        display: flex;
        margin: -20px 0px 0px -20px !important;
      }
      ha-card {
        clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
      }

[rhysb (Rhys)]

Finally got around to doing one for you.

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

Mushroom Animations - Part 5 Mushroom Chip Animations [Mushroom Chip Animated Scene]

Chip Animated Scene

type: custom:mushroom-chips-card chips: - type: template icon: mdi:mushroom icon_color: red - type: template icon: mdi:snail icon_color: brown - type: template icon: mdi:flower icon_color: amber - type: template icon: mdi:butterfly icon_color: cyan card_mod: style: mushroom-template-chip:nth-child(1)$: | ha-icon { anima…

[rhysb (Rhys)]

Yes, you can apply it to a chip like this.

Mushroom Chip Progress Bar:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: input_number.lounge_pc_volume
    icon: mdi:volume-high
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%) !important;
        }