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

[LiQuid_cOOled]

You’ve submitted over 250 pull request so I assume you know how to be specific. The GIF wasn’t clear as well as your follow up responses.

Maybe this will get you headed in the right direction. It sound like you already have the animation code for expanding circle

ype: custom:mushroom-template-card
primary: Animation
secondary: example
icon: mdi:home
icon_color: green
card_mod:
  style: |
    ha-card:active mushroom-shape-icon { 
        display: flex;
        transform: rotate(360deg);
        transition: 500ms;
        background-color: rgba(0,255,0, .2);
        border-radius: 50%;
        }                   
    ha-card:active {
       background-color: rgba(0,255,0, 0.1);
                    }

[Bieniu (Maciek)]

I think we are transmitting on different frequencies… I didn’t ask about animating the icon, I asked about animating the color change of the card (its background) after clicking (activating). For Tile cards this change is animated, I would like to achieve a similar effect for Mushroom. If you think my question isn’t specific enough, please just ignore it. Anyway, thanks and best regards.

[corvy]

Hello! I am trying my best but get stuck…

I tried the guide from @rhysb and I almost got it!

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

Yes, you can have it dynamically adjusting the color of the Mushroom Bar Card like this: [Mushroom Bar Card - Level 1 Color] [Mushroom Bar Card - Level 2 Color] type: custom:stack-in-card cards: - type: custom:layout-card layout_type: custom:grid-layout layout: grid-template-columns: 42px auto margin: '-4px -4px -8px -4px;' cards: - type: custom:mushroom-template-card entity: sensor.cpu_temperature icon: mdi:thermometer icon_color: | …

This is how my card looks right now. (it is a “house” battery for a boat)

The left border around the thermometer is wrong, also the color of the icon is wrong. That should be round and green and also follow the bard-card color imho.

The bar-card portion seems to be working just swell, but the mushroom-template-card or the grid-layout part is the problem I think.

Any pointers?

This is my code:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.victron_bluetooth_state_of_charge
        icon: mdi:thermometer
        icon_color: |
          {% set soc = states(entity) | int %}
          {% if soc > 35 %} 
            green
          {% elif soc > 25 %}
            orange
          {% else %}
            red
          {% endif %} 
                  card_mod:
        style: |
          ha-card {
            background: none;
            --ha-card-box-shadow: 0px;
          }
      - type: custom:bar-card
        entity: sensor.victron_bluetooth_state_of_charge
        name: Forbruksbatteri
        height: 42px
        min: '0'
        max: '100'
        entity_row: true
        severity:
          - color: rgb(var(--mush-rgb-green))
            from: 35
            to: 100
          - color: rgb(var(--mush-rgb-orange))
            from: 25
            to: 35
          - color: rgb(var(--mush-rgb-red))
            from: 0
            to: 25
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 20px;
              --bar-card-border-radius: 12px;
              --mush-rgb-red: 244, 67, 54;
              --mush-rgb-pink: 233, 30, 99;
              --mush-rgb-purple: 156, 39, 176;
              --mush-rgb-deep-purple: 103, 58, 183;
              --mush-rgb-indigo: 63, 81, 181;
              --mush-rgb-blue: 33, 150, 243;
              --mush-rgb-light-blue: 3, 169, 244;
              --mush-rgb-cyan: 0, 188, 212;
              --mush-rgb-teal: 0, 150, 136;
              --mush-rgb-green: 76, 175, 80;
              --mush-rgb-light-green: 139, 195, 74;
              --mush-rgb-lime: 205, 220, 57;
              --mush-rgb-yellow: 255, 235, 59;
              --mush-rgb-amber: 255, 193, 7;
              --mush-rgb-orange: 255, 152, 0;
              --mush-rgb-deep-orange: 255, 87, 34;
              --mush-rgb-brown: 121, 85, 72;
              --mush-rgb-grey: 158, 158, 158;
              --mush-rgb-blue-grey: 96, 125, 139;
              --mush-rgb-black: 0, 0, 0;
              --mush-rgb-white: 255, 255, 255;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }

[1umnyy (Viktor)]

Hello, please help:
in the 1st part, you need the entire text to fit, and it is also desirable to remove this arrow and do it through custom:fold-entity-row
In the 2nd you need to move these arrows to the left
In the 3rd you need to move the icon to the left

- title: параметры path: параметры badges: [] cards: - t -...

[serot23]

