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

[marcok (Marco)]

Is there a special theme required? If I use your code (thx for it!), I neither have the background colored nor is the chips bar slightly shaded. Also, all chips icons show up with a border line. Entities were altered, of course. What am I doing wrong?

I’m an idiot. Missed installing card-mod.

[dsagdfgsFD]

Thanks Rhysb.
I endend up with this for extending the slider:
style: |
mushroom-state-item {
max-width: 100px !important;
}
I used px instead of fit content as otherwise the sliders would go to the end of the names and not be aligned in the left side.

Furthermore i have change the height of the slider and control buttons to have it more compact.
style: |
ha-card {
–control-height: 30px;
}
mushroom-state-item {
max-width: 100px !important;
}

[rhysb (Rhys)]

You can make Mushroom Chips vertical like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
card_mod:
  style: |
    .chip-container {
      flex-flow: column !important;
    }

[ArenaCloser]

I’m curious about the input datetime card as well.

The minimalist camera card can be made with a stack-in-card combining a template card (with the icon and camera name) with the usual camera card.

[rhysb (Rhys)]

Yes, you can add most of the animations to Chips like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    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
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon { 
        {{ 'animation: sprinkle 2s linear infinite;' if is_state('switch.irrigation_pump_garden', 'on') }}
        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); }
      }

What are you wanting further info on?

[ArenaCloser]

Sorry didn’t see your reply. I’ll try and building something out of this. I already tried for a custom media card player with volume buttons, but I couldn’t get the ‘template card’ buttons, with just their icons, to look like real mushoom/minimalist buttons due to their difference in corner roundness.

I got close though with chips as buttons, thanks to a post by our great contributor @rhysb:

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

I don’t use these myself, but you could do a Mushroom Input Select card something like this: Compact: [Input Select Compact] type: custom:stack-in-card mode: horizontal cards: - type: custom:mushroom-template-card primary: '{{ state_attr(entity, ''friendly_name'') }}' secondary: '{{ states(entity) }}' icon: mdi:audio-input-rca entity: input_select.amp_source icon_color: red - type: custom:mushroom-chips-card chips: - type: entity entity: input_select.…

[kippesik]

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:

GitHub - kippesikgithub/hass_cards: Room Cards

[Thekholm]

Is Chip Icon the same as Badge Icon?

/Thekholm

[rhysb (Rhys)]

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]

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

On to the next one

Best regards
Thekholm

[ArenaCloser]

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 (Rami)]

@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]

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 (Rhys)]

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 (Rhys)]

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.

CSS Tutorial

[rhysb (Rhys)]

You can align the Mushroom Card text like this:

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]

Would you mind sharing the code for this card?

[sensei73]

@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]

Please share the code

[Thekholm]

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

The Code for Nest Cam Card.

1. You need - Stack in Card (Hacs)
2. You need - Layout Card (Hacs)
3. 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