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

[g0m]

fantastic, sorry I missed that!

[vinceskahan]

Agree - after a bit of fiddling I came up with this for lights. This’ll come in quite handy with the lot of door/window sensors I need to define in the dashboard. Thanks !!!

card:
  square: false
  type: grid
  columns: 3
card_param: cards
filter:
  include:
    - domain: light
      state: //
      name: //
      options:
        type: custom:mushroom-light-card
        vertical: true
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
        card_mod: null
        style: |
          ha-card {
            {% set x = states(config.entity) %}
            --primary-text-color:
            {% if x == "on" %} black ;
            {% else %}         red;
            {% endif %}
            --secondary-text-color:
            {% if x == "on" %} blue ;
            {% else %}         magenta;
            {% endif %}
            background:
               {% if x == "on" %}
               lightgreen
               {% elif x == "off" %}
               white
               {% else %}
               lightgrey
               {% endif %}
           }

[eMeF]

With massive help on that forum, I played with my fan cards and ended up with the following.

On the main dashboard screen, I have a simple fan card with a couple of presets and a gear icon that takes me to the detailed settings screen. There I can control not only the fan but also the associated automation and their thresholds.

The cards also have an animated glow effect around the icon to indicate if the automation is on and a double tab action to toggle it on/off.

Simple view

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-fan-card
    entity: fan.whisper_flex
    name: Cooling Fan
    icon_animation: true
    show_percentage_control: true
    collapsible_controls: true
    tap_action:
      action: call-service
      service: script.fan_on_off_with_automation
    hold_action:
      action: navigate
      navigation_path: /dashboard-mushroom/fan
    double_tap_action:
      action: navigate
      navigation_path: /dashboard-mushroom/fan
    card_mod:
      style:
        mushroom-shape-icon$: |
          {% if is_state('input_boolean.auto_fan', 'on') %}
          .shape {
            --shape-animation: ping 5s infinite;
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
            }
            
            100% {
              box-shadow: 0 0 5px 5px transparent;
            }
          }
          {% elif is_state('input_boolean.auto_fan', 'off') %}
          {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: scene.fan_15
        icon_color: null
        icon: mdi:fan-speed-2
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_15
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: scene.fan_20
        icon_color: null
        icon: mdi:fan-speed-3
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_20
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }
      - type: entity
        entity: fan.whisper_flex
        icon_color: blue
        icon: mdi:cog
        content_info: none
        tap_action:
          action: navigate
          navigation_path: /dashboard-mushroom/fan
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }

Detailed view

Code

type: custom:stack-in-card
cards:
#Main fan card
  - type: custom:mushroom-fan-card
    entity: fan.whisper_flex
    icon_animation: true
    show_percentage_control: true
    collapsible_controls: false
    tap_action:
      action: call-service
      service: script.fan_on_off_with_automation
    hold_action:
      action: navigate
      navigation_path: /dashboard-mushroom/fan
    card_mod:
      style:
        mushroom-shape-icon$: |
          {% if is_state('input_boolean.auto_fan', 'on') %}
          .shape {
            --shape-animation: ping 5s infinite;
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
            }
            
            100% {
              box-shadow: 0 0 5px 5px transparent;
            }
          }
          {% elif is_state('input_boolean.auto_fan', 'off') %}
          {% endif %}
#Chips with presets
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: scene.fan_15
        icon_color: null
        icon: mdi:fan-speed-2
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_15
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: scene.fan_20
        icon_color: null
        icon: mdi:fan-speed-3
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_20
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            margin: 0px 12px 0px;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }
#Header for Mode control
  - type: custom:mushroom-title-card
    subtitle: Mode
    card_mod:
      style: |
        ha-card {
          margin: -12px 0px 0px;
        }