Can someone help me out I’m getting crazy over this. It all worked well untill october last year and after that it stopped and i tried a backup of before then and still it doesnt work anymore. I just copy and past from these post the animation, the one below. It worked like i said but what i try it doesn’t work anymore. All the animations stopped only the one for blinking works, why i don’t understand. I just want to use it exactly without changes from this forum but still doesn’t work. Everything is up to date i use HA OS, i have hacs, card mod and mushroom installed.
The indents are not shown for some reason but i just copied paste it from here

type: custom:mushroom-template-card
primary: ‘Camera #2’
icon: mdi:cctv
icon_color: deep-purple
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
–icon-animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}

[LiQuid_cOOled]

The animation posts have been updated.

type: custom:mushroom-template-card
primary: ‘Camera #2’
icon: mdi:cctv
icon_color: deep-purple
card_mod:
  style: |
      ha-state-icon {
         animation: scan 5s ease-in-out infinite;
         transform-origin: 90% 80%;
        }
      @keyframes scan {
         0%, 100% { transform: rotate(20deg); }
         50% { transform: rotate(-15deg); }
       }

Going forward please post your code using the community standards found here See #11

[image969 (James Scialdone)]

Hello. Can someone please tell me if I am using the mushroom drop-down card inside the browser mod pop-up window

Is it possible to use overflow: visible So the drop-down list doesn’t get cropped due to the height of the pop-up card.

I don’t want to change the height of the pop-up card if I don’t have to. I can’t figure it out.

[LiQuid_cOOled]

Like this?

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.basement_sensor
        icon: mdi:thermometer
        icon_color: |
          {% set soc = states(entity) | int %}
          {% if soc > 35 %} 
            #4caf50
          {% elif soc > 25 %}
            orange
          {% else %}
            red
          {% endif %} 
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
                        }
      - type: custom:bar-card
        entity: sensor.basement_sensor
        name: Forbruksbatteri
        height: 42px
        min: '0'
        max: '100'
        entity_row: true
        severity:
          - color: rgb(var(--mush-rgb-green))
            from: 35
            to: 100
          - color: rgb(var(--mush-rgb-orange))
            from: 25
            to: 35
          - color: rgb(var(--mush-rgb-red))
            from: 0
            to: 25
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              border: none;
              margin-left: 20px;
              --bar-card-border-radius: 12px;
              --mush-rgb-red: 244, 67, 54;
              --mush-rgb-pink: 233, 30, 99;
              --mush-rgb-purple: 156, 39, 176;
              --mush-rgb-deep-purple: 103, 58, 183;
              --mush-rgb-indigo: 63, 81, 181;
              --mush-rgb-blue: 33, 150, 243;
              --mush-rgb-light-blue: 3, 169, 244;
              --mush-rgb-cyan: 0, 188, 212;
              --mush-rgb-teal: 0, 150, 136;
              --mush-rgb-green: 76, 175, 80;
              --mush-rgb-light-green: 139, 195, 74;
              --mush-rgb-lime: 205, 220, 57;
              --mush-rgb-yellow: 255, 235, 59;
              --mush-rgb-amber: 255, 193, 7;
              --mush-rgb-orange: 255, 152, 0;
              --mush-rgb-deep-orange: 255, 87, 34;
              --mush-rgb-brown: 121, 85, 72;
              --mush-rgb-grey: 158, 158, 158;
              --mush-rgb-blue-grey: 96, 125, 139;
              --mush-rgb-black: 0, 0, 0;
              --mush-rgb-white: 255, 255, 255;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }

[LiQuid_cOOled]

Can you post your code? I am unfamiliar with the Mushroom Dropdown card.

[corvy]

Worked perfectly! Thank you

[LiQuid_cOOled]

No problem, happy to assist! Forgot to swap out my entities, but you probably figured that out fast

[LiQuid_cOOled]

For question #1 You could probably squeeze the dropdown in with my updated settings and avoid the custom:fold-entity-row

