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

[Jarne_Roussard]

hallo @rhysb I was working on your nice card, but the problem is that if I scroll through the page, it will go along nicely, but if I click on the bell, my chips card will become clear? what did I do wrong & I have the mushroom shadow theme on with dark on? thanks in advance!

here screenshots

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ now().strftime("%A, %-d %B") }}'
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.light.lampen_nu) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.ramen) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.group.deuren) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + states('sensor.devices_with_low_battery') | int %}
              {% if notifications > 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 
    alignment: justify
  - type: conditional
    conditions:
      - entity: input_boolean.notifications
        state: 'on'
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: input_boolean.hide_header_mobile
          icon_color: blue
          icon: mdi:page-layout-header
          name: null
          content_info: none
          tap_action:
            action: toggle
        - type: entity
          entity: camera.kooi_noucky
          icon_color: blue
          name: 'Camera '
          content_info: name
          icon: phu:arlo-essential-indoor
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                style: '--popup-background-color: black;'
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:mushroom-template-card
                      primary: Camera
                      secondary: null
                      icon: phu:arlo-essential-indoor
                      icon_color: blue
                    - type: custom:layout-card
                      layout_type: masonry
                      layout:
                        width: 300
                        max_cols: 1
                        height: auto
                        padding: 0px
                        card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
                      cards:
                        - show_state: false
                          show_name: false
                          camera_view: live
                          type: picture-entity
                          entity: camera.kooi_noucky
                          camera_image: camera.kooi_noucky
                          theme: Mushroom
                          card_mod:
                            style: |
                              ha-card {
                                background: none;
                                box-shadow: none;
                              }
        - type: conditional
          conditions:
            - entity: light.lampen_nu
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: light.lampen_nu
            content: >
              {{ expand(states.light.lampen_nu) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: light.lampen_nu
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: light.lampen_nu
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.ramen
              state: 'on'
          chip:
            type: template
            icon_color: blue
            icon: mdi:window-open
            entity: group.ramen
            content: >
              {{ expand(states.group.ramen) | selectattr('state', 'eq', 'on') |
              list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Ramen Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.ramen
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.deuren
              state: 'on'
          chip:
            type: template
            entity: group.deuren
            content: >
              {{ expand(states.group.deuren) | selectattr('state', 'eq', 'on') |
              list | count }}
            icon_color: brown
            icon: mdi:door-open
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Deuren Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.deuren
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            icon_color: brown
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: sensor.devices_with_low_battery
              state_not: '0'
          chip:
            type: template
            entity: sensor.devices_with_low_battery
            content: |
              {{ states(config.entity) | int }}
            icon_color: red
            icon: mdi:battery-alert
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Low Batteries
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - attributes:
                            device_class: battery
                          state: < 30
                          options:
                            type: custom:mushroom-template-card
                            primary: '{{ states(entity) }}%'
                            secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
                            icon: >
                              {% set battery_level = (states(entity) | int / 10)
                              | round(0) | int * 10 %}

                              {% if battery_level == 100 %}
                                mdi:battery
                              {% elif battery_level > 0 %}
                                mdi:battery-{{ battery_level }}
                              {% else %}
                                mdi:battery-outline
                              {% endif %}
                            icon_color: |-
                              {% set battery_level = states(entity) | int %}
                              {% if battery_level > 90 %} 
                                green
                              {% elif battery_level > 60 %}
                                light-green
                              {% elif battery_level > 50 %}
                                lime
                              {% elif battery_level > 40 %}
                                yellow
                              {% elif battery_level > 30 %}
                                amber
                              {% elif battery_level > 20 %}
                                orange
                              {% elif battery_level > 10 %}
                                deep-orange
                              {% else %}
                                red
                              {% endif %} 
                            layout: horizontal
                            tap_action:
                              action: none
                            badge_icon: >-
                              {{ 'mdi:exclamation-thick' if states(entity) | int
                              < 10 }} 
                            badge_color: red
                      exclude: null
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: entity
          entity: sensor.lights_on_lampen_nu
          icon: hue:bulb-group-sultan-lightstrip
        - type: entity
          entity: sensor.lights_off_lampen_nu
          use_entity_picture: false
          icon: hue:bulb-group-sultan-lightstrip-off
        - type: template
          content: |-
            {{ states('sensor.openweathermap_temperature') }} /
            {{ states('sensor.multi_sensor_tarras_temperature') }} °C
          icon: |-
            {% if is_state('weather.openweathermap', 'sunny') %}
            mdi:weather-sunny
            {% elif is_state('weather.openweathermap', 'partlycloudy') %}
            mdi:weather-partly-cloudy
            {% elif is_state('weather.openweathermap', 'cloudy') %}
            mdi:weather-cloudy
            {% elif is_state('weather.openweathermap', 'rainy') %}
            mdi:weather-rainy
            {% elif is_state('weather.openweathermap', 'partly-rainy') %}
            mdi:weather-partly-rainy
            {% elif is_state('weather.openweathermap', 'pouring') %}
            mdi:weather-pouring
            {% elif is_state('weather.openweathermap', 'fog') %}
            mdi:weather-fog
            {% elif is_state('weather.openweathermap', 'hail') %}
            mdi:weather-hail
            {% elif is_state('weather.openweathermap', 'hazy') %}
            mdi:weather-hazy
            {% elif is_state('weather.openweathermap', 'lightning') %}
            mdi:weather-lightning
            {% elif is_state('weather.openweathermap', 'lightning-rainy') %}
            mdi:weather-lightning-rainy
            {% elif is_state('weather.openweathermap', 'partly-lightning') %}
            mdi:weather-partly-lightning
            {% elif is_state('weather.openweathermap', 'snowy') %}
            mdi:weather-snowy
            {% elif is_state('weather.openweathermap', 'snowy-heavy') %}
            mdi:weather-snowy-heavy
            {% elif is_state('weather.openweathermap', 'snowy-rainy') %}
            mdi:weather-snowy-rainy
            {% elif is_state('weather.openweathermap', 'partly-snowy') %}
            mdi:weather-partly-snowy
            {% elif is_state('weather.openweathermap', 'partly-snowy-rainy') %}
            mdi:weather-partly-snowy-rainy
            {% elif is_state('weather.openweathermap', 'clear-night') %}
            mdi:weather-night
            {% elif is_state('weather.openweathermap', 'night-partly-cloudy') %}
            mdi:weather-night-partly-cloudy
            {% endif %}
          icon_color: >-
            {% if is_state('weather.openweathermap', 'sunny') %} #FFF900  {%
            elif is_state('weather.openweathermap', 'partlycloudy') %} #B3B6B7
            {% elif is_state('weather.openweathermap', 'cloudy') %} #626567 {%
            elif is_state('weather.openweathermap', 'rainy') %} #5757BE {% elif
            is_state('weather.openweathermap', 'partly-rainy') %} #4E4DD8 {%
            elif is_state('weather.openweathermap', 'pouring') %} #2E9AFE {%
            elif is_state('weather.openweathermap', 'fog') %} #C0C0C0 {% elif
            is_state('weather.openweathermap', 'hail') %} white {% elif
            is_state('weather.openweathermap', 'hazy') %} grey {% elif
            is_state('weather.openweathermap', 'lightning') %} #D9D401 {% elif
            is_state('weather.openweathermap', 'lightning-rainy') %} #D9D401 {%
            elif is_state('weather.openweathermap', 'partly-lightning') %}
            #D9D401 {% elif is_state('weather.openweathermap', 'snowy') %}
            #FFFFFF {% elif is_state('weather.openweathermap', 'snowy-heavy') %}
            #FFFFFF {% elif is_state('weather.openweathermap', 'snowy-rainy') %}
            #FFFFFF {% elif is_state('weather.openweathermap', 'partly-snowy')
            %} #FFFFFF {% elif is_state('weather.openweathermap',
            'partly-snowy-rainy') %} #FFFFFF {% elif
            is_state('weather.openweathermap', 'clear-night') %} #FFF900 {% elif
            is_state('weather.openweathermap', 'night-partly-cloudy') %} #B3B6B7
            {% endif %}
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                style: '--popup-background-color: black;'
                content:
                  type: custom:weather-card
                  entity: weather.openweathermap
                  name: Weer
                  current: true
                  details: true
                  forecast: true
                  hourly_forecast: true
                  number_of_forecasts: 5
          card_mod:
            style:
              mushroom-template-chip:nth-child(1)$: |
                ha-icon {
                  {%- set sensor = states('weather.openweathermap') %}
                  {%- if sensor == 'sunny' %}
                    animation: sunny 8s ease-in-out infinite alternate;
                  {%- elif sensor == 'partly-cloudy' %}
                    animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
                  {%- elif sensor == 'cloudy' %}
                    animation: cloudy 10s ease-in-out infinite;
                  {%- elif sensor == 'rainy' %}
                    animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
                  {%- elif sensor == 'pouring' %}
                    animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
                  {%- elif sensor == 'fog' %}
                    animation: cloudy 10s ease-in-out infinite, fog 4s infinite; 
                  {%- elif sensor == 'hail' %}
                    animation: cloudy 10s ease-in-out infinite, hail 2s infinite; 
                  {%- elif sensor == 'lightning' %}
                    animation: cloudy 10s ease-in-out infinite, lightning 4s infinite; 
                  {%- elif sensor == 'snow' %}
                    animation: cloudy 10s ease-in-out infinite, snow 4s infinite; 
                  {%- elif sensor == 'clear-night' %}
                    animation: moon 10s linear infinite, stars 5s linear infinite;
                  {%- endif %}
                }
                @keyframes cloudy {
                  0%, 100% { transform: translateX(3px); }
                  30% { transform: translateX(-1px); }
                  45% { transform: translateX(1.5px); }
                  75% { transform: translateX(-3.2px); }
                }
                @keyframes sun {
                  50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
                }
                @keyframes sunny {
                  70% { transform: rotate(360deg) scale(1); }
                  80% { transform: scale(1); }
                  90% { transform: scale(1.15); }
                  100% { transform: scale(1); }
                }
                @keyframes rain {
                  50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
                }
                @keyframes pouring {
                  0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
                }
                @keyframes fog {
                  0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
                }
                @keyframes hail {
                  0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
                  50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
                }
                @keyframes lightning {
                  10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
                  10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
                }
                @keyframes snow {
                  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
                  51% { clip-path: inset(0 0 0 0); }
                }
                @keyframes moon {
                  0%, 100% { transform: rotate(12deg); }
                  30% { transform: rotate(-6deg); }
                  45% { transform: rotate(8deg); }
                  75% { transform: rotate(-10deg); }
                }
                @keyframes stars {
                  0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
                  3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
                  14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
                }
        - type: entity
          entity: binary_sensor.meteoalarm
          use_entity_picture: false
        - type: entity
          entity: sensor.multi_sensor_slaapkamer_jarne_temperature
        - type: entity
          entity: sensor.multi_sensor_tarras_temperature
        - type: entity
          entity: sensor.deur_open
          icon: mdi:door-open
          use_entity_picture: false
        - type: entity
          entity: sensor.deur_gesloten
          icon: mdi:door-closed-lock
          use_entity_picture: false
        - type: entity
          entity: sensor.raam_open
          icon: mdi:window-open-variant
        - type: entity
          entity: sensor.raam_gesloten
          icon: mdi:window-closed-variant
        - type: entity
          entity: sensor.covers_open
          icon: mdi:window-shutter-open
        - type: entity
          entity: sensor.covers_closed
          icon: mdi:window-shutter
        - type: entity
          entity: media_player.spotify_jarne_roussard
        - type: entity
          entity: calendar.onze_agenda
          tap_action:
            action: navigate
            navigation_path: agenda
        - type: entity
          entity: switch.rituals_parfum
          icon: phu:rituals
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: rituals-parfum
        - type: entity
          entity: sensor.jupiler_pro_league
          icon: mdi:soccer
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: voetbal
        - type: entity
          entity: switch.stopcontact_printer_living
          icon: mdi:printer
          icon_color: blue
          tap_action:
            action: toggle
    alignment: end
    card_mod:
      style: |
        /* Set margins on notification chips */
        ha-card {
          margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
          transition: all 0s;
        }
        - type: entity
          entity: binary_sensor.update
          icon: mdi:update
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: update
        - type: entity
          entity: sensor.plex_server_jarne
          icon: mdi:plex
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: plex
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: var(--header-height);
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: var(--header-height);

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};

      /* Set width to match */
      width: calc(100% - var(--mush-chip-spacing, 8px));
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