#Mode control
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: fan.whisper_flex
            tap_action:
              action: call-service
              service: fan.set_preset_mode
              data:
                preset_mode: nature
              target:
                entity_id: fan.whisper_flex
            icon: mdi:forest
            content: Nature
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','nature') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','nature') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: fan.whisper_flex
            tap_action:
              action: call-service
              service: fan.set_preset_mode
              data:
                preset_mode: sleep
              target:
                entity_id: fan.whisper_flex
            icon: mdi:power-sleep
            content: Sleep
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: fan.whisper_flex
            tap_action:
              action: call-service
              service: fan.set_preset_mode
              data:
                preset_mode: smart
              target:
                entity_id: fan.whisper_flex
            icon: mdi:fan
            content: Smart
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
        alignment: Center
        card_mod:
          style: |
            mushroom-template-chip {
              width: 100%; 
            }
            div.chip-container {
              justify-content: space-evenly;
              flex-wrap: nowrap;
            }

            ha-card {
              margin: -15px 12px 0px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-box-shadow: none;
              --chip-border-radius: 10px;
              --chip-height: 42px;
              --chip-padding:10px;
            }
#Header for Oscillation control
  - type: custom:mushroom-title-card
    subtitle: Oscillation and Timer
    card_mod:
      style: |
        ha-card {
          margin: 0px 0px 0px;
        }