square: false
columns: 6
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: ''
    alignment: center
    secondary: ''
    icon: mdi:home
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: /lovelace
    layout: vertical
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          top: -3px;
          left: -5px;
          border: none;
          --card-primary-font-size: 14px;
          --card-secondary-font-size: 10px;
        }
  - type: custom:mushroom-entity-card
    entity:sensor.processor_use
    primary_info: state
    secondary_info: name
    name: CPU
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
          left: -20px;
          width: 5em;
          --card-primary-font-size: 14px;
          --card-secondary-font-size: 10px;
        }
  - type: custom:mushroom-entity-card
    entity: sensor.memory_use_percent
    primary_info: state
    secondary_info: name
    name: Memory
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
        width: 5em;
         left: -20px;
          --card-primary-font-size: 14px;
          --card-secondary-font-size: 10px;
        }
  - type: custom:mushroom-entity-card
    entity: sensor.server_cpu_temperature
    primary_info: state
    secondary_info: name
    name: CPU
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
         left: -20px;
          width: 5em;
          --card-primary-font-size: 14px;
          --card-secondary-font-size: 10px;
        }
  - type: custom:mushroom-entity-card
    entity: sensor.disk_use_percent
    primary_info: state
    secondary_info: name
    name: Storage
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
         left: -20px;
          width: 5em;
          --card-primary-font-size: 14px;
          --card-secondary-font-size: 10px;
        }
  - type: custom:mushroom-template-card
    primary: ''
    alignment: center
    secondary: ''
    icon: |-
      {% if is_state(entity, 'off') %}
        mdi:chevron-down 
      {% elif is_state(entity, 'on') %}   
        mdi:chevron-up    
      {% endif %}
    icon_color: gray
    tap_action:
      action: toggle
    layout: vertical
    entity: input_boolean.information1
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
          left: -10px;
          top: -3px;
          width: 15px;
          --card-primary-font-size: 14px;
          --card-secondary-font-size: 10px;
        }

[LiQuid_cOOled]

For question #2 , I would suggest using a layout card inside a stacked card to control the column widths

For question #3, just add a left: -5px;

type: custom:stack-in-card
cards:
 - type: custom:layout-card
   layout_type: custom:grid-layout
   layout:
      grid-template-columns: 90% 10%
      margin: 0px 0px 0px 0px
   cards:
     - type: custom:fold-entity-row
       clickable: true
       tap_action:
        action: fire-dom-event
       fold_row: true
       head:
        type: custom:mushroom-template-card
        primary: Статистика интернет соединения
        icon: mdi:web
        icon_color: blue
        tap_action:
         action: fire-dom-event
        fold_row: true
        card_mod:
          style: |
           ha-card {
            background: transparent;
            box-shadow: none;
            margin-top: -10px;
            border: none;
            
            }
       entities:
       - type: custom:stack-in-card
         mode: vertical
         card_mod:
          style: |
            ha-card {
            margin-left: -25px;
            background: transparent;
            box-shadow: none;
            }
       cards:
          - type: custom:uptime-card
            card_mod:
              style: |
                ha-card {
                margin-top: -10px;
                background: transparent;
                box-shadow: none;
                }
            entity: binary_sensor.internet_reachable
            hours_to_show: 24
            title_adaptive_color: true
            status_adaptive_color: true
            icon: mdi:web
            ko_icon: mdi:web-cancel
            update_interval: 30
            severity: 10
            icon_adaptive_color: true
            alias:
              ok: Connected
              ko: Disconnected
            title_template: Интернет
            bar:
              height: 30
              spacing: 4
              amount: 24
          - type: custom:vertical-stack-in-card
            card_mod:
              style: |
                ha-card {
                margin-top: -20px;
                background: transparent;
                box-shadow: none;
                }
            horizontal: true
            cards:
              - type: vertical-stack
                cards:
                  - type: markdown
                    content: >
                      <h2><font color= lightgrey><ha-icon
                      icon="mdi:speedometer"></ha-icon>  Speedtest</font></h2>
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          --ha-card-box-shadow: 0px;
                          --ha-card-border-width: 0;
                        }
                  - type: tile
                    name: Server
                    icon: mdi:speedometer
                    entity: sensor.speedtest_ping
                    state_content:
                      - server_name
                      - server_country
                    color: blue
                  - type: custom:vertical-stack-in-card
                    cards:
                      - type: grid
                        square: false
                        columns: 1
                        cards:
                          - type: custom:mushroom-chips-card
                            chips:
                              - type: template
                                entity: sensor.speedtest_download
                                icon: mdi:arrow-down
                                icon_color: '#6afff3'
                                content: |
                                  {% if is_number(states(entity)) %}
                                    {{ states(entity)|round(0) }} Mbps
                                  {% else %}
                                    Unavailable
                                  {% endif %}
                                tap_action:
                                  action: more-info
                                hold_action:
                                  action: more-info
                                double_tap_action:
                                  action: more-info
                                card_mod:
                                  style: |
                                    ha-card { 
                                      --chip-box-shadow: none;
                                      --chip-border-width: 0;
                                      --chip-font-size: 11px;
                                      --chip-font-weight: none;
                                    }
                              - type: template
                                entity: sensor.speedtest_ping
                                icon: mdi:timer
                                icon_color: '#fff38e'
                                content: |
                                  {% if is_number(states(entity)) %}
                                    {{ states(entity) }} ms
                                  {% else %}
                                    Unavailable
                                  {% endif %}
                                tap_action:
                                  action: more-info
                                hold_action:
                                  action: more-info
                                double_tap_action:
                                  action: more-info
                                card_mod:
                                  style: |
                                    ha-card { 
                                      --chip-box-shadow: none;
                                      --chip-border-width: 0;
                                      --chip-font-size: 11px;
                                      --chip-font-weight: none;
                                    }
                              - type: template
                                entity: sensor.speedtest_upload
                                icon: mdi:arrow-up
                                icon_color: '#bf71ff'
                                content: |
                                  {% if is_number(states(entity)) %}
                                    {{ states(entity)|round(0) }} Mbps
                                  {% else %}
                                    Unavailable
                                  {% endif %}
                                tap_action:
                                  action: more-info
                                hold_action:
                                  action: more-info
                                double_tap_action:
                                  action: more-info
                                card_mod:
                                  style: |
                                    ha-card { 
                                      --chip-box-shadow: none;
                                      --chip-border-width: 0;
                                      --chip-font-size: 11px;
                                      --chip-font-weight: none;
                                    }      
                            alignment: center
 - type: custom:layout-card
   layout_type: custom:grid-layout
   layout:
      grid-template-columns: 90% 10%
      margin: 0px 0px 0px 0px
   cards:
          - type: custom:fold-entity-row
            clickable: true
            tap_action:
              action: fire-dom-event
              fold_row: true
            card_mod:
              style: |
                ha-card {
                 background: transparent;
                 box-shadow: none;
                
                }
            head:
              type: custom:mushroom-template-card
              primary: Статистика торрент-сервера
              icon: mdi:download
              icon_color: blue
              tap_action:
                action: fire-dom-event
                fold_row: true
              card_mod:
                style: |
                  ha-card {
                  background: transparent;
                  box-shadow: none;
                  margin-top: -10px;
                  border: none;
                  }
            entities:
              - type: custom:stack-in-card
                mode: vertical
                card_mod:
                  style: |
                    ha-card {
                    margin-left: -25px;
                    background: transparent;
                    box-shadow: none;
                    }
                cards:
                  - type: entities
                    card_mod:
                      style: |
                        ha-card {
                        margin-top: -15px;
                        }
                    entities:
                      - entity: sensor.radarr_queue
                        name: Фильмы на закачке
                        secondary_info: none
                      - entity: sensor.qbittorrent_none
                        name: Статус
                      - entity: sensor.qbittorrent_active_torrents
                        name: Активные торренты
                        secondary_info: none
                      - entity: sensor.qbittorrent_download_speed
                        name: Скорость загрузки
                      - entity: sensor.qbittorrent_upload_speed
                        name: Скорость раздачи

