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

For the last 3 week I have been designing a new room cards with multiple usage. 99% of it has been completed. I will release the codes in a day or two. I think I have what you ask for.

They are multiple cards inside one card and you can swipe between them. The size of the card adjust automaticallywhen you swipe. You can also insert any card inside these cards.

You can almost control every single aspect of your house from within these cards.

The cards have multiple functions :

  • Showa an animation when a room temperature is below a certain degree
  • You can control your devices such as water heaters, air conditions or tv remotes (simply everything) within these cards.
  • All motion movements, devices updates, applications running on your android tv, sensor status, light and volume control exists in these cards

  • When spotify plays in any rooms media player, the artwork of the album will cover the room card surface.

image

  • You can also control scenes from the card main page

image

  • You can start listening Spotify on any room you like by just simply pressing the room card twice. The music will start automatically on the rooms media player and the artwork will cover the room card.
  • Cards are minimalistic. You can switch between multiple layouts with an help of a button.


With this design you no longer need separate dashboards for each room.

9 Likes

Thought I’d post up my Room link card and get some feedback

7 Likes

Thank you. I feel stupid in that I simply didn’t notice the mushroom select card though I had looked for it. Your suggestion to create a select entity from the effect attribute of the light is an elegant solution that I would not have thought of however it is unnecessary in my case as my custom effects list is already being generated by an input select entity.

This is as good a solution as I was hoping for and is much better than my current layout. Still, it would be nice to be able to toggle an effects control on the light card the same way you can for brightness, temp, and color.

EDIT: Unfortunately, while it looks nice, the vertical stack in card constrains the select options so they are not all accessible. I guess for now I will have to make do with a normal vertical stack. The mushroom select card is still much better than the default entities card though.

nice room card. I am trying to conceptualize how you do that. might be quicker just to ask… can you share the yml. struggling to figure out the radius corners of the chips, and the column splits. thx

Ah, I see. Layout Card has a default column width of 300px. If your fold-entity-row is narrower than 300px you will need to reduce the column width or use layout_type: grid instead.

        card:
          type: custom:layout-card
          cards: []
          layout_type: grid
        sort:
          method: first

or

        card:
          type: custom:layout-card
          cards: []
          layout_type: masonry
          layout:
            width: 200
        sort:
          method: first

You can set the font size like this:

    card_mod:
      style: |
        :host {
          --masonry-view-card-margin: -12px 8px 0px 8px; 
          --ha-card-border-width: 0;
          --ha-card-background: none;
          --ha-card-box-shadow: 0;
          --mush-card-primary-font-size: 12px;
          --mush-card-secondary-font-size: 10px;
        }
1 Like

You can do an animation effect on the chevron like this:

card_mod:
  style:
    fold-entity-row$: |
      ha-icon {
        background: none !important;
        margin-right: 24px !important;
        --toggle-icon-width: 21px !important;
        color: var(--disabled-color);
      }
      ha-icon:active {
        animation: rotate 200ms linear forwards;
      }
      @keyframes rotate {
        100% { transform: rotate(180deg); }
      }
    .: |
      .card-content {
        padding: 0;
      }

How about something like this:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: person.admin
    icon: none
    icon_color: |
      {% if is_state(entity, 'home') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: ''
    secondary: ''
    layout: horizontal
    picture: '{{ state_attr(entity, ''entity_picture'') }}'
    tap_action:
      action: navigate
      navigation_path: /home-yaml/lichten
    badge_icon: mdi:home
    badge_color: |
      {% if is_state(entity, 'home') %}
        #357b8c
      {% else %}  
        grey
      {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 14px !important;
            position: relative;
            top: -50px;
            left: -110px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-avatar$: |
          .picture {
            position: relative;
            left: -72px;
            top: 8px;
            
            border: 4px solid 
            {% if is_state(config.entity, 'home') %}
              rgb(var(--rgb-state-person-home))
            {% elif is_state(config.entity, 'not_home') %}
              rgb(var(--rgb-state-person-not-home))
            {% elif is_state(config.entity, 'unknown') %}
              rgb(var(--rgb-state-person-unknown))
            {% else %}
              rgb(var(--rgb-state-person-zone))
            {% endif %};

            box-shadow: 0px 0px 8px 6px rgba(50,150,150,0.96) !important;
          }
        .: |
          :host {
            --mush-icon-size: 96px;
            --secondary-text-color: red;
          }
          mushroom-badge-icon {
            left: 1px !important;
            top: 1px !important;
          }
          ha-card {
            --badge-icon-size: 20px;
            --badge-size: 28px;
          }
card_mod:
  style: |
    ha-card {
      height: 92px !important;
      width: 192px !important;
    }

Very nice!
But how can i add my battery level to it?

playing with that a bit (personally, I always love to have the card_mod directly under the card it mods, and never use !important if not required for functionality…). Also, I use the same left margin on fold entities as the header, so when collapsed, it shows like a regular entities card.
I made it like this:

    - type: entities
      card_mod:
        style:
          fold-entity-row$: |
            ha-icon {
              color: rgb(var(--rgb-disabled-color));
              margin-right: 24px;
            }
          .: |
            .card-content {
              padding: 0;
            }

      entities:
        - type: custom:fold-entity-row
          head:
            type: custom:mushroom-entity-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
            entity: group.hub_device_trackers
            name: Lounge Amps
            icon: mdi:audio-video
            icon_color: light-blue
            tap_action:
              action: toggle
          padding: 0
          entities:
            - type: custom:auto-entities
              filter:
                include:
                  - group: group.hub_device_trackers
                    options:
                      type: custom:mushroom-entity-card
                      card_mod:
                        style: |
                          ha-card {
                            margin: -8px -16px;
                            box-shadow: none;
                          }
                      icon_color: light-blue
                      tap_action:
                        action: toggle
              card:
                type: entities
                card_mod:
                  style: |
                    ha-card {
                      margin: -8px 0px 0px 0px;
                      box-shadow: none;
                    }
              sort:
                method: friendly_name

(ofc, change the group…)

suppose the biggest change is I dont use the layout card. Why would you do that? Minimizing custom cards is always my main driver (for obvious maintenance and support issues reasons)

btw, since the entities in my config above use only short names, I ended up with a huge amount of empty card space… making that into a grid is much more efficient :wink:

    - type: entities
      card_mod:
        style:
          fold-entity-row$: |
            ha-icon {
              color: rgb(var(--rgb-disabled-color));
              margin-right: 24px;
            }
          .: |
            .card-content {
              padding: 0;
            }

      entities:
        - type: custom:fold-entity-row
          head:
            type: custom:mushroom-entity-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
            entity: group.hub_device_trackers
            name: Lounge Amps
            icon: mdi:audio-video
            icon_color: light-blue
            tap_action:
              action: toggle
          padding: 0
          entities:
            - type: custom:auto-entities
              card_param: cards
              filter:
                include:
                  - group: group.hub_device_trackers
                    options:
                      type: custom:mushroom-person-card
                      <<: &style_card
                        card_mod:
                          style: |
                            ha-card {
                              margin: -8px 0px 0px 0px;
                              box-shadow: none;
                            }
                      icon_color: light-blue
                      tap_action:
                        action: toggle
              card:
                type: grid
                columns: 2
                square: false
                <<: *style_card
              sort:
                method: friendly_name

closed:


open

haha make that a mushroom-person-card (should really be called a mushroom-tracker-card…)

even better, throw it in a decluttering template

card:

  type: entities
  card_mod:
    style:
      fold-entity-row$: |
        ha-icon {
          color: rgb(var(--rgb-disabled-color));
          margin-right: 24px;
        }
      .: |
        .card-content {
          padding: 0;
        }

  entities:
    - type: custom:fold-entity-row
      head:
        type: custom:mushroom-entity-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
        entity: group.[[group]]
        name: '[[name]]'
        icon: mdi:audio-video
        icon_color: light-blue
        tap_action:
          action: toggle
      padding: 0
      entities:
        - type: custom:auto-entities
          card_param: cards
          filter:
            include:
              - group: group.[[group]]
                options:
                  type: custom:mushroom-[[type]]-card
                  <<: &style_card
                    card_mod:
                      style: |
                        ha-card {
                          margin: -8px 0px 0px 0px;
                          box-shadow: none;
                        }
                  icon_color: light-blue
                  tap_action:
                    action: toggle
          card:
            type: grid
            columns: 2
            square: false
            <<: *style_card
          sort:
            method: friendly_name

and the dashboard only needs:

    - type: custom:decluttering-card
      template: group_mushroom_grid
      variables:
        - name: Device trackers
        - group: hub_device_trackers
        - type: person

and is reusable anywhere…

honestly, I am stil not convinced these cards are used optimally like that. In my room views, I tend to prefer this

5 Likes

Added one for you, and some others…

I dont have a colored progress bar since, i think, the update to 2023.2.

When the media player is paused, the progress bar is grey. But if it is playing it is not visible.

Any idea why? @rhysb :slight_smile:

progress-bar

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.wohnzimmer_pi
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    fill_container: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary:before {
            content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
          }
        .: |
          mushroom-shape-icon {
            display: flex;
            {% set media_type = state_attr(config.entity, 'media_content_type') %}
            {% if media_type == 'tvshow' %}
              --card-mod-icon: mdi:television-classic;
              animation: flicker 1s linear infinite alternate;
            {% elif media_type == 'movie' %}
              --card-mod-icon: mdi:movie-roll;
              animation: spin 2s linear infinite reverse;
            {% elif media_type == 'music' %}
              --card-mod-icon: mdi:music;
              animation: beat 1.3s ease-out infinite both;
            {% elif media_type == 'playlist' %}
              --card-mod-icon: mdi:music;
              animation: beat 1.3s ease-out infinite both;
            {% else %}
              --card-mod-icon: mdi:play;
            {% endif %}

            {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

          }
          @keyframes flicker {
            0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
            32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
          }
          @keyframes beat {
            0%, 60% { --icon-symbol-size: 21px; }
            5%, 17%, 57% { --icon-symbol-size: 22px; }
            10%, 20%, 51% { --icon-symbol-size: 23px; }
            25%, 45% { --icon-symbol-size: 24px; }
            30%, 39% { --icon-symbol-size: 25px; }
            33% { --icon-symbol-size: 26px; }
          }
          ha-card {
            --ha-card-border-width: 0;
          }
          mushroom-state-info$: |
            .primary:before {
              content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
            }
          ha-card:before {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            content: "";

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

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

            {% set media_type = state_attr(config.entity, 'media_content_type') %}
            {% if media_type == 'tvshow' %}
              aspect-ratio: 16 / 9;
            {% elif media_type == 'movie' %}
              aspect-ratio: 2 / 3;
            {% else %}
              aspect-ratio: 1 / 1;
            {% endif %}
          }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 60px
      margin: '-14px 0px -8px -4px;'
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.wohnzimmer_mediaplayer_plex
        volume_controls:
          - volume_set
          - volume_buttons
        media_controls: []
        show_volume_level: true
        use_media_info: false
        icon_type: none
        primary_info: none
        secondary_info: none
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
              box-shadow: none;
              margin-right: -8px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: input_boolean.multiroom_status
                state: 'on'
            chip:
              type: action
              icon: mdi:music-box
              tap_action:
                action: call-service
                service: script.multiroom_off
              card_mod:
                style: |
                  ha-card {
                    --chip-background: rgba(var(--rgb-disabled), 0.2);
                    margin-top: 12px; 
                    --chip-box-shadow: none;
                    --chip-border-radius: var(--control-border-radius);
                    --chip-border-width: 0;
                    --chip-height: 42px;
                  }
          - type: conditional
            conditions:
              - entity: input_boolean.multiroom_status
                state: 'off'
            chip:
              type: action
              icon: mdi:music-box-multiple
              tap_action:
                action: call-service
                service: script.multiroom_on
              card_mod:
                style: |
                  ha-card {
                    --chip-background: rgba(var(--rgb-disabled), 0.2);
                    margin-top: 12px; 
                    --chip-box-shadow: none;
                    --chip-border-radius: var(--control-border-radius);
                    --chip-border-width: 0;
                    --chip-height: 42px;
                  }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 60px
      margin: '-14px 0px -8px -4px;'
    cards:
      - type: conditional
        conditions:
          - entity: media_player.kueche
            state_not: 'off'
          - entity: media_player.kueche
            state_not: idle
          - entity: media_player.kueche
            state_not: unavailable
        card:
          type: custom:mushroom-media-player-card
          entity: media_player.kueche
          volume_controls:
            - volume_set
          media_controls: []
          show_volume_level: true
          use_media_info: false
          icon_type: none
          primary_info: none
          secondary_info: none
          card_mod:
            style: |
              ha-card {
                --ha-card-border-width: 0;
                box-shadow: none;
                margin-right: -8px !important;
              }
      - type: conditional
        conditions:
          - entity: media_player.kueche
            state_not: 'off'
          - entity: media_player.kueche
            state_not: idle
          - entity: media_player.kueche
            state_not: unavailable
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              icon: mdi:knife
              card_mod:
                style: |
                  ha-card {
                    --chip-background: rgba(var(--rgb-disabled), 0.2);
                    margin-top: 12px; 
                    --chip-box-shadow: none;
                    --chip-border-radius: var(--control-border-radius);
                    --chip-border-width: 0;
                    --chip-height: 42px;
                  }
  - type: conditional
    conditions:
      - entity: media_player.wohnzimmer_pi
        state_not: 'off'
      - entity: media_player.wohnzimmer_pi
        state_not: idle
    card:
      entity: media_player.wohnzimmer_pi
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-orange-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-orange-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
  - type: custom:stack-in-card
    mode: horizontal
    margin: false
    cards:
      - type: custom:mushroom-entity-card
        entity: script.playplaylist_wohnzimmer
        name: Metal
        icon: mdi:playlist-music
        secondary_info: none
        tap_action:
          action: toggle
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

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

      filter: blur(150px) saturate(200%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

Unfortunately, the Mushroom rgb colors were removed from HA. You can add the mush-rgb colors to your theme and use them instead.

2 Likes

You can like this:

card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
      }
    .: |
      :host {
        --mush-icon-size: 90px;
        --mush-card-primary-font-size: 24px;
        --mush-card-primary-font-weight: normal;
        --mush-card-secondary-font-size: 16px;
        --mush-card-secondary-font-weight: normal;
      }
1 Like

Yeah, that was it. Missed this change apparently. Thanks for your help.

1 Like

Hey, y’all. I’m new to home assistant and customization of Lovelace; however, I’ve decided that I really like the mushroom cards and an trying to achieve a particular look and functionally. (Don’t hurt me for my code).

I’ve got this card looking the way I like; however, I lose toggle functionally and am unable to reduce the overall height of the card(chart still takes up all room below in vertical stack causing a gap)

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: Block Heater
    secondary: '{{ states(''sensor.f250blockheater_energy_power'') }} W'
    icon: mdi:car-lifted-pickup
    entity: switch.f250blockheater
    icon_color: green
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    layout: horizontal
    fill_container: true
    multiline_secondary: true
  - type: custom:apexcharts-card
    layout: minimal
    header:
      show: false
      title: ApexCharts-Card
      show_states: true
      colorize_states: true
    apex_config:
      chart:
        height: 100px
    series:
      - entity: sensor.f250blockheater_energy_power
        data_generator: ''
        color: green
        curve: smooth
        stroke_width: 2
        type: area
        opacity: 0.09
    show:
        loading: false
    card_mod:
      style: |
        ha-card {
          background: transparent;
          top: -108px;
          padding-left: 50%;
          align: right;
          border: 0;
          height: 100px;
        }

How it looks:

Just interest in a little guidance and I thank you all for posting your configurations. They look awesome!

Thank you, I have now finished my front page weather card with changing (animated) icons for each weather condition :slight_smile:

  - type: custom:stack-in-card
    keep:
      box_shadow: false
      border_radius: true
      margin: true
      outer_padding: false
      background: false
    cards:
      - type: grid
        columns: 2
        square: false
        cards:
          - type: grid
            columns: 1
            square: false
            cards:
              - type: custom:mushroom-template-card
                entity: weather.buienradar
                icon: mdi:help
                icon_color: '#03A9F4'
                layout: vertical
                primary: '{{ state_attr(entity, "temperature") }} °C'
                secondary: '{{ state_attr(entity, "humidity") }} %'
                tap_action:
                  action: navigate
                  navigation_path: buiten
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        --shape-color: none;
                      }
                    .: |
                      mushroom-shape-icon {
                        display: flex;
                        {% set weer_type = states('weather.buienradar') %}
                        {% if weer_type == 'cloudy' %}
                          --card-mod-icon: mdi:weather-cloudy;
                          animation: cloudy 10s ease-in-out infinite;
                        {% elif weer_type == 'exceptional' %}
                          --card-mod-icon: mdi:alert-outline;
                          animation: cloudy 10s ease-in-out infinite;
                        {% elif weer_type == 'fog' %}
                          --card-mod-icon: mdi:weather-fog;
                          animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
                        {% elif weer_type == 'hail' %}
                          --card-mod-icon: mdi:weather-hail;
                          animation: cloudy 10s ease-in-out infinite, hail 2s infinite;
                        {% elif weer_type == 'lightning' %}
                          --card-mod-icon: mdi:weather-lightning;
                          animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
                        {% elif weer_type == 'lightning_rainy' %}
                          --card-mod-icon: mdi:weather-lightning-rainy;
                          animation: cloudy 10s ease-in-out infinite;
                        {% elif weer_type == 'partlycloudy' %}
                          {% if states['sun.sun'].state == 'below_horizon' %}
                            --card-mod-icon: mdi:weather-night-partly-cloudy;
                            animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
                          {% else %}
                            --card-mod-icon: mdi:weather-partly-cloudy;
                            animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
                          {% endif %}
                        {% elif weer_type == 'pouring' %}
                          --card-mod-icon: mdi:weather-pouring;
                          animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
                        {% elif weer_type == 'rainy' %}
                          --card-mod-icon: mdi:weather-rainy;
                          animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
                        {% elif weer_type == 'snowy' %}
                          --card-mod-icon: mdi:weather-snowy;
                          animation: cloudy 10s ease-in-out infinite, snow 4s infinite;
                        {% elif weer_type == 'snowy_rainy' %}
                          --card-mod-icon: mdi:weather-snowy-rainy;
                          animation: cloudy 10s ease-in-out infinite;
                        {% elif weer_type == 'sunny' %}
                          {% if states['sun.sun'].state == 'below_horizon' %}
                            --card-mod-icon: mdi:weather-night;
                            animation: moon 10s linear infinite, stars 5s linear infinite;
                          {% else %}
                            --card-mod-icon: mdi:weather-sunny;
                            animation: sunny 8s ease-in-out infinite alternate;
                          {% endif %}
                        {% elif weer_type == 'windy' %}
                          --card-mod-icon: mdi:weather-windy;
                          animation: cloudy 10s ease-in-out infinite;
                        {% elif weer_type == 'windy_variant' %}
                          --card-mod-icon: mdi:weather-windy-variant;
                          animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
                        {% else %}
                          --card-mod-icon: mdi:help;
                        {% endif %}
                      }
                      @keyframes sunny {
                        70% { transform: rotate(360deg) scale(1); }
                        80% { transform: scale(1); }
                        90% { transform: scale(1.15); }
                        100% { transform: scale(1); }
                      }
                      @keyframes cloudy {
                        0%, 100% { transform: translateX(3px); }
                        30% { transform: translateX(-1px); }
                        45% { transform: translateX(1.5px); }
                        75% { transform: translateX(-3.2px); }
                      }
                      @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 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 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); }
                      } 
                      @keyframes wind {
                        0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                        25% { clip-path: inset(0 0 37% 0); }
                      }
                      @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 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 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 sun {
                        50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
                      }
                      :host {
                        --mush-icon-size: 90px;
                        --mush-card-primary-font-size: 22px;
                        --mush-card-primary-font-weight: normal;
                        --mush-card-secondary-font-size: 16px;
                        --mush-card-secondary-font-weight: normal;
                      }
          - type: custom:stack-in-card
            keep:
              box_shadow: false
              border_radius: true
              margin: false
              outer_padding: false
              background: false
            cards:
              - type: picture-entity
                entity: camera.buienradar
                show_state: false
                show_name: false
                camera_view: auto
4 Likes

Am I missing something here? For some reason the chips are not animating…
Also, how can I make them bigger? They’re pretty tiny right now

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:washing-machine
    icon_color: amber
    tap_action:
      action: none
    hold_action:
      action: none
  - type: template
    icon: mdi:dishwasher
    entity: input_boolean.dishwasher
    icon_color: |-
      {% if is_state('input_boolean.dishwasher', 'on') %}
        blue
      {% else %}
        white
      {% endif %} 
    hold_action:
      action: none
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }  
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        {{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite; transform-origin: 50% 75%;' if is_state('input_boolean.dishwasher', 'on') }}
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      }
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      } 

No worries happy to share, it’s a combination of elements of different things I’ve also seen on this thread that I’ve managed to combine.

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 123px auto
          grid-template-rows: auto
          margin: 0 auto;
          padding: 5px
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: light.bathroom_light
                icon: mdi:lightbulb
                icon_color: |-
                  {% set state = states(entity) %} 
                  {% if state == 'on' %}
                   white
                  {% else %}
                   grey
                  {% endif %}
                tap_action:
                  action: more-info
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-padding: 0 0 0 10px;
                  }
              - type: template
                entity: switch.adaptive_lighting_bathroom
                icon: |-
                  {% set state = states(entity) %} 
                  {% if state == 'on' %}
                   mdi:lightbulb-auto
                  {% else %}
                   mdi:lightbulb-auto-outline
                  {% endif %}
                icon_color: |-
                  {% set state = states(entity) %} 
                  {% if state == 'on' %}
                   orange
                  {% else %}
                   grey
                  {% endif %}
                tap_action:
                  action: toggle
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 15px 0 10px;
                  }
              - type: template
                entity: switch.adaptive_lighting_sleep_mode_bathroom
                icon: mdi:theme-light-dark
                icon_color: |-
                  {% set state = states(entity) %} 
                  {% if state == 'on' %}
                   orange
                  {% else %}
                   grey
                  {% endif %}
                tap_action:
                  action: toggle
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0;
                  }
            card_mod:
              style: |
                ha-card {
                  background-color: rgba(0, 0, 0, 0.6) !important;
                  border-radius: var(--ha-card-border-radius, 12px) !important;
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                }
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                content: >-
                  {{ states(entity) | float }} {{ state_attr(entity,
                  "unit_of_measurement") }}
                entity: sensor.bathroom_sensor_temperature
                icon: mdi:thermometer
                tap_action:
                  action: more-info
                icon_color: |-
                  {% set state=states(entity)|float(0) %}
                  {% if state >= 21 %}
                  red
                  {% elif state >= 19 %}
                  orange
                  {% elif state < 19 %}
                  blue
                  {% else %}
                  grey
                  {% endif %}
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 10px;
                  }
              - type: template
                content: >-
                  {{ states(entity) }}{{ state_attr(entity,
                  "unit_of_measurement") }}
                entity: sensor.bathroom_sensor_humidity
                icon: mdi:water
                icon_color: blue
                tap_action:
                  action: none
                hold_action:
                  action: none
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 10px 0 0px;
                  }
              - type: template
                content: >-
                  {{ states(entity) }} {{ state_attr(entity,
                  "unit_of_measurement") }}
                entity: sensor.bathroom_sensor_pressure
                icon: mdi:gauge
                icon_color: grey
                tap_action:
                  action: none
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 10px;
                  }
            card_mod:
              style: |
                ha-card {
                  background-color: rgba(0, 0, 0, 0.7) !important;
                  border-radius: var(--ha-card-border-radius, 12px) !important;
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Bathroom
            icon: mdi:shower-head
            fill_container: true
            tap_action:
              action: none
            hold_action:
              action: none
            icon_color: blue
            card_mod:
              style: |
                ha-card {
                  background: none;
                  padding: 10px 16px !important;
                }
          - type: custom:layout-card
            layout_type: custom:grid-layout
            layout:
              grid-template-columns: 65% auto
              grid-template-rows: auto
              margin: 0 0 0 5px;
              padding: 5px
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: sensor.washing_machine_current_consumption
                    content: |-
                      {% set state = states(entity) | float(0) %} 
                      {% if state > 0 %}
                       Running
                      {% endif %}
                    icon: mdi:washing-machine
                    icon_color: |-
                      {% set state = states(entity)|float(0) %} 
                      {% if state > 0 %}
                       blue
                      {% elif state == 'unavailable' %}
                       grey
                      {% else %}
                       white
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: laundry
                    card_mod: null
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-spacing: 0px;
                        --chip-padding: 0 0 0 10px;
                      }
                  - type: template
                    entity: sensor.dryer_current_consumption
                    content: |-
                      {% set state = states(entity) | float(0) %} 
                      {% if state > 0 %}
                       Running
                      {% endif %}
                    icon: mdi:tumble-dryer
                    icon_color: |-
                      {% set state = states(entity)|float(0) %} 
                      {% if state > 0 %}
                       red
                      {% elif state == 'unavailable' %}
                       grey
                      {% else %}
                       white
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: laundry
                    card_mod: null
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-spacing: 0px;
                        --chip-padding: 0 15px 0;
                      }
                card_mod:
                  style: |
                    ha-card {
                      --chip-spacing: 0;
                    }
              - type: custom:mushroom-chips-card
                chips: null
        card_mod:
          style: |
            ha-card {
              background-color: rgba(0, 0, 0, 0.7) !important;
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
              box-shadow: none;
              position: relative;
              bottom: -100px;
              border-radius: 0;
            }
            :host {
              --mush-card-primary-font-size: 1.2rem;
            }
    card_mod:
      style: |
        ha-card {
          min-height: 275px;
          background: var(--card-background-color) url('/local/backgrounds/bathroom.jpg');
          no-repeat center 0px;
          background-size: cover;
          position: relative;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 15px 15px 0 0;
        }
1 Like

Gave it a try and found the same thing. For now I’ve just got the main wled select entity as a separate card. It works but could be nicer.

What would be really great would be a Mushroom LED Strip card :wink:

For your first question try changing ‘–icon-animation’ to ‘animation’.