Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
1104

The only way I know how is to use a pseudo-element

type: custom:mushroom-template-card
primary: Hover
secondary: more info
entity: cover.bed_curtains
icon: mdi:curtains
icon_color: white
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
         color: green !important;
         margin-left: 10px !important;  }
       .secondary {
         color: white !important;
         margin-left: 10px !important;  }        
    .: |
      ha-state-icon::after {
       content: "{{ states('sensor.bed_curtains_battery') }}";
       position: absolute;
       top: -10px;
       left: 30px; 
       display: flex;
       justify-content: center;
       align-items: center;
       width: 24px;
       height:24px;
       border-radius: 50%;
       background-repeat: no-repeat;
       background: blue;
       font-size: 12px;
       font-weight: bold;
        }
      ha-card {
       box-shadow: none;
       --ha-card-border-width: 0px;
        }

image

If you search badge here, there are a lot of examples.

1 Like