Going forward please do not post all of the code, especially for 3 problems you are looking to resolve. It’s a difficult process to filter through 800+ lines of code.

[WeisserWolf611]

Damn I love this thread (and also part1). It’s so cool to see, what you are all doing here. respect!
I am testing since 2 weeks, but can’t get the simplest thing working correctly

type: custom:mushroom-template-card
icon: mdi:battery
entity: switch.steckdose_wanddisplay_switch_0
icon_color: green
primary: Wandpanel
card_mod:
  style:
    mushroom-shape-icon: |
      ha-state-icon {
        animation: charge 3s linear infinite;
      }
      @keyframes charge {
        0%, 80% { clip-path: inset(0 0 0 0); }
        10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
        30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
        70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }

I got this code to show me a loading battery. The battery-icon is always loading.
I try to start a little more simple. I only want to change the color of the icon, but nothing works.

My plan is:
Use this card as a button, if the state is ‘off’ color is grey and no animation. But if the state is ‘on’ I will see this animation and the color green.
I am sure if I do it right, it would be possible to do.

Can anybody give me some help?
Thanks a lot

[image969 (James Scialdone)]

Hey, I think I misspoke, The code I have is not using the Mushroom drop down anymore, I’m using a different drop down. The same problem happens for both though. I need a way for the drop down to NOT get cropped forcing me to scroll the whole card

I know when using other cards such as the todo list card, when you add something it automatically resizes the card. I’d be fine with that too on the pop-up card… But what I would really like is to use the overflow in card_mod, if possible in a pop up window, so the drop down appears outside of the boundries of the pop-up

This probably doesn’t belong in the mushroom forum anymore, because i swapped my drop down list, but I’ll paste the code here anyways.