[rhysb (Rhys)]

Here’s a different take on the slider card.

Mushroom Light Slider Card

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
tap_action:
  action: toggle
use_light_color: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }
    .: |
      mushroom-light-brightness-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;
      }

Works Ok with RGB lights too .

[rhysb (Rhys)]

No, this sort of thing:

    card-mod-card: |
        .type-custom-mushroom-template-card:active {
            transform: scale(0.975);
            transition: all 0s;
        }

[TadF (Tad)]

Hello, is it possible to have more badges on a template card?

[rhysb (Rhys)]

Hey David, how about this?

Mushroom Climate Status

type: custom:mushroom-template-card
secondary: '{{ states(config.entity) | replace(''_only'', '''') | replace(''_'', ''/'') | title }}'
icon: none
entity: climate.office_air_conditioner
layout: vertical
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;
      }
      .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;
      }

[rhysb (Rhys)]

Yes, why not?

Mushroom Multi-Badges

type: custom:mushroom-template-card
primary: Mushrooms
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:bug
badge_color: green
card_mod:
  style: |
    mushroom-badge-icon:after {
        content: "bug_report";

        font-size: 0.9em;
        font-family: 'Material Icons';
        
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 32px;

        color: var(--icon-color);
        background: var(--main-color);

        width: var(--mush-badge-size, 16px);
        height: var(--mush-badge-size, 16px);
        border-radius: var(--mush-badge-border-radius, 50%);
      }

    mushroom-badge-icon:before {
        content: "bug_report";

        font-size: 0.9em;
        font-family: 'Material Icons';
        
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 32px;

        color: var(--icon-color);
        background: var(--main-color);

        width: var(--mush-badge-size, 16px);
        height: var(--mush-badge-size, 16px);
        border-radius: var(--mush-badge-border-radius, 50%);
      }

The additional badges only support a limited set of Material Icons.

Material Symbols and Icons - Google Fonts

To use the Material Icons font you will need to add https://fonts.googleapis.com/icon?family=Material+Icons as a Stylesheet Resource.

[swifty]

@rhysb Very nice! - Is there a way to make the 100% on slider effect appear for lights which do not have brightness control ? (eg. bulbs which are just switched on/off)
Just been playing around with the card and it currently looks a bit inconsistent as bulbs with no brightness control just show the icon lit up.

[rhysb (Rhys)]

It’s just using the existing Mushroom Slider, so for those types of lights it won’t exist. You could add a suitable background color to match.

type: custom:mushroom-light-card
entity: light.office_light
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }
    .: |
      mushroom-state-item {
        pointer-events: none;
      }
      mushroom-shape-icon {
        pointer-events: auto;
      }
      ha-card {
        {{ '--ha-card-background: rgba(var(--rgb-state-light), 0.3);' if is_state(config.entity, 'on') }}
      }

[rhysb (Rhys)]

Change top: var(--header-height); to top: 0px; for starters.

[filikun]

Yeah unfortunately it is. That is actually a very good workaround! Do you mind sharing the code for your card?

[swifty]

As always… legend! - Thank you

[rhysb (Rhys)]

Cute Popups can be done like this:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: alarm_control_panel.home_alarm
    content_info: none
    use_entity_picture: true
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Alarm
          content:
            type: vertical-stack
            cards:
              - type: tile
                entity: alarm_control_panel.home_alarm
                features:
                  - type: alarm-modes
                    modes:
                      - armed_away
                      - disarmed
          card_mod:
            style:
              ha-header-bar$: |
                .mdc-top-app-bar__section {
                  padding: 0px !important;
                }
                .mdc-top-app-bar__title {
                  --mdc-typography-headline6-font-size: 18px;
                  padding-left: 8px !important;
                }
                .mdc-top-app-bar__row {
                  height: var(--mdc-icon-button-size, 36px) !important;
                }
                .mdc-top-app-bar {
                  padding: 8px;
                }
              .: |
                ha-icon-button {
                  position: absolute !important;
                  right: 0px;
                  background: color-mix(in srgb, var(--grey-color) 20%, transparent);
                  border-radius: 50%;
                  border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                }
                :host {
                  --popup-min-width: 450px;
                  --mdc-icon-button-size: 36px;
                }

[rhysb (Rhys)]

It can sort of be done like this.

Mushroom Info Material Icons

type: custom:mushroom-template-card
primary: Mushroom
secondary: '{{ states(''sensor.rhys_office_sensor_temperature'') | round(0) }}°C'
icon: mdi:mushroom
icon_color: red
card_mod:
  style:
    mushroom-state-info$: |
      .primary:after {
        content: " local_florist";
        font-family: 'Material Icons';
        vertical-align: bottom;
      }
      .secondary:before {
        content: "thermostat";
        font-family: 'Material Icons';
        vertical-align: bottom;
      }

Only a limited set of Material Icons are supported.

Material Symbols and Icons - Google Fonts

To use the Material Icons font you will need to add https://fonts.googleapis.com/icon?family=Material+Icons as a Stylesheet Resource.

[boheme61]

Sure, i picked it out of my grid, so it’s “stand alone”, you might “ajust it” to your View/Card, bt as you see there are “some variables” to play around with

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: sensor.asusr_connected_devices
    primary: 2.4 GHz
    secondary: " On - {{
          state_attr('sensor.asusr_connected_devices','devices')|selectattr('connection_type','==','2.4
          GHz')|selectattr('guest', '==', false) |list|count }}"
    multiline_secondary: true
    icon_type: icon
    layout: horizontal
    icon: mdi:wifi
    icon_color: |
      {% set state = states('sensor.asusr_connected_devices')|float(-1) %}

      {% if state >= 21 %} #FFBF00

      {% elif state >= 19 %} orange

      {% elif state >= 18 %} red

      {% else %} #00FFFF

      {% endif %}
    card_mod:
      style: |
        ha-card {
          margin-top: 8px;
          margin-left: 0px;
          padding-top: 0px !important;
          border-radius: 15px;
        }
card_mod:
  style: |
    ha-card {
      height: 50px !important;
      width: 120px !important;
      --mush-card-primary-font-size: 12px;
      --mush-card-secondary-font-size: 12px;
      --secondary-text-color: #FFBF00;
      --primary-text-color: #87bf50;
      margin: 0 auto;
      padding-top: 0px !important;
      padding-bottom: 20px !important;
      border-radius: 15px;
    }
    :host {
      --mush-icon-size: 32px;
      --mush-icon-symbol-size: 24px;
      --mush-card-primary-font-weight: lighter;
      --mush-card-secondary-font-weight: lighter;
    }

Edit: if you don’t want the colored-circle behind the icon, you just set the “mush-icon-size:” to 0px
Edit2: and you really dont need the “first” entity: … i just have it as “additional” so i have easy access to “more-info” of that “entity”

Edit3: Maybe @rhysb have the “trick” to make the “whitespace” smaller between Icon and “state-info” and between primary | secondary … i have tried 50options , but seems like Mushroom-template are different from others here also, can’t use row-height or margins/position to squeeze it together, it seems , i’ve tried on state-item and .container etc., nothing seems to “stick”

EDIT: just remembered i had line-height, on another View/card … under the last ha-card… looked already better
–mush-card-primary-line-height: 12px;
–mush-card-secondary-line-height: 12px;

[reypm]

No, I do not … but I would like to add it I will check if this can be added directly to the theme itself avoiding card-mod

[damru (Damien)]

For the record, here’s how to do it:

{{ state_attr(entity,  'icon') }}

example:

- type: custom:mushroom-chips-card
  chips:
      - type: template
        entity: sensor.phone_battery_level
        icon_color: |-
          {% set battery_level = states(config.entity) | int %}
          {% if battery_level == 'unknown' %} disabled
          {% elif battery_level >= 80 %} green
          {% elif battery_level >= 60 %} light-green
          {% elif battery_level >= 50 %} lime
          {% elif battery_level >= 40 %} yellow
          {% elif battery_level >= 30 %} amber
          {% elif battery_level >= 20 %} orange
          {% elif battery_level >= 10 %} deep-orange
          {% else %} red
          {% endif %}
        icon: >-
          {{ state_attr(config.entity,  'icon') }}
        content: >-
          {{ states(config.entity) }}{{ state_attr(config.entity, 'unit_of_measurement') }}

[Mattia2399]

I’m trying to recreate your room card using this mushroom-light-card. Can you tell me how to change the secondary information?

[Stuartie (Stuart)]

This is brilliant and I’ve got it working on it’s own but I’m having great difficulty trying to get this and the mushroom welcome card that you created working together, just can’t get the yaml formatted correctly for some reason…

Edit: Got it! Once I actually copied the code into a proper editor it was much easier to sort out.

Just a few question moving on from that, where you have the state of the person for example it should show “Home” inside my home zone, I get it appearing as “home” without a capital and also when I’m away it shows as “not_home” can I make it show as “Away” instead?

[thesmer (Thomas)]

Hi, I’m a great fan of this thread and the mushroom cards. Big kudos to all of you! I got lot’s of inspiration for my dashboard. Now I need to ask for some help, as I can not figure out what the problem is. I have some chip cards with icons on my room card and like to change the color depending on the status.
Living room ON (all lights) - everything looks fine (orange):

Living room ON (except floor lamp) - the floor lamp icon is white, but should be gray:

Living room OFF - the floor lamp icon is white, but should be gray:

The gray color works with all icons that are aligned automatically, as you can see on the “Arbeitszimmer” room. However it seems, that the card_mod is somehow interfering with the icon_color. I can also put ‘green’ in the statement and it won’t work as well. If you need the whole room card code, let me know and I will gladly post it as well. Attached is only the part used for the chips cards.

- type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.gwohnzimmer_licht_ambiente
        icon: mdi:floor-lamp
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
        content_info: none
        card_mod:
          style: |
            ha-card {
              position: absolute;
              left: 0px;
            }
      - type: conditional
        conditions:
          - entity: binary_sensor.fensterkontakt_wohnzimmer_state
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:window-open
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.bewegungssensor_wohnzimmer_iaszone
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-icon-size: 25px;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
        }

[davidnestico]

Love it! Gonna try and make this work with the other stuff now too.