#Oscillation control
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.whisper_flex_horizontal_oscilation
            tap_action:
              action: call-service
              service: switch.toggle
              target:
                entity_id: switch.whisper_flex_horizontal_oscilation
            icon: mdi:pan-horizontal
            content: Horizontal
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_horizontal_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state('switch.whisper_flex_horizontal_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: switch.whisper_flex_vertical_oscilation
            tap_action:
              action: call-service
              service: switch.toggle
              target:
                entity_id: switch.whisper_flex_vertical_oscilation
            icon: mdi:pan-vertical
            content: Vertical
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_vertical_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state('switch.whisper_flex_vertical_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: select.whisper_flex_countdown
            tap_action:
              action: more-info
            icon: mdi:timer-sand-complete
            content: '{{states(''select.whisper_flex_countdown'') }} hours'
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
        alignment: Center
        card_mod:
          style: |
            mushroom-template-chip {
              width: 100%; 
            }
            div.chip-container {
              justify-content: space-evenly;
              flex-wrap: nowrap;
            }

            ha-card {
              margin: -15px 12px 12px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-box-shadow: none;
              --chip-border-radius: 10px;
              --chip-height: 42px;
              --chip-padding:10px;
            }

I had some trouble modifying the spacing before and after the title card but I somehow managed although it is probably not the cleanest approach

ha-card {
              margin: -15px 12px 12px;

[Jshaw20 (Jack)]

Please can someone help, I am trying to stop popups on my phone from taking the full screen, I have created this very small test popup and it works fine on my desktop but when opened on my phone its still full screen;

desktop:

phone:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Test Popup
    style: |
      --popup-min-width: 200px;
      --popup-max-width: 290px;
      --popup-border-width: var(--ha-card-border-width, 2px);
      --popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
      --popup-border-radius: 28px;
      --popup-background-color: var(--ha-card-background, var(--card-background-color, white));
      --popup-padding-x: 0px;
      --popup-padding-y: 0px;
    content:
        type: entity
        entity: binary_sensor.garage_door

[maesenator]

Hoping someone can help me with this one… I’m trying to call the service input_select.select_option while using jinja2 in the option field.

The following code is working perfectly in the dev tools

service: input_select.select_option
target:
  entity_id: input_select.home_mode      
data:
  option: |
    {{'Thuis' if states('input_select.home_mode') == 'Hold' else 'Hold'}}

But for some reason it doesn’t work inside the mushroom template card

  - type: template
    icon: mdi:walk
    content: '{{ states(''input_select.home_mode'') }}'
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id: input_select.home_mode
      data:
        option: |
          {{'Thuis' if states('input_select.home_mode') == 'Hold' else 'Hold'}}

When I press the card it gives me an error

[dimitri.landerloos]

This is not the right place to ask this question. Take it to the browser mod page. This question has nothing to do with mushroom cards.

Browser_mod - turn your browser into a controllable device, and a media_player

Unfortunately I can’t do it

FYI its a known bug if you looked at just a few recent posts on the right page.

[1umnyy (Viktor)]

Hello everyone, tell me, maybe someone has examples of flower cards.

[galaxy]

Sorry for a delayed reply. I am posting my code below for this card. However, I feel that if you change the setting of your theme to Mushroom Shadow on the viewing device, your line problem may go away.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: 🌡{{ states('sensor.kitchen_temperature') }}°C
    icon: mdi:countertop
    icon_color: |-
      {% set state=states('light.kitchen_cabinet_lights') %}
      {% if state=='on' %}
      green
      {% elif state=='off' %}
      grey
      {% else %}
      grey
      {% endif %}
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-cards/kitchen
    hold_action:
      action: none
    double_tap_action:
      action: none
    style: |
      :host([dark-mode]) {
        background: rgba(var(--rgb-primary-background-color), 0.2);
      } 
      :host {
        background: rgba(var(--rgb-primary-text-color), 0.025);
      } 
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0;
      }
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: light.kitchen_cabinet_lights
            state: 'on'
        chip:
          type: entity
          entity: light.kitchen_cabinet_lights
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.kitchen_cabinet_lights
          content_info: none
          icon: mdi:lightbulb
      - type: conditional
        conditions:
          - entity: switch.fridge
            state: 'on'
        chip:
          type: entity
          entity: switch.fridge
          icon_color: red
          tap_action:
            action: call-service
            service: switch.turn_off
            service_data: {}
            target:
              entity_id: switch.fridge
          content_info: none
          icon: mdi:fridge-variant
      - type: conditional
        conditions:
          - entity: switch.deep_freezer
            state: 'on'
        chip:
          type: entity
          entity: switch.deep_freezer
          icon_color: deep-purple
          tap_action:
            action: call-service
            service: switch.turn_off
            service_data: {}
            target:
              entity_id: switch.deep_freezer
          content_info: none
          icon: mdi:treasure-chest
      - type: conditional
        conditions:
          - entity: fan.kitchen_exhaust_fan
            state: 'on'
        chip:
          type: entity
          entity: fan.kitchen_exhaust_fan
          icon_color: green
          card_mod: null
          style: |
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            ha-card {
              animation: rotation linear infinite;
              {% if states('fan.kitchen_exhaust_fan') == 'on' %}
               animation-duration: 1s;
              {%- else -%}
              {%- endif %}
            }
          tap_action:
            action: call-service
            service: fan.turn_off
            service_data: {}
            target:
              entity_id: fan.kitchen_exhaust_fan
          content_info: none
          icon: mdi:fan
style: |
  ha-card {
    height: 100px;
    {% if is_state('light.kitchen_cabinet_lights', 'on') %}
       background: rgba(255, 152, 0, 0.1);
    {% endif %}
  }
view_layout:
  grid-area: cen4
card_mod:
  style: |
    ha-card {
      background: none !important;
      {% if states('light.kitchen_cabinet_lights') == 'on' %}
      box-shadow: 0px 0px 5px 5px #56DD3F !important;
      {% else %}    
      {% endif %}
    }

[Mattia2399]

but I still don’t understand how these conditional cards work? ID card where do I get it?

[flyize]

Anyone know how to change the size of the font when casting? My Google Hub seems to ignore any of the font stuff.

[MarcinGuc]

Hi,
I have problem with animated icon on mushroom chips card. I instaled car mod but I affraid it doesn’t work correctly. Every time when I put some animated code nothings happend. I haven’t expirience of CSS. Mny thanks for help. I enclose code. Please help.

[Mats789]

Hi @MarcinGuc and welcome to the forum!

I encourage you to read this post:

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[eMeF]

If anyone has been wondering how to create a template card for controlling a fan, including sliding speed control, here’s an example.

type: custom:stack-in-card
cards:
#Template card with all its capabilities available
  - type: custom:mushroom-template-card
    primary: Cooling Fan
    icon: mdi:fan
    entity: fan.whisper_flex
    tap_action:
      action: toggle
#Fan card stripped of all unnecessary components through configuration
  - type: custom:mushroom-fan-card
    entity: fan.whisper_flex
    icon_type: none
    primary_info: none
    secondary_info: none
    show_percentage_control: true
    collapsible_controls: true
    show_oscillate_control: true
#Car mod to manage the spacing between the two cards
    card_mod:
      style: |
        ha-card {
          padding-top: 0px !important;
        {% if is_state('fan.whisper_flex', 'off') %}
          padding-bottom: 0px !important;
        {% endif %}
        }

If you set collapsible_controls: false then use this for card_mod instead

    card_mod:
      style: |
        ha-card {
          padding-top: 0px !important;
        }

[eMeF]

Here is my idea for a vacuum control card.

It consists of two cards

• Main vacuum controls

  • Presets for most frequent segments cleaning
  • Cogwheel to navigate to another view where I manage other vacuum settings
  • Play button to clean all house
  • List play for segments selected on the next card

• Segment selector

  • Buttons to select segments for cleaning
  • A long tap on the button initiates individual segment cleaning

I also utilize the swipe card to navigate between the two cards on the dashboard.

Code

type: custom:swipe-card
cards:
#Main control card
  - type: custom:stack-in-card
    cards:
#Card icon and name
      - type: custom:mushroom-template-card
        primary: Roborock
        secondary: '{{ states("sensor.roborock_s7_status") | title }}'
        icon: mdi:robot-vacuum
        icon_color: |-
          {% if not is_state('vacuum.roborock_s7_2', 'docked') %}
            amber      
          {% elif is_state('input_boolean.vacuum_auto_start', 'on') %}
            blue
          {% else %} 
            disabled
          {% endif %}
        entity: vacuum.roborock_s7_2
        badge_icon: |-
          {% if is_state('input_boolean.vacuum_auto_start', 'on') %}
            mdi:home-automation      
          {% elif is_state('input_boolean.vacuum_auto_start', 'off') %}

          {% endif %}
        badge_color: |-
          {% if is_state('input_boolean.vacuum_auto_start', 'on') %}
            blue      
          {% elif is_state('input_boolean.vacuum_auto_start', 'off') %}

          {% endif %}
        tap_action:
          action: navigate
          navigation_path: /dashboard-mushroom/vacuum
        double_tap_action:
          action: call-service
          service: input_boolean.toggle
          data: {}
          target:
            entity_id: input_boolean.vacuum_auto_start
        hold_action:
          action: navigate
          navigation_path: /dashboard-mushroom/vacuum
#Presets
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: scene.fan_20
            icon_color: white
            icon: mdi:hanger
            content_info: none
            tap_action:
              action: call-service
              service: vacuum.send_command
              data:
                command: app_segment_clean
                params:
                  - segments:
                      - 16
                    repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
              target:
                entity_id: vacuum.roborock_s7_2
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
                  --icon-color: rgb(var(--rgb-disabled));
                } 
          - type: entity
            entity: scene.fan_20
            icon_color: white
            icon: mdi:chef-hat
            content_info: none
            tap_action:
              action: call-service
              service: vacuum.send_command
              data:
                command: app_segment_clean
                params:
                  - segments:
                      - 22
                    repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
              target:
                entity_id: vacuum.roborock_s7_2
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
                  --icon-color: rgb(var(--rgb-disabled));
                } 
          - type: entity
            entity: scene.fan_20
            icon_color: blue
            icon: mdi:cog
            content_info: none
            tap_action:
              action: navigate
              navigation_path: /dashboard-mushroom/vacuum
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
                  --icon-color: rgb(var(--rgb-disabled));
                } 
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }
#Control buttons
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: vacuum.start
              target:
                entity_id: vacuum.roborock_s7_2
            icon: mdi:play
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: script.vacuum_selected_rooms
            icon: mdi:playlist-check
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: vacuum.pause
              target:
                entity_id: vacuum.roborock_s7_2
            icon: mdi:pause
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.roborock_s7_2
            icon: mdi:home-map-marker
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
        alignment: Center
        card_mod:
          style: |
            mushroom-template-chip {
              width: 100%; 
            }
            div.chip-container {
              justify-content: space-evenly;
              flex-wrap: nowrap;
            }

            ha-card {
              margin: 0px 12px 12px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-box-shadow: none;
              --chip-border-radius: 10px;
              --chip-height: 42px;
              --chip-padding:10px;
            }
