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

Share your Projects!
,
5974

Hello everyone,

I have this code

type: custom:mushroom-template-card
primary: Ventilateur
secondary: ''
icon: mdi:fan
entity: switch.relais_ventilateur_buanderie
icon_color: green
card_mod:
  style: |
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    mushroom-shape-icon {
      box-shadow: 0px 0px;
      animation: rotation linear infinite;
      animation-duration: 3s;
      {% if is_state(config.entity, 'on') %}
       animation-duration: 3s;
      {%- endif %}

and I can’t make work fan rotation…

do you have an idea how can I change that to make work

thanks in advance

5975

Take a look at this code from @rhysb:

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite;
      }

Found here: Mushroom Cards - Build a beautiful dashboard easily 🍄

1 Like
5976

image
image1290×2450 196 KB 

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >-
      {% if is_state('lock.door_lock_2','unlocked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        Open and Unlocked
      {% elif
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        Door Open
      {% elif is_state('lock.door_lock_2','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.door_lock_2','unlocked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif is_state('lock.door_lock_2','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.door_lock_2','locked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off')
      %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: |-
      {% set bl = states('sensor.front_door_sensor_battery_level') | int %}
      {% if bl < 10 %} mdi:battery-outline
      {% elif bl < 20 %} mdi:battery-10
      {% elif bl < 30 %} mdi:battery-20
      {% elif bl < 40 %} mdi:battery-30
      {% elif bl < 50 %} mdi:battery-40
      {% elif bl < 60 %} mdi:battery-50
      {% elif bl < 70 %} mdi:battery-60
      {% elif bl < 80 %} mdi:battery-70
      {% elif bl < 90 %} mdi:battery-80
      {% elif bl < 100 %} mdi:battery-90
      {% elif bl == 100 %} mdi:battery
      {% else %} mdi:battery-unknown
      {% endif %}
    badge_color: |-
      {% set bl = states('sensor.front_door_sensor_battery_level') | int %}
      {% if bl < 10 %} red
      {% elif bl < 20 %} red
      {% elif bl < 30 %} red
      {% elif bl < 40 %} orange
      {% elif bl < 50 %} orange
      {% elif bl < 60 %} green
      {% elif bl < 70 %} green
      {% elif bl < 80 %} green
      {% elif bl < 90 %} green
      {% elif bl < 100 %} green
      {% elif bl == 100 %} green
      {% else %} disabled
      {% endif %}
    tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          left: -3px;
        }
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:lock-smart
        badge_icon: |-
          {% set bl = states('sensor.door_lock_battery_level_2') | int %}
          {% if bl < 10 %} mdi:battery-outline
          {% elif bl < 20 %} mdi:battery-10
          {% elif bl < 30 %} mdi:battery-20
          {% elif bl < 40 %} mdi:battery-30
          {% elif bl < 50 %} mdi:battery-40
          {% elif bl < 60 %} mdi:battery-50
          {% elif bl < 70 %} mdi:battery-60
          {% elif bl < 80 %} mdi:battery-70
          {% elif bl < 90 %} mdi:battery-80
          {% elif bl < 100 %} mdi:battery-90
          {% elif bl == 100 %} mdi:battery
          {% else %} mdi:battery-unknown
          {% endif %}
        badge_color: |-
          {% set bl = states('sensor.door_lock_battery_level_2') | int %}
          {% if bl < 10 %} red
          {% elif bl < 20 %} red
          {% elif bl < 30 %} red
          {% elif bl < 40 %} orange
          {% elif bl < 50 %} orange
          {% elif bl < 60 %} green
          {% elif bl < 70 %} green
          {% elif bl < 80 %} green
          {% elif bl < 90 %} green
          {% elif bl < 100 %} green
          {% elif bl == 100 %} green
          {% else %} disabled
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: keypad-front_door
        card_mod:
          style: |
            mushroom-badge-icon {
              left: -3px;
            }
            ha-card {
              margin-top: -12px;
              --icon-border-radius: 12px;
            }
            mushroom-shape-icon {
              --icon-color: #e1e1e1 !important;
            }
      - type: custom:mushroom-lock-card
        entity: lock.door_lock_2
        name: Front Door
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            ha-card {
              margin-top: -12px;
              margin-left: -52px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.door_lock_2','locked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }
5977

Thank you so much for you quick reply,

I have change like that and work perfectly :

          type: custom:mushroom-template-card
          primary: Ventilateur
          secondary: ''
          icon: mdi:fan
          entity: switch.relais_ventilateur_buanderie
          icon_color: green
          card_mod:
            style:
              mushroom-shape-icon$: |
                ha-icon {
                {% if is_state(config.entity, 'on') %}
                 --icon-animation: spin 1s linear infinite;
                {%- endif %}
                }
2 Likes
5978

I think you can try to simplifie the code like this :

{% set bl = states('sensor.door_lock_battery_level_2') | int %}
{% set level = (bl // 10) * 10 %}
{% set icon = 'mdi:battery' if level == 100 else 'mdi:battery-' ~ level %}
{% if bl > 100 or bl < 0 %} mdi:battery-unknown
{% else %} {{ icon }}
{% endif %}

This version uses the integer division operator // to determine the battery level in increments of 10

If it works well, let me know

1 Like
5979

I have the following code which causes the fan icon to pulse when on. How can I make it also rotate?

    mushroom-template-chip:nth-child(3)$: |
      ha-icon {
        {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('switch.ensuite_extractor_fan_power_outlet', 'on') }}
        transform-origin: 50% 60%;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.75); }
        60% { transform: scale(1); }
      }
5980

Try like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        .content {
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          100% { transform: rotate(360deg); }
        } 
card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: | 
      ha-icon {
        animation: beat 1.3s ease-out infinite both;
        transform-origin: 50% 60%;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.75); }
        60% { transform: scale(1); }
      }
2 Likes
5982

Guys! How to make a card background image person?Снимок экрана 2023-03-18 в 15.46.32

5983 
card_mod:
  style: |
    :host {
      --ha-card-background: none;
    }
    ha-card {
        border-width: 0px;
        background-size: cover;
        background-image: url("{{ state_attr('person.vika', 'entity_picture') }}");
    }

Found a solution

1 Like
5984

Many thanks @rhysb. I’ve got spinning fans now on my dashboard :grinning:

1 Like
5985

can you apply this with mushroom-chips - conditional

5986

I am making good progress to improve my womans ha score. Next step ist to create a small information pane with some text like temperature, number of plants with problem, next waste collection …

That worked so far and i was able to modify icon size and position. Now i am looking for the right option to decrease the gap between the line.

image
image753×270 50.3 KB

The actual code is as follows.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Info/Aktuelles
    icon: mdi:information-outline
    icon_color: '#FF8C00'
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 24px;
          --icon-size: 48px;
        }
  - type: custom:mushroom-template-card
    primary: |
      {% set condition = {
          'clear-night': 'klare Nacht',
          'cloudy': 'bewölkt',
          'fog': 'Nebel',
          'hail': 'Hagel',
          'lightning': 'Blitz',
          'lightning-rainy': 'Gewitter',
          'partlycloudy': 'teilweise bewölkt',
          'pouring': 'schüttend',
          'rainy': 'regnerisch',
          'snowy': 'verschneit',
          'snowy-rainy': 'Schneeregen',
          'sunny': 'sonnig',
          'windy': 'windig',
          'windy-variant': 'stürmisch'
          }
        %}

        Wetter: Aktuell {{ condition[states('weather.in_weatherservice')] }} bei {{
        states('sensor.oa_gd_climatesensor_temperature') }}°C / {{
        states('sensor.oa_gd_climatesensor_humidity') }}%
    secondary: ''
    icon: mdi:weather-sunny
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          --icon-size: 24px;
          margin-left: 12px !important;
        }
  - type: custom:mushroom-template-card
    primary: >
      {{ states('sensor.counter_problem_plants') }} Pflanze{{ 'n' if
      states('sensor.counter_problem_plants') | int > 1 }} mit Problemen
    secondary: ''
    icon: mdi:flower-tulip-outline
    icon_color: green
    card_mod:
      style: |
        ha-card {
          --icon-size: 24px;
          margin-left: 12px !important;
        }

