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

kippesik · October 18, 2022, 7:53pm

Thanks for all examples shared here, I was able to build a lot of cards myself.
I documented a couple of cards here, maybe this also makes it easier for others:

Thekholm · October 18, 2022, 8:13pm

Is Chip Icon the same as Badge Icon?

/Thekholm

rhysb · October 18, 2022, 8:51pm

No, but you can have multiple Chips while you can have only one badge. You can change the size of a chip to match the badge sizing.

Thekholm · October 18, 2022, 9:24pm

Thanks for the help to get this card ready! This is good enough!

On to the next one

Best regards
Thekholm

ArenaCloser · October 18, 2022, 9:31pm

I think I did a pretty good job at recreating the ‘input time’ card.

The code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Alarm
    secondary: |-
      {% if is_state('automation.plug_2_uit', 'on') %}
        Actief • {{(state_attr('input_datetime.plug_2_s_avonds_uit','timestamp')) | timestamp_custom('%H:%M', false) }}
      {% else %}
        Inactief
      {% endif %}
    icon: mdi:alarm
    entity: input_datetime.plug_2_s_avonds_uit
    icon_color: |-
      {% if is_state('automation.plug_2_uit', 'on') %}
        deep-orange
      {% else %}
        disabled
      {% endif %}
    tap_action:
      action: call-service
      service: automation.toggle
      data: {}
      target:
        entity_id: automation.plug_2_uit
    hold_action:
      action: more-info
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:minus
        tap_action:
          action: call-service
          service: script.decrement_plug_2_time
      - type: template
        entity: input_datetime.plug_2_s_avonds_uit
        content: >-
          {{(state_attr('input_datetime.plug_2_s_avonds_uit','timestamp')) |
          timestamp_custom('%H:%M', false) }}
      - type: template
        icon: mdi:plus
        tap_action:
          action: call-service
          service: script.increment_plug_2_time
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
          --chip-border-radius: 12px;
          --chip-height: 42px;
          --chip-padding: 24px;
        }

Currently, clicking the icon/title will turn toggle a script that I use for disabling a switch at a certain time, but feel free to change that.

It took me much longer than expected to make the minus and plus buttons actually work. Apparently you cannot set the value of the input_datetime to its current value + something, so I had to build a script for that. Below script is for the minus button with a 15 minute timedelta. Just remove the minus sign in the code for the plus button.

alias: Decrement Plug 2 time
sequence:
  - service: input_datetime.set_datetime
    data:
      time: >-
        {{as_timestamp(as_datetime(state_attr('input_datetime.plug_2_s_avonds_uit','timestamp'))
        + timedelta(minutes=-15))| timestamp_custom('%H:%M', false) }}
    target:
      entity_id: input_datetime.plug_2_s_avonds_uit
mode: single
icon: mdi:clock-minus

My only problem is that I cannot get the buttons to be automatically padded/aligned with the card border. I used --chip-padding: 24px; now but there should be another way to make it really look like the minimalist card.

RASBR · October 18, 2022, 11:32pm

@rhysb I really appreciate and value your help. I would love to find out more on how to do stuff like the animation on my own.

Your example works just fine on a normal chips card, but I intend to have it on a conditional chip card where all my tries to amend the code failed.

Below my card’s code (without the animation), where should the animation be located?

type: custom:mushroom-chips-card
chips:
  - type: action
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: home
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:home
  - type: back
  - type: menu
  - type: action
    tap_action:
      action: navigate
      navigation_path: home
    icon: mdi:dots-vertical
    icon_color: blue
  - type: conditional
    conditions:
      - entity: switch.irrigation_pump_garden
        state: 'on'
    entity: switch.irrigation_pump_garden
    icon: mdi:sprinkler
    icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: conditional
    conditions:
      - entity: switch.pool_tank_valve
        state: 'on'
    chip:
      type: template
      entity: /local/my-icons/smart-water-tap-color.png
      icon: ''
      icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
      content_info: none
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      picture: /local/my-icons/smart-water-tap-color.png
  - type: conditional
    conditions:
      - entity: switch.pool_filter_pump
        state: 'on'
    chip:
      type: template
      entity: switch.pool_filter_pump
      icon: ''
      icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
      content_info: none
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      picture: /local/my-icons/pool filter-96.png

What I am trying to achieve is something like my post Lovelace: custom sidebar card - #558 by RASBR where the chips show for important systems when their state is ‘on’

and the big question is how do you determine the line: ‘mushroom-template-chip:nth-child(1)$: | ha-icon’?

Danny2100 · October 18, 2022, 11:39pm

Also any idea how to remove the shadow?

I tried this.

type: horizontal-stack
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 3px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
card_mod:
  style: |
    ha-card { 
      background: transparent;
      box-shadow: 0px 0px;
      ha-card-background: transparent;
    }

rhysb · October 19, 2022, 1:32am

Is this what you want?:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 3px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
card_mod:
  style: |
    ha-card { 
      background: transparent;
      --ha-card-box-shadow: none;
    }

rhysb · October 19, 2022, 3:50am

You can add it to your Chips like this:

type: custom:mushroom-chips-card
chips:
  - type: action
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: home
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:home
  - type: back
  - type: menu
  - type: action
    tap_action:
      action: navigate
      navigation_path: home
    icon: mdi:dots-vertical
    icon_color: blue
  - type: conditional
    conditions:
      - entity: switch.irrigation_pump_garden
        state: 'on'
    chip:
      type: template
      entity: switch.irrigation_pump_garden
      icon: mdi:sprinkler
      icon_color: light-blue
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
  - type: conditional
    conditions:
      - entity: switch.pool_tank_valve
        state: 'on'
    chip:
      type: template
      entity: switch.pool_tank_valve
      content_info: none
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      picture: /local/my-icons/smart-water-tap-color.png
  - type: conditional
    conditions:
      - entity: switch.pool_filter_pump
        state: 'on'
    chip:
      type: template
      entity: switch.pool_filter_pump
      content_info: none
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      picture: /local/my-icons/pool filter-96.png
card_mod:
  style:
    mushroom-conditional-chip:nth-child(5):
      mushroom-template-chip$: |
        ha-icon { 
          animation: sprinkle 2s linear infinite;
          transform-origin: 29% 88%; 
        }
        @keyframes sprinkle {
          0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
          1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
          6%, 21%, 36%, 51% { transform: rotate(2deg); }
        }

Or to the Chip like this:

type: custom:mushroom-chips-card
chips:
  - type: action
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: home
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:home
  - type: back
  - type: menu
  - type: action
    tap_action:
      action: navigate
      navigation_path: home
    icon: mdi:dots-vertical
    icon_color: blue
  - type: conditional
    conditions:
      - entity: switch.irrigation_pump_garden
        state: 'on'
    chip:
      type: template
      entity: switch.irrigation_pump_garden
      icon: mdi:sprinkler
      icon_color: light-blue
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      card_mod:
        style: |
            .content { 
              animation: sprinkle 2s linear infinite;
              transform-origin: 29% 88%;
            }
            @keyframes sprinkle {
              0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
              1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
              6%, 21%, 36%, 51% { transform: rotate(2deg); }
            }
  - type: conditional
    conditions:
      - entity: switch.pool_tank_valve
        state: 'on'
    chip:
      type: template
      entity: switch.pool_tank_valve
      content_info: none
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      picture: /local/my-icons/smart-water-tap-color.png
  - type: conditional
    conditions:
      - entity: switch.pool_filter_pump
        state: 'on'
    chip:
      type: template
      entity: switch.pool_filter_pump
      content_info: none
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      picture: /local/my-icons/pool filter-96.png

It is :nth-child(5) because it is the 5th Chip (child) of the Mushroom Chips (parent).

I guess it depends on how you learn, but a good resource is W3 Schools.

rhysb · October 19, 2022, 4:18am

You can align the Mushroom Card text like this:

Mushroom Card Text Alignment

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: Mushroom
    secondary: Primary Right
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-align: right;
          }
  - type: custom:mushroom-template-card
    primary: Mushroom
    secondary: Secondary Right
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            text-align: right;
          }
  - type: custom:mushroom-template-card
    primary: Mushroom
    secondary: Both Center
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style:
        mushroom-state-info$: |
          * {
            text-align: center;
          }

dundiffrunt · October 19, 2022, 6:38am

Would you mind sharing the code for this card?

sensei73 · October 19, 2022, 6:43am

rhysb:

  secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style: 
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                  font-size: 14px !important;
                  font-weight: bold !important;
                  color: var(--primary-text-color) !important;
                }
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
          }

Thanks for sharing! I love your design!! to @rhysb Do you think it is possible to animate the opening of the conditional cards to make it less brutal? Thanks in advance!

codedmind · October 19, 2022, 7:08am

Please share the code

Thekholm · October 19, 2022, 7:50am

Wow, you did a great job Thanks alot!
This is how I did it for my self.

The Code for Nest Cam Card.

You need - Stack in Card (Hacs)
You need - Layout Card (Hacs)
If you need to change the size of the images or border size, just change the bold text

type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(–masonry-view-card-margin, 0px 8px 14px)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Nest Cam
    secondary: Driveway
    icon: mdi:camera
    icon_color: blue
  - type: custom:layout-card
    layout_type: masonry
    layout:
      width: 106
      max_cols: 1
      height: auto
      padding: 0px
      card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
    cards:
      - show_state: false
        show_name: false
        camera_view: auto
        type: picture-entity
        entity: camera.uppfart
        camera_image: camera.uppfart
        theme: Mushroom
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
            }

Best regards
Thekholm

RASBR · October 19, 2022, 8:06am

Thank you very much. You’ve been a great help… both examples are informative and should be helpful down the road.
Rami

Danny2100 · October 19, 2022, 8:58am

That removed both borders, the mushroom cards and horizontal stack card column borders.

I would prefer just the mushroom horizontal column card borders be removed. The way the mushroom card borders were before was fine. Essentially removing the border of the stack-in-card only.

Danny2100 · October 19, 2022, 9:06am

Hm for some reason I am unable to get that to work. I tried doing it at the mushroom card level and at the stack in card level.

I tried this piece

card_mod:
  style:
    mushroom-state-info$: |
      * {
           text-align: center;
          }

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
card_mod:
  style: |
    ha-card { 
      background: transparent;
      --ha-card-box-shadow: none;
    }

Bpasop · October 19, 2022, 12:57pm

I want to recreate what you are doing. Can you show us also the code of you’re automation.plug_2_uit . I don’t how I could do this.

burg93 · October 19, 2022, 1:30pm

Wonder why the official mushroom card project has slowed down on development recently. I can’t remember the last time I saw an update in HACs and there’s some really good suggestions in here with animated icons and new cards that would be great to see included. Perhaps since the original creator joined nabu there’s no time, or … it’s being built in to replace the pants out the box theming!

janiv · October 19, 2022, 1:37pm

When I use this it doesn’t work.

secondary: >-
Currently :
‘{{states(’‘sensor.lr_hvac_setpoint’’) | round(1)}} C’

When I remove the “Currently :”, it all works.

How do I combine text and state?
Thanks