#Segment selector card
  - type: custom:stack-in-card
    cards:
#First row of buttons
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: input_boolean.vacuum_bathroom
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_bathroom
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 24
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Bathroom
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_bathroom', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_bedroom
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_bedroom
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 19
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Bedroom
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_bedroom', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_hallway
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_hallway
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 16
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Hallway
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_hallway', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_kitchen
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_kitchen
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 22
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Kitchen
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_kitchen', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
            alignment: Center
            card_mod:
              style: |
                mushroom-template-chip {
                  width: 100%; 
                }
                div.chip-container {
                  justify-content: space-evenly;
                  flex-wrap: nowrap;
                }

                ha-card {
                  margin: 12px 12px 12px;
                  --chip-background: rgba(var(--rgb-disabled), 0.15);
                  --chip-box-shadow: none;
                  --chip-border-radius: 10px;
                  --chip-height: 42px;
                  --chip-padding:10px;
                }
#Second row of buttons
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: input_boolean.vacuum_living_room
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_living_room
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 23
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Living Room
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_living_room', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_technical
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_technical
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 18
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Technical
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_technical', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_toilet
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_toilet
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 17
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Toilet
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_toilet', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_veronika_room
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_veronika_room
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 20
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Veronika
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_veronika_room', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
            alignment: Center
            card_mod:
              style: |
                mushroom-template-chip {
                  width: 100%; 
                }
                div.chip-container {
                  justify-content: space-evenly;
                  flex-wrap: nowrap;
                }

                ha-card {
                  margin: 0px 12px 12px;
                  --chip-background: rgba(var(--rgb-disabled), 0.15);
                  --chip-box-shadow: none;
                  --chip-border-radius: 10px;
                  --chip-height: 42px;
                  --chip-padding:10px;
                }