type: custom:mini-media-player
entity: media_player.living_room_2
background: /local/echo2.jpg
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: custom:stack-in-card
        cards:
          - type: entities
            entities:
              - entity: input_select.content
                name: platform
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      state-badge {
                        display: none;
                      }
          - type: conditional
            conditions:
              - condition: state
                entity: input_select.content
                state: Pandora
            card:
              type: entities
              entities:
                - entity: input_select.pandora_stations
                  card_mod:
                    style:
                      hui-generic-entity-row $: |
                        state-badge {
                          display: none;
                        }
                - type: call-service
                  name: 'Pandora Radio '
                  icon: mdi:pandora
                  action_name: Play Music...
                  service: script.alexa_pandora_living
                  data:
                    - Pandora
              state_color: false
              show_header_toggle: true
          - type: conditional
            conditions:
              - condition: state
                entity: input_select.content
                state: Amazon
            card:
              type: entities
              entities:
                - entity: input_text.text
                  type: custom:text-input-row
                - type: call-service
                  name: 'Amazon Music '
                  icon: mdi:music
                  action_name: Play Music...
                  service: script.alexa_amazon_living
                  data:
                    - AMAZON_MUSIC
              state_color: false
              show_header_toggle: true
          - type: conditional
            conditions:
              - condition: state
                entity: input_select.content
                state: Apple
            card:
              type: entities
              entities:
                - entity: input_text.text
                  type: custom:text-input-row
                - type: call-service
                  name: Apple Music
                  icon: mdi:apple
                  action_name: Play Music...
                  service: script.alexa_apple_living
                  data:
                    - Apple
              state_color: false
              show_header_toggle: true
          - type: custom:mini-media-player
            entity: media_player.living_room_2
            group: false
            source: true
            info: true
            hide:
              icon: true
              volume: false
              power: true
              play: true
              source: true
              progress: true
              name: true
              stop: true
            volume_stateless: false
            toggle_power: true
            replace_mute: stop
            card_mod:
              style: |
                :host {
                  --mini-media-player-accent-color: #bfb6bd;
                  }
                ha-card {
                  overflow
                }
        card_mod:
          style: |
            ha-card {
              overflow: visible !important;
              
            }
            ha-card > div {
              overflow-x: clip;
            }
group: true
source: null
info: null
hide:
  icon: true
  volume: true
  power: true
  controls: true
  source: true
  progress: true
shortcuts:
  columns: 6
  buttons:
    - icon: mdi:sofa
      type: script
      id: script.alexa_livingroom
    - icon: mdi:pot-steam
      type: script
      id: script.alexa_kitchen
    - icon: mdi:toilet
      type: script
      id: script.alexa_bathroom
    - icon: mdi:movie-check
      type: script
      id: script.alexa_movieroom
    - icon: mdi:desk
      type: script
      id: script.alexa_office
    - icon: mdi:bed-king
      type: script
      id: script.alexa_bedroom
card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button:nth-of-type(0) ha-icon {
        color: cyan;
      }
      mmp-button:nth-of-type(1) {
        background-color: rgb(50,50,50,.6);
      }
    style: |
      ha-card {
        height: 250px;
        }
tts:
  platform: alexa

[iona]

Hi, I’m trying to add a second line of text to the Chip card, so I can add things like template sensors, but can’t figure it out. How do I go abouts doing so?

[LiQuid_cOOled]

@WeisserWolf611

switch.steckdose_wanddisplay_switch_0

This should work for you…

type: custom:mushroom-template-card
icon: mdi:battery
entity: switch.steckdose_wanddisplay_switch_0
icon_color: |-
  {% if is_state(config.entity,'on') %}
    green
  {% else %}
    grey
  {% endif %}
primary: Wandpanel
card_mod:
  style:
    mushroom-shape-icon: |
      ha-state-icon {
        animation: {{ 'charge 3s linear infinite' if is_state(config.entity, 'on') else 'none' }}
         }
      @keyframes charge {
        0%, 80% { clip-path: inset(0 0 0 0); }
        10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
        30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
        70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }

[LiQuid_cOOled]

You could adjust a template card to look just like a chip and then you’d have primary and secondary text.

Is your layout requiring the use of a Chip?

[akcapak]

Can we define a tap_action for chips card background? Like here:

I am using a custom button card, where i define a whole custom_fields line with chips-card. And it makes sense to make the whole area clickable with the same tap action as the custom button card.

[LiQuid_cOOled]

You’d have to increase the chip size to the right to make it clickable. You could make the background transparent so you wouldn’t see a wide chip.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.xxxx
    tap_action:
      action: toggle
      
    card_mod:
     style: |
       ha-card {
          background: none !important;
          border: none;
          height: 40px;
          padding-left: 10px !important;
          display: flex;
          align-items: left;
          padding-right: 200px !important;
           }