So maybo someone with better css skills could give me a hint.

5987

hey rhysb, how can you make picture and icon bigger.

5988

Hey,

within a template card it should work like this

type: custom:mushroom-template-card
    primary: Info/Aktuelles
    icon: mdi:information-outline
    icon_color: '#FF8C00'
    card_mod:
      style: |
        ha-card {
          --icon-size: 48px;
        }
1 Like
5989

more of a design question.

What default colours do people use in dark mode for

Off
On
Heating Off
Auto/Idle
Heating ON

Trying to be consistent but not found anything that works and its the Auto/Idle thats throwing me as, its technically off as not using anything but cant keep it Grey as its in a different state

I was using

Off Grey
On Green
Heating Off Grey
Auto/Idle Amber
Heating On Red

Just wanting other peoples thoughts ?

Thanks

5990

Hint: try padding-bottom: 0px !important; :grin:

1 Like
5991

Yes:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: conditional
    conditions:
      - entity: switch.fungi
        state: 'on'
    chip:
      type: template
      icon: mdi:mushroom
      icon_color: red
      card_mod:
        style: |
          .content {
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          } 
card_mod:
  style:
    mushroom-conditional-chip:nth-child(3):
      mushroom-template-chip$: |
        ha-icon {
          animation: beat 1.3s ease-out infinite both;
          transform-origin: 50% 60%;
        }
        @keyframes beat {
          0% { transform: scale(1); }
          10% { transform: scale(1.1); }
          17% { transform: scale(1.05); }
          33% { transform: scale(1.75); }
          60% { transform: scale(1); }
        }
5992

Thx. appreciate it.

5993

I’ve re-done my Mushroom Welcome Card to add a collapsible sticky header. I’m still working on the Person and weather popups, so have just put in placeholders for now.

Mushroom Collapsible Welcome Card:

Mushroom Welcome Card

Top Sticky Card - Part 1:

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.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.group.external_doors) | 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: template
          entity: alarm_control_panel.home_alarm
          icon: mdi:shield-home
          icon_color: |-
            {% set alarm_status = states(entity) %}
            {% if alarm_status == 'armed_home' %} 
              green
            {% elif alarm_status == 'disarmed' %}
              blue
            {% elif alarm_status == 'arming' %}
               yellow
            {% elif alarm_status == 'triggered' %}
               red
            {% endif %} 
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Alarm
                content:
                  type: custom:mushroom-alarm-control-panel-card
                  entity: alarm_control_panel.home_alarm
                  states:
                    - armed_home
                    - armed_away
          hold_action:
            action: none
        - type: template
          entity: lock.front_door
          icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
          icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Front Door
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:layout-card
                      layout_type: masonry
                      layout: {}
                      cards:
                        - type: custom:frigate-card
                          cameras:
                            - camera_entity: camera.doorbell
                              live_provider: webrtc-card
                              webrtc_card:
                                url: >-
                                  rtsp://10.10.90.10/Streaming/Channels/501/
                          dimensions:
                            aspect_ratio_mode: dynamic
                    - type: custom:mushroom-lock-card
                      entity: lock.front_door
                card_mod:
                  style: |
                    .content {
                    }
        - type: conditional
          conditions:
            - entity: group.all_lights
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: group.all_lights
            content: >
              {{ expand(states.group.all_lights) | 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: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: group.all_lights
                          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.all_windows
              state: 'on'
          chip:
            type: template
            icon_color: blue
            icon: mdi:window-open
            entity: group.all_windows
            content: >
              {{ expand(states.group.all_windows) | selectattr('state', 'eq',
              'on') | list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_windows
                          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.external_doors
              state: 'on'
          chip:
            type: template
            entity: group.external_doors
            content: >
              {{ expand(states.group.external_doors) | 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: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.external_doors
                          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: conditional
          conditions:
            - entity: group.water_leak
              state: 'on'
          chip:
            type: template
            icon_color: light-blue
            icon: mdi:water-alert
            tap_action:
              action: more-info
            entity: group.water_leak
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
        - type: conditional
          conditions:
            - entity: group.smoke_alarm
              state: 'on'
          chip:
            type: template
            icon_color: red
            icon: mdi:fire-alert
            tap_action:
              action: more-info
            entity: group.smoke_alarm
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
      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;
          }
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: 0px;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: 0px;

      /* 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));
    }

Cont. in next post…

78 Likes
5994

Bottom Collapsible Card - Part 2:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto auto
      margin: 8px 4px 4px 4px;
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.rhys
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Rhys
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.rhys
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.sarah
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Sarah
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.sarah
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.elijah
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Elijah
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.elijah
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.michaela
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Michaela
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.michaela
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
        alignment: end
        card_mod:
          style: |
            ha-card { 
              /* Overlap avatar Chips */
              --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

              /* Set size of border around Chips */
              --chip-avatar-padding: 2px;

              /* Reduce width to fit Chips & allow max space for weather */
              width: fit-content;
              transition: all 0s;
            }
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(entity, ''temperature'') | round(1) }} °C'
        secondary: >-
          {% set condition = state_attr(entity, 'forecast')[0]['conditions'] %}
          {% set intensity = states('sensor.unsworth_heights_rain_intensity') %}

          {% if intensity != 'None' %}
            {% set condition = intensity + ' Rain' %}
          {% endif %}

          {{ condition }}
        icon: ' '
        entity: weather.weatherflow_weather_hourly
        picture: >-
          {% set condition = states(entity)  %}

          {% set intensity = states('sensor.weatherflow_rain_intensity') |
          replace(" ", "-") | lower %}

          {% if condition == 'partlycloudy' and is_state('sun.sun',
          'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}

          {% if intensity != 'none' and condition != 'lightning' %}
            {% set condition = intensity %}
          {% endif %}

          /local/weather_icons/anim/{{ condition }}.svg
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Weather
              content:
                type: custom:layout-card
                layout_type: masonry
                layout: {}
                cards:
                  - type: custom:weather-card
                    entity: weather.weatherflow_day_based_forecast
                    number_of_forecasts: '5'
        card_mod:
          style:
            mushroom-state-info$: |
              /* Align text on the right */
              .container {
                transform: scaleX(-1);
                text-align: right;
                width: fit-content;
              }
            .: |
              ha-card {
                /* Move icon to the right */
                transform: scaleX(-1);

                /* Enlarge icon & remove circular shape */
                --icon-size: 42px;
                --icon-border-radius: 0;

                /* Style secondary text */
                --card-secondary-font-weight: normal;

                /* Remove styling from card */
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 0px !important;
                transition: all 0s;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        card:
          type: custom:mushroom-title-card
          title: |-
            {% set time = now().hour %}
            {% if (time >= 18) %} 
             Good Evening,
            {% elif (time >= 12) %}
             Good Afternoon,
            {% elif (time >= 5) %}
             Good Morning,
            {% else %}
             Welcome,
            {% endif %}
          subtitle: |
            {{ user }}!
          alignment: start
        card_mod:
          style:
            mushroom-title-card$: |
              /* Style greeting */
              .title {
                --title-font-size: var(--mush-title-font-size, 16px);
                --title-font-weight: var(--mush-subtitle-font-weight, light);
                color: var(--secondary-text-color) !important;
              }
              /* Style name */
              .subtitle {
                --subtitle-font-size: var(--mush-title-font-size, 24px);
                --subtitle-font-weight: var(--mush-title-font-weight, bold);
                color: var(--primary-text-color) !important;
                padding-left: 12px;
              }
              /* Set spacing around greeting */
              .header {
                --title-padding: 0px 12px 24px;
                --title-spacing: 8px;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        secondary: House
        icon: mdi:home
        layout: vertical
        icon_color: blue
        tap_action:
          action: navigate
          navigation_path: house
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: Lights
        icon: mdi:lightbulb
        icon_color: amber
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lights
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Secure
        icon: mdi:shield
        icon_color: green
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: security
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Media
        icon: mdi:speaker
        layout: vertical
        icon_color: red
        tap_action:
          action: navigate
          navigation_path: media
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Net
        icon: mdi:lan
        layout: vertical
        icon_color: cyan
        tap_action:
          action: navigate
          navigation_path: net
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }
            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -20px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
    }

I’ve used the new color-mix command, which is supported in Chrome and Edge.

Here are the Animated Weather Icons I have used. Based on amCharts free weather icons.

35 Likes