[dimitri.landerloos]

Looks good!
Post your finished cards here btw

Mushroom Inspiration!

Mushroom topic are now over 8000 post! It`s really hard to get inspiration or code to use with your own dashboard. I would like this post to be all about pictures with codes, nothing else! So if you have something to share or offer, please do it with pictures and code. Do not ask any questions here, instead ask them directly to the person or in the original Mushroom post! To all new user of Mushroom, you will need to download some things from HACS, some example: Card Mod, Stack In …

[lesley-vladislav]

Hey there! Can anyone help with combining all the smart outlets of a particular selected room into one card, with the ability to disable all outlets by pressing just one card? Thanks!!!

[burg93 (Adam)]

Has anyone successfully managed to make a sticky bottom navbar like this from minimalist? I’ve seen a few posts in this massive thread but they’re often not in a finished state and have a few bugs related. I’d love to see some inspiration, and the code!

[Hotdogxxxx (Chris)]

Hi guys,

I hope you can help me or guide me in the right direction. I created the following dashboard mainly using mushroom cards. My main idea is that I get only shown the minimum information to have an overview what is going on currently in my house. By clicking on the entity card I get more detailed information for each floor.

On the left side you see how the dashboard currently looks like. Every floor is created with an entity card and several chip cards that are only shown if they have a certain status. Otherwise they remain hidden not to overblow the view.

On the right side you find the dashboard how I would like it to look like. Basically every chip card gets a “header” or “title”. I tried to realize it by stacking a markdown card and a chip card together. But then I can not use it as a chip card anymore. So how do I horizontally stack them aligned at the end.

Thanks for your help.

[eMeF]

I was planning to have a look at that too:) Did you try this Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7023 by Guizmos

I have dropped a random card to my dashboard, applied the card mod and it works…but I have an issue with the position of the card. It seems like the further down you place the card (order-wise) the further on top it is placed but some of the cards are still further on top.

[dimitri.landerloos]

i think it is likely to do with your z-index: in card-mod. you can try and set your other cards to z-index: 0; and then having your sticky card by z-index: 1? that might work.