Mushroom Cards Card Mod Styling/Config Guide

KablammoNick · August 16, 2025, 11:01am

Apologies. These are currently all stacked inside a vertical stack on masonry, but as individual cards in a section they do the same.

Original Horizontal Stack of buttons:

type: horizontal-stack
cards:
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: none
    icon: ""
    entity: lawn_mower.am405x
    show_state: true
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: none
    icon: ""
    entity: vacuum.roborock_s5_max
    show_state: true
  - show_name: false
    show_icon: true
    type: button
    icon: mdi:plex
    entity: sensor.tautulli_watching
    show_state: true
  - show_name: false
    show_icon: true
    type: button
    icon: ""
    entity: sensor.sonarr_wanted
    show_state: true

Center:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: lawn_mower.am405x
  - type: entity
    entity: vacuum.roborock_s5_max
  - type: entity
    entity: sensor.plex_midazolam_plex
  - type: entity
    entity: sensor.sonarr_wanted
    content_info: state
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
alignment: center

Justify:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: lawn_mower.am405x
  - type: entity
    entity: vacuum.roborock_s5_max
  - type: entity
    entity: sensor.plex_midazolam_plex
  - type: entity
    entity: sensor.sonarr_wanted
    content_info: state
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
alignment: justify

as a bonus, this is one of the Mushroom Entity cards I was also testing as part of moving to a sections view - although they didn’t need to be inside a horizontal stack:

type: custom:mushroom-entity-card
entity: lawn_mower.am405x
grid_options:
  columns: 3
  rows: 2
layout: vertical
primary_info: state
secondary_info: none

but they are a lot taller than the OG button cards and not shrinkable with the UI:

Revamp · August 16, 2025, 1:00pm

Oh cool…
Thanks you very much for the steer…
I wasn’t aware of that functionality, I take it it is in the documentation somewhere between both HA and Mushroom…
Can I also assume this pop-up has it own set of properties documented too ?

Here is how I have applied it…
Once again your time and the steer is very much appreciated…

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:puzzle
    icon_color: orange
    content: Addon Store
    tap_action:
      action: navigate
      navigation_path: /hassio/store
  - type: menu
  - type: template
    tap_action:
      action: navigate
      navigation_path: /config/backup/overview
    icon: mdi:backup-restore
    entity: sensor.backup_backup_manager_state
  - type: template
    tap_action:
      action: perform-action
      confirmation:
        text: HA restart only
      perform_action: homeassistant.restart
      target: {}
    icon: mdi:home-assistant
    icon_color: yellow
    content: RHA
  - type: action
    tap_action:
      action: perform-action
      confirmation:
        text: HA Host reboot
      perform_action: hassio.host_reboot
      target: {}
    icon: mdi:restart
    icon_color: red
  - type: action
    tap_action:
      action: perform-action
      confirmation:
        text: HA Host shutdown and power off
      perform_action: hassio.host_shutdown
      target: {}
    icon: mdi:power
    icon_color: light-green
card_mod:
  style:
    mushroom-template-chip:nth-child(3)$mushroom-chip$: |

      {% if is_state('sensor.backup_backup_manager_state', 'create_backup') %}

          ha-card {
            --color: red !important;
            animation: ping 2s infinite;
                   }
           @keyframes ping {
               0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7) inset;}
               70% {box-shadow: 0 0 0 10px transparent inset;}
               100% {box-shadow: 0 0 0 0 transparent inset;}
               100% { transform: rotate(-360deg); }
                            }
                            
      {% endif %}

LiQuid_cOOled · August 17, 2025, 3:26am

Let me know if this works for you…

You can adjust the width: and chip-spacing: values to your liking

alignment: center
card_mod:
  style:
    mushroom-entity-chip:nth-child(1n)$:
      mushroom-chip$: |
        .content{
          width: 110px !important;
          padding: 0px !important;
          border: 1px solid lightgrey !important;
          border-radius: 19px;
           }
    .: |
      ha-card {
         --chip-spacing: 5px !important;
           }

KablammoNick · August 17, 2025, 6:04am

Thanks! Looks great on browser (top chips justify, bottom chips center):

But on the wall tablet it wraps the rows. Does the same if I narrow the browser window - just for a small bit of width between dropping from 3 to 2 columns/sections. Bit hard to get a screenshot from that but on mobile where it’s one column, it does pretty much the same:

To be fair, looking at it on mobile, I think the width of the chips will always be an issue with the icon on the side.

Have also tested making the mushroom-entity card’s height 80px to be about the same as the standard buttons - but that defeats the purpose of having the smaller chips.

Thanks for your help though - now that I know the bits I need to tweak, will have a play.

LiQuid_cOOled · August 17, 2025, 6:11am

Test adjusting the width down to 100px. It will work better across multiple devices.

width: 100px !important;

If you want to go this route with the Mushroom Entity card, I’d suggest using a horizontal stack with the Sections dash for the four cards. It tricks the Sections dash to only use 1 row vs 2.

Another option
If you switch to the Mushroom Template card, it would allow you to control the Sections row height with some precision. It would still be larger than 1 row with a vertical layout.

layout: vertical
grid_options:
  rows: 1.3
  columns: 3

Moving to a horizontal layout with the template card would require reducing the font and icon size to shrink to the size of a chip.

KablammoNick · August 17, 2025, 6:21am

Ta - had to get it down to 85px to fit on my iPhone 14’s app screen.

Alas 85px is too small for the other screens - pretty much the same size as the original chips.

I think I’m expecting a bit too much. Do appreciate your help though!

LiQuid_cOOled · August 17, 2025, 6:25am

Sections will adjust according to the device you are using. With other dashboards types you have to set different values using the @media CSS option

@Media Guide

I worked through several iterations, but we can generate what you want in multiple ways with card_mod

Screenshots from my iPhone 16

Sections

Masonry Dash

LiQuid_cOOled · August 17, 2025, 10:05am

@KablammoNick An example to play with the Sections dash to highlight one method to mimic chips.

type: grid
cards:
  - type: heading
    heading: Sections Example
    heading_style: title
  - type: custom:mushroom-template-card
    primary: "{{ 'Docked' if is_state(entity, 'on') else 'Away' }}"
    icon_color: blue
    icon: mdi:robot-mower
    grid_options:
      columns: 3
    entity: light.night_stand
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
             background: white !important;
             box-shadow: 0px 1px 0px 0px rgb(0,0,0), 
             0px 5px 10px 0px rgb(10,10,10), 
             inset 0px 1px 3px 0px rgba(250, 250, 250, .5),  
             inset 0px -5px 3px 0px rgba(0, 0, 0, .6) !important; 
             }
        mushroom-state-info$: |
          .primary {
              font-size: 12px !important;
              color: white !important;
              text-shadow: 2px 2px 5px black, 5px 5px 15px grey, 0 0 15px black;
              font-weight: 300 !important;
                     }
        .: |
          ha-card {
            margin-top: 10px;
            background: grey !important;
            width: 105px !important;
            height: 38px !important;
            --icon-symbol-size: 16px;
            --icon-size: 24px;
            border-radius: 19px;
            border: 2px solid blue;
            }
  - type: custom:mushroom-template-card
    primary: "{{ 'Docked' if is_state(entity, 'on') else 'Away' }}"
    icon_color: green
    icon: mdi:robot-mower
    grid_options:
      columns: 3
    entity: light.night_stand
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
             background: white !important;
             box-shadow: 0px 1px 0px 0px rgb(0,0,0), 
             0px 2px 10px 0px rgb(10,10,10), 
             inset 0px 1px 3px 0px rgba(250, 250, 250, .5),  
             inset 0px -5px 3px 0px rgba(0, 0, 0, .6) !important; 
             }
        mushroom-state-info$: |
          .primary {
              font-size: 12px !important;
              color: white !important;
              text-shadow: 2px 2px 5px black, 5px 5px 15px grey, 0 0 15px black;
              font-weight: 300 !important;
                }
        .: |
          ha-card {
            margin-top: 10px;
            background: grey !important;
            width: 105px !important;
            height: 38px !important;
            --icon-symbol-size: 16px;
            --icon-size: 24px;
            border-radius: 19px;
            border: 2px solid green;
             }
  - type: custom:mushroom-template-card
    primary: 0 watching
    icon_color: orange
    icon: mdi:plex
    grid_options:
      columns: 3
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            margin-left: -2px;
             background: black !important;
             box-shadow: 0px 1px 0px 0px rgb(0,0,0), 
             0px 5px 10px 0px rgb(10,10,10), 
             inset 0px 1px 3px 0px rgba(250, 250, 250, .5),  
             inset 0px -5px 3px 0px rgba(0, 0, 0, .6) !important; 
             }
        mushroom-state-info$: |
          .primary {
              margin: -4px;
              font-size: 11px !important;
              color: white !important;
              text-shadow: 2px 2px 5px black, 5px 5px 15px grey, 0 0 15px black;
              font-weight: 300 !important;}
                     }
        .: |
          ha-card {
            margin-top: 10px;
            background: grey !important;
            width: 105px !important;
            height: 38px !important;
            --icon-symbol-size: 14px;
            --icon-size: 26px;
            border-radius: 19px;
            border: 2px solid #cc7000;
             } 
  - type: custom:mushroom-template-card
    primary: 0 episodes
    icon_color: white
    icon: mdi:television
    grid_options:
      columns: 3
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
             margin-left: -2px;
             background: #1E90FF !important;
             box-shadow: 0px 1px 0px 0px rgb(0,0,0), 
             0px 5px 10px 0px rgb(10,10,10), 
             inset 0px 1px 3px 0px rgba(250, 250, 250, .5),  
             inset 0px -5px 3px 0px rgba(0, 0, 0, .6) !important; 
             }
        mushroom-state-info$: |
          .primary {
              margin: -2px;
              font-size: 11px !important;
              color: white !important;
              text-shadow: 2px 2px 5px black, 5px 5px 15px grey, 0 0 15px black;
              font-weight: 300 !important;
              }
        .: |
          ha-card {
            margin-top: 10px;
            background: grey !important;
            width: 105px !important;
            height: 38px !important;
            --icon-symbol-size: 16px;
            --icon-size: 24px;
            border-radius: 19px;
            border: 2px solid #1E90FF;
            }

Hmmbob · August 18, 2025, 9:15am

On my kiosk screen, I’m trying to create a quick display of the amount of PC and TV usage of the kids. I’m doing this by stacking two Mushroom template cards, the only thing I cannot get to work is to align: center the text (and only this text) of the primary field of the template card.

Any ideas?

I’d like to horizontally center the “Name” text.

- type: "custom:vertical-stack-in-card"
  card_mod:
    style: |
      ha-card { height: 55px !important; }
  cards:
    - type: custom:mushroom-template-card
      primary: "Name"
      secondary: >-
        {{ ((states('sensor.pubercave_pc_on_today') | float(0)) * 3600) | timestamp_custom('%-Hu%M', false) }}
         - {{ ((states('sensor.pubercave_tv_on_today') | float(0)) * 3600) | timestamp_custom('%-Hu%M', false) }}
      entity: sensor.pubercave_pc_on_today
      icon: mdi:desktop-classic
      icon_color: >-
        {{ "green" if is_state('binary_sensor.is_pubercave_pc_on','on') else "disabled" }}
      tap_action:
        action: none
      card_mod:
        style: |
          ha-card {
            background-color: transparent;
            border-color: transparent;
            box-shadow: none;
          }
          ha-state-icon {
          {% if is_state('binary_sensor.is_pubercave_pc_on', 'on')%}
            animation: boing 3s ease infinite;
            transform-origin: 50% 90%;
          {% endif %}
          }
    - type: custom:mushroom-template-card
      entity: binary_sensor.is_pubercave_tv_on
      icon: mdi:television-play
      icon_color: >-
        {{ "green" if is_state('binary_sensor.is_pubercave_tv_on','on') else "disabled" }}
      tap_action:
        action: none
      card_mod:
        style: |
          ha-card {
            background: none;
            margin-left: 66%;
            top: -55px;
            width: 66px;
          }
          ha-state-icon {
          {% if is_state('binary_sensor.is_pubercave_tv_on', 'on')%}
            animation: boing 3s ease infinite;
            transform-origin: 50% 90%;
          {% endif %}
          }

I did try these two variants, but that doesn’t work:

mushroom-state-info$: |
  .primary {
      alignment: center;
            }

mushroom-state-info$: |
  .primary {
      justify-content: center;
            }

LiQuid_cOOled · August 18, 2025, 9:24am

You’ll most likely want to use a margin offset

      card_mod:
       style:
        mushroom-state-info$: |
         .primary {
           margin-left: 15px ;
            }
        .: |   
          ha-card {
            background-color: transparent;
            border-color: transparent;
            box-shadow: none;
          }
          ha-state-icon {
          {% if is_state('binary_sensor.is_pubercave_pc_on', 'on')%}
            animation: boing 3s ease infinite;
            transform-origin: 50% 90%;
          {% endif %}
          }

An align value will move the field too far in my opinion

      card_mod:
       style:
        mushroom-state-info$: |
         .primary {
           text-align: center;
            }
        .: |   
          ha-card {

Hmmbob · August 18, 2025, 9:29am

LiQuid_cOOled:

      card_mod:
       style:
        mushroom-state-info$: |
         .primary {
           margin-left: 15px ;
            }
        .: |   
          ha-card {
            background-color: transparent;
            border-color: transparent;
            box-shadow: none;
          }
          ha-state-icon {
          {% if is_state('binary_sensor.is_pubercave_pc_on', 'on')%}
            animation: boing 3s ease infinite;
            transform-origin: 50% 90%;
          {% endif %}
          }

That’s it. Thank you so much… tried for hours, and within 10 mins after asking here it’s resolved. Crazy.

edit: looks great now. Many thanks again.

Mariusthvdb · August 18, 2025, 9:31am

whenever I need to move things to the center of the available space, I use
transform: translateX(50%) ;

I cant replicate the card, but it seems to work

    mushroom-state-info$: |
     .primary {
       transform: translateX(50%) ;
        }

if at all possible, I prefer that over the hardcoded options

LiQuid_cOOled · August 18, 2025, 9:42am

I 100% agree, but with the provided code, options were limited. The primary field width would also need adjusted to use transform:

        mushroom-state-info$: |
          .primary {
            transform: translateX(15%) ;
            width: 100px;
            }

Mariusthvdb · August 18, 2025, 9:48am

right.
which would make it kind of moot

LiQuid_cOOled · August 18, 2025, 10:06am

You can take it to a container level and use this for a more flexible option.

    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            text-align: center !important;
            display: inline-flex !important;       
              }

vajnorcan · August 31, 2025, 1:23am

Need some help here please. I’m unable to target the .container class inside the mushroom-template-card. I’m trying all the possible options of targetting the elements and classes but I simple cannot achieve the effect of reversing the order of the items, I’d like the icon be on the right side).

See I have a:

stack card, inside it I have
one mushroom template card and
another mushroom template card

      - type: custom:mushroom-template-card
        entity: sensor.smart_plug_1_power
        primary: null
        secondary: "{{ states(entity) }} {{ state_attr(entity, 'unit_of_measurement') }}"
        icon: mdi:chart-box-outline
        icon_color: null
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              border: none;
              box-shadow: 20px 10px 20px -15px rgba(0,0,0,.1);
            }
            mushroom-state-item$: |
              .container {
                color: yellow !important; /*test only*/
                flex-direction: row-reverse !important;
                display: flex !important;
              }
            mushroom-state-item > .container {
                color: yellow !important; /*test only*/
                flex-direction: row-reverse !important;
                display: flex !important;
              }
            mushroom-state-item {
                color: yellow !important; /*test only*/
                flex-direction: row-reverse !important;
                display: flex !important;
              }

I’m on the latest release of mushroom. thanks!

Frosty · August 31, 2025, 9:32am

card_mod:
  style:
    mushroom-state-item$: |
      .container {
        color: yellow !important; /*test only*/
        flex-direction: row-reverse !important;
        display: flex !important;
      }
    .: |
      ha-card {
        border: none;
        box-shadow: 20px 10px 20px -15px rgba(0,0,0,.1);
      }

take a look at

vajnorcan · August 31, 2025, 9:43am

good call. will do. much appreciated!

vajnorcan · September 6, 2025, 4:57am

@Frosty seems like I’m unable to fully understand the way the card mod targets the elements. Example, I’m struggling to target the <mushroom-template-card> element directly, as I need to reduce its margin. It’s not on the shadow-root, it’s the directly highleghted one as per screenshot. TIA

roma777roma · September 6, 2025, 10:26am

Hello everyone,
Sorry, I’m new to this card. Can someone explain to me how I can combine the various styles? For example, with the cover card, if I wanted to combine these styles:

      card_mod:
        style: |
          ha-state-icon {
            color: orange;
          }
          mushroom-state-info$: |
            .container {
              --card-primary-color: blue;
              --card-secondary-color: orange;
            }

How should I write them?

Thank you so much.