Mushroom Inspiration!

[Fabian_V]

A other person card, created for mobile view and a popup card with location.

Code

square: false
columns: 3
type: grid
cards:
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-person-card
        entity: person.fabian
        use_entity_picture: true
        hide_name: true
        layout: vertical
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Fabian
              content:
                type: custom:mod-card
                style: |
                  ha-card {
                     --padding-right: 15px;
                     --padding-left: 15px;
                     --padding-bottom: 15px;
                     --box-shadow: 0px 0px;
                     --ha-card-border-width: 0px;
                  }
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-entity-card
                      entity: sensor.places_fabian_locatie
                      primary_info: none
                      icon: mdi:map-marker
                      icon_color: yellow
                    - type: map
                      entities:
                        - entity: person.fabian
                      dark_mode: false
                      auto_fit: true
                      default_zoom: 16
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
                        {% if state=='on' %}
                        green
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: binary_sensor.sm_s21_fabian_is_charging
            icon: mdi:power-plug
            tap_action:
              action: more-info
          - type: template
            entity: sensor.sm_s21_fabian_battery_level
            icon: |2
                        {% set bl = states('sensor.sm_s21_fabian_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 %}
            icon_color: |2-
                        {% set bl = states('sensor.sm_s21_fabian_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 %} grey
                        {% endif %}
            tap_action:
              action: more-info
        alignment: center
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-person-card
        entity: person.naomi
        use_entity_picture: true
        hide_name: true
        layout: vertical
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Naomi
              content:
                type: custom:mod-card
                style: |
                  ha-card {
                     --padding-right: 15px;
                     --padding-left: 15px;
                     --padding-bottom: 15px;
                     --box-shadow: 0px 0px;
                     --ha-card-border-width: 0px;    
                  }
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-entity-card
                      entity: sensor.places_naomi_locatie
                      primary_info: none
                      icon: mdi:map-marker
                      icon_color: yellow
                    - type: map
                      entities:
                        - entity: person.naomi
                      dark_mode: false
                      auto_fit: true
                      default_zoom: 16
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('sensor.naomi_s20_batterij_l360') %}
                        {% if state=='True' %}
                        green
                        {% elif state=='False' %}
                        #6f6f6f
                       {% endif %}
            entity: sensor.naomi_s20_batterij_l360
            icon: mdi:power-plug
            tap_action:
              action: more-info
          - type: template
            entity: sensor.naomi_s20_batterij_percentage_l360
            icon: |2
                        {% set bl = states('sensor.naomi_s20_batterij_percentage_l360') | 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 %}
            icon_color: |2-
                        {% set bl = states('sensor.naomi_s20_batterij_percentage_l360') | 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 %} grey
                        {% endif %}
            tap_action:
              action: more-info
        alignment: center
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-person-card
        entity: person.pascalle
        use_entity_picture: true
        hide_name: true
        layout: vertical
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Pascalle
              content:
                type: custom:mod-card
                style: |
                  ha-card {
                     --padding-right: 15px;
                     --padding-left: 15px;
                     --padding-bottom: 15px;
                     --box-shadow: 0px 0px;
                     --ha-card-border-width: 0px;   
                  }
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-entity-card
                      entity: sensor.places_pascalle_locatie
                      primary_info: none
                      icon: mdi:map-marker
                      icon_color: yellow
                    - type: map
                      entities:
                        - entity: person.pascalle
                      dark_mode: false
                      auto_fit: true
                      default_zoom: 16
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('binary_sensor.sm_s20_pascalle_is_charging') %}
                        {% if state=='on' %}
                        green
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: binary_sensor.sm_s20_pascalle_is_charging
            icon: mdi:power-plug
            tap_action:
              action: more-info
          - type: template
            entity: sensor.sm_s20_pascalle_battery_level
            icon: |2
                        {% set bl = states('sensor.sm_s20_pascalle_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 %}
            icon_color: |2-
                        {% set bl = states('sensor.sm_s20_pascalle_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 %} grey
                        {% endif %}
            tap_action:
              action: more-info
        alignment: center

[Thekholm]

My Train Information Card. This little card shows me the current status of public transport. Simple card made with Markdown Card and sensor. When pressed it will take me to a website with more information and train departures.

Train Information Card:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:gap-card
        height: 2
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 33px
          margin: '-4px -4px -8px -4px;'
        cards:
          - type: custom:mushroom-template-card
            entity: ''
            primary: Trafikinformation
            secondary: Läs mer på sl.se
            icon: mdi:train
            icon_color: >
              {% if
              is_state('sensor.sl_train_status_sensor_sl_trafikinformation','Good')
              %} green

              {%else%} 

              red

              {% endif %}
            fill_container: false
            multiline_secondary: false
            tap_action:
              action: url
              url_path: >-
                https://sl.se/reseplanering/trafiklaget?view=Lines&category=Train
            card_mod:
              style: |
                ha-card {
                  background: none;
                  --ha-card-border-width: 0;
                }
          - type: custom:mushroom-template-card
            entity: input_boolean.mushroom_matrum_card
            icon: >-
              {{ 'mdi:chevron-up' if is_state(entity, 'on') else
              'mdi:chevron-down' }}
            icon_color: black
            hold_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  align-items: flex-end;
                  background: none;
                  --ha-card-border-width: 0;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }  
      - type: conditional
        conditions:
          - entity: input_boolean.mushroom_matrum_card
            state: 'on'
        card:
          type: custom:vertical-stack-in-card
          cards:
            - type: markdown
              content: >
                {{state_attr('sensor.sl_train_status_sensor_sl_trafikinformation','events')[0].Message}}
          card_mod: null
          style: |
            ha-card {
            --ha-card-border-width: 0;
            }

/Thekholm

[Thekholm]

Maybe my Media Card This card has three button to be used as fast access to radio stations, playlist, buttons or anything else.

This card is from rhysb, thanks! And are modified a little to match my set up!

This is two version of the same card.

First Media Card:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bluesound
    secondary: >-
      {% set state=states('media_player.bluesound_matrum') %} 

      {% if state=='playing' %} Spelar - {{state_attr
      ('media_player.bluesound_matrum', 'media_album_name')}}

      {% elif state=='paused' %} Av

      {% elif state=='idle' %} Spelar i grupp - {{state_attr
      ('media_player.bluesound_matrum', 'media_album_name')}}

      {% else %}

      {% endif %}
    icon: mdi:speaker
    entity: media_player.bluesound_matrum
    icon_color: indigo
    card_mod:
      style: |
        ha-card:after {
          content: '';
          border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
          margin: 12px 0px -12px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: media_player.bluesound_matrum
        tap_action:
          action: call-service
          service: media_player.select_source
          data:
            source: The Jazz Groove
          target:
            entity_id: media_player.bluesound_matrum
        icon: mdi:piano
        content_info: name
        name: Jazz
        card_mod: null
        style: |-
          ha-card {
                top: 4px;
                --chip-background: none;
              }
      - type: entity
        entity: media_player.bluesound_matrum
        tap_action:
          action: call-service
          service: media_player.select_source
          data:
            source: The Jazz Groove
          target:
            entity_id: media_player.bluesound_matrum
        icon: mdi:disc-player
        content_info: name
        name: Jazz
        card_mod: null
        style: |-
          ha-card {
                top: 4px;
                --chip-background: none;
              }
      - type: entity
        entity: media_player.bluesound_matrum
        tap_action:
          action: call-service
          service: media_player.select_source
          data:
            source: The Jazz Groove
          target:
            entity_id: media_player.bluesound_matrum
        icon: mdi:radio
        content_info: name
        name: Jazz
        card_mod: null
        style: |-
          ha-card {
                top: 4px;
                --chip-background: none;
              }
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-border-radius: 12px;
          --chip-height: 42px;
          --chip-padding: 18px;
        }

Second Media Card

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bluesound
    secondary: >-
      {% set state=states('media_player.bluesound_matrum') %} 

      {% if state=='playing' %} Spelar - {{state_attr
      ('media_player.bluesound_matrum', 'media_album_name')}}

      {% elif state=='paused' %} Av

      {% elif state=='idle' %} Spelar i grupp - {{state_attr
      ('media_player.bluesound_matrum', 'media_album_name')}}

      {% else %}

      {% endif %}
    icon: mdi:speaker
    entity: media_player.bluesound_matrum
    icon_color: indigo
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: media_player.bluesound_matrum
        tap_action:
          action: call-service
          service: media_player.select_source
          data:
            source: The Jazz Groove
          target:
            entity_id: media_player.bluesound_matrum
        icon: mdi:piano
        content_info: name
        name: Jazz
        card_mod: null
        style: |-
          ha-card {
                top: 2px;
              }
      - type: entity
        entity: media_player.bluesound_matrum
        tap_action:
          action: call-service
          service: media_player.select_source
          data:
            source: The Jazz Groove
          target:
            entity_id: media_player.bluesound_matrum
        icon: mdi:disc-player
        content_info: name
        name: Jazz
        card_mod: null
        style: |-
          ha-card {
                top: 2px;
              }
      - type: entity
        entity: media_player.bluesound_matrum
        tap_action:
          action: call-service
          service: media_player.select_source
          data:
            source: The Jazz Groove
          target:
            entity_id: media_player.bluesound_matrum
        icon: mdi:radio
        content_info: name
        name: Jazz
        card_mod: null
        style: |-
          ha-card {
                top: 2px;
              }
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-border-radius: 12px;
          --chip-height: 42px;
          --chip-padding: 23px;
          --chip-spacing: 12px;
        }

/Thekholm

[Thekholm]

My Unavailable Card. Similar to the Train Information Card above. But this one shows me if any of my devices are unavailable.

This one needs a sensor in the configuration file (remember to check your configuration file before restart).

My Sensor Code:

sensor:
  - platform: template
    sensors:
      unavailable_devices:
        friendly_name: "Unavailable Devices"
        value_template: >
          {% set domains = ['light', 'power', 'switch', 'binary_sensor', 'lock',
          'zha'] %}{% set filter = [''] %} {{ states | selectattr('domain', 'in',
          domains) | rejectattr('entity_id', 'in', filter) |
          selectattr('state','eq','unavailable') | map(attribute='name') | list |
          join(', ') }}

Something is wrong.

Something is wrong, expanded view.

Unavailable Card:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:gap-card
        height: 2
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 33px
          margin: '-4px -4px -8px -4px;'
        cards:
          - type: custom:mushroom-template-card
            entity: ''
            primary: Otillgängliga Enheter
            secondary: >
              {% if is_state('sensor.unavailable_devices','') %} Inget
              bortkopplat {%else%}  Enheter är bortkopplade {% endif %}
            icon: >
              {% if is_state('sensor.unavailable_devices','') %}
              mdi:check-circle {%else%}  mdi:alert-circle {% endif %}
            icon_color: >
              {% if is_state('sensor.unavailable_devices','') %} grey {%else%} 
              red {% endif %}
            fill_container: false
            multiline_secondary: false
            card_mod:
              style: |
                ha-card {
                  background: none;
                  --ha-card-border-width: 0;
                }
          - type: custom:mushroom-template-card
            entity: input_boolean.mushroom_unavailable_card
            icon: >-
              {{ 'mdi:chevron-up' if is_state(entity, 'on') else
              'mdi:chevron-down' }}
            icon_color: black
            hold_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  align-items: flex-end;
                  background: none;
                  --ha-card-border-width: 0;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }  
      - type: conditional
        conditions:
          - entity: input_boolean.mushroom_unavailable_card
            state: 'on'
        card:
          type: custom:vertical-stack-in-card
          cards:
            - type: markdown
              content: |
                {{states('sensor.unavailable_devices')}}
          card_mod: null
          style: |
            ha-card {
            --ha-card-border-width: 0;
            }

/Thekholm

[Thekholm]

Could soon be my Sensor Card in the kitchen, if I don’t find another solution! This card also have rhysb animated icons when detekted. The Icons are Philips Motion Sensor, Aqara Door Sensor and a Smarthings Water Sensor.

The Harmony Remote card I have already shown this in an earlier post, but this one also have the animated icons, I went crazy

If you look at the picture on the far right on the Nvidia Shield (shield icon), that one is off center, that because it was moving during screenshot, that one are tilting back and forth.

Sensor Card:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: binary_sensor.mushroom_senosorer_matrum
    primary: Sensorer
    secondary: |
      {% if is_state('binary_sensor.mushroom_senosorer_matrum', 'on') %} På
      {%else%} 
      Av
      {% endif %}
    icon: mdi:leak
    icon_color: |
      {% if is_state('binary_sensor.mushroom_senosorer_matrum', 'on') %} green
      {%else%} 
      grey
      {% endif %}
    tap_action:
      action: more-info
  - type: custom:layout-card
    layout_type: masonry
    layout:
      width: 106
      max_cols: 1
      height: auto
      padding: 0px
      card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
    cards: null
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.smartthings_vision_motion
        icon: hue:motion-sensor
        icon_color: green
        content_info: none
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
      - type: entity
        entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_d6b67507_on_off
        icon: phu:aqara-contact
        icon_color: green
        content_info: none
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
      - type: entity
        entity: binary_sensor.vattensensor_matrum_ias_zone
        icon: mdi:water
        icon_color: green
        content_info: none
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
    alignment: center
    card_mod:
      style:
        mushroom-entity-chip:nth-child(1)$: |
          ha-icon {
           {% if is_state('binary_sensor.smartthings_vision_motion', 'on') %}
             animation: alarm 1.8s ease infinite;
           {% endif %}
           }
           @keyframes alarm {
             0%, 80%, 100% { transform: translateY(0); }
             10% { transform: translateY(-2px) rotate(-27deg); }
             20% { transform: translateY(-2px) rotate(21deg); }
             30% { transform: translateY(-2px) rotate(-15deg); }
             40% { transform: translateY(-2px) rotate(9deg); }
             50% { transform: translateY(0); }
             60% { transform: translateY(-1.2px) }
             }
        mushroom-entity-chip:nth-child(2)$: |
          ha-icon {
           {% if is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_d6b67507_on_off', 'on') %}
             animation: alarm 1.8s ease infinite;
           {% endif %}
           }
           @keyframes alarm {
             0%, 80%, 100% { transform: translateY(0); }
             10% { transform: translateY(-2px) rotate(-27deg); }
             20% { transform: translateY(-2px) rotate(21deg); }
             30% { transform: translateY(-2px) rotate(-15deg); }
             40% { transform: translateY(-2px) rotate(9deg); }
             50% { transform: translateY(0); }
             60% { transform: translateY(-1.2px) }
             }
        mushroom-entity-chip:nth-child(3)$: |
          ha-icon {
            {% if is_state('binary_sensor.vattensensor_matrum_ias_zone', 'on') %}
            animation: boing 3s ease infinite;
            transform-origin: 50% 90%;
            {% endif %}
          }
          @keyframes boing {
            0% { transform: scale3d(1, 1, 1); }
            7% { transform: scale3d(1.25, 0.75, 1); }
            10% { transform: scale3d(0.75, 1.25, 1); }
            12% { transform: scale3d(1.15, 0.85, 1); }
            16% { transform: scale3d(0.95, 1.05, 1); }
            19% { transform: scale3d(1.05, 0.95, 1); }
            25% { transform: scale3d(1, 1, 1); }
          }
        style: |
          ha-card {
            margin: -2px 0px 12px;
            --chip-background: rgba(var(--rgb-disabled), 0.15);
            --ha-card-box-shadow: none;
            --chip-border-radius: 12px;
            --chip-height: 40px;
            --chip-padding: 12px;
            --chip-spacing: 6px;
          }

Harmony Remote Card:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: remote.harmony_hub
    primary: Harmony
    secondary: |
      {% if is_state('select.harmony_hub_activities', 'PowerOff') %}Av
      {%else%} 
       {{states('select.harmony_hub_activities')}}
      {% endif %}
    icon: mdi:remote
    icon_color: |
      {% if is_state('remote.harmony_hub', 'on') %} indigo
      {%else%} 
      grey
      {% endif %}
    tap_action:
      action: more-info
  - type: custom:layout-card
    layout_type: masonry
    layout:
      width: 106
      max_cols: 1
      height: auto
      padding: 0px
      card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
    cards: null
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: switch.harmony_hub_xbox
        icon_color: indigo
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
      - type: entity
        entity: switch.harmony_hub_bluesound
        icon_color: indigo
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
      - type: entity
        entity: switch.harmony_hub_shield_tv
        icon_color: indigo
        icon: mdi:shield
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
    alignment: center
    card_mod:
      style:
        mushroom-entity-chip:nth-child(1)$: |
          ha-icon {
            {% if is_state('switch.harmony_hub_xbox', 'on') %}
            animation: huh 4s ease infinite;
            transform-origin: 50% 60%;
            {% endif %}
          }
           @keyframes huh {
             0%, 10%, 75%, 100% { transform: rotate(0deg); }
             15% { transform: rotate(-25deg); }
             30%, 35% { transform: rotate(-40deg); }
             50% { transform: rotate(12deg); }
             65% { transform: rotate(-8deg); }
           }
        mushroom-entity-chip:nth-child(2)$: |
          ha-icon {
            {% if is_state('switch.harmony_hub_bluesound', 'on') %}
            animation: boing 3s ease infinite;
            transform-origin: 50% 90%;
            {% endif %}
           }
          @keyframes boing {
            0% { transform: scale3d(1, 1, 1); }
            7% { transform: scale3d(1.25, 0.75, 1); }
            10% { transform: scale3d(0.75, 1.25, 1); }
            12% { transform: scale3d(1.15, 0.85, 1); }
            16% { transform: scale3d(0.95, 1.05, 1); }
            19% { transform: scale3d(1.05, 0.95, 1); }
            25% { transform: scale3d(1, 1, 1); }
          }
        mushroom-entity-chip:nth-child(3)$: |
          ha-icon {
            {% if is_state('switch.harmony_hub_shield_tv', 'on') %}
            animation: ducky 2s ease-in-out infinite;
            transform-origin: 50% 75%;
            {% endif %}
          }
          @keyframes ducky {
          0%, 100% { transform: rotate(-25deg); }
          50% { transform: rotate(25deg); }
          }
        style: |
          ha-card {
            margin: -2px 0px 12px;
            --chip-background: rgba(var(--rgb-disabled), 0.15);
            --ha-card-box-shadow: none;
            --chip-border-radius: 12px;
            --chip-height: 40px;
            --chip-padding: 12px;
            --chip-spacing: 6px;
          }

/Thekholm

[mvanlijden (Maarten van Lijden)]

Let’s not forget to reference @rhysb his collected Mushroom Animation posts with all the many examples he created in the topics gathered in one (ok four) place!

Part 1: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3240 by rhysb
Part 2: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3256 by rhysb
Part 3: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3272 by rhysb
Part 4: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3348 by rhysb

[Tyfoon]

Working on my conversion to full mushroom. Starts to look beautiful but the time I’m spending on this…

Anyway, while re-thinking what I want on my main page (which is dynamic based on if I’m home or not) created below. As I wanted to use different types of graphs I had to use ApexCards (check it out).

Code:

Summary

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.solarday
        secondary: Now
        primary: |
          {{ states('sensor.benext_solar_electric_production_w') | round(0) }} W
        icon: mdi:sun-wireless
        icon_color: orange
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.solarday
        secondary: Daily
        primary: |
          {{ states('sensor.solarday') | round(2) }} KwH
        icon: mdi:sun-clock
        icon_color: orange
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.solar_net
        secondary: Grid
        primary: |
          {{ states('sensor.solar_net') | round(2) }} KwH
        name: Grid
        icon: mdi:solar-power
        icon_color: green
        tap_action:
          action: more-info
  - type: custom:apexcharts-card
    graph_span: 1d
    span:
      start: day
    apex_config:
      chart:
        height: 150px
        fontFamily: Raleway,sans-serif
      legend:
        show: false
      stroke:
        width: 2
      plotOptions:
        bar:
          columnWidth: 100%
      grid:
        show: true
        borderColor: '#00000030'
        strokeDashArray: 4
        position: back
    experimental:
      color_threshold: true
    header:
      show: false
      show_states: false
      colorize_states: true
    yaxis:
      - id: first
        decimals: 1
        apex_config:
          tickAmount: 2
      - id: second
        opposite: true
        decimals: 0
        apex_config:
          tickAmount: 2
    series:
      - entity: sensor.power_consumption
        name: Power
        yaxis_id: first
        show:
          legend_value: false
        type: column
        group_by:
          func: avg
          duration: 60min
        color_threshold:
          - value: 0
            color: '#228B22'
          - value: 0.1
            color: '#d35400'
          - value: 1.5
            color: '#c0392b'
      - entity: sensor.benext_solar_electric_production_w
        name: Solar
        yaxis_id: second
        type: area
        curve: smooth
        opacity: 0.2
        color: '#00bb33'
        extend_to: false
        show:
          legend_value: false
        group_by:
          func: avg
          duration: 60min

[Thekholm]

Trying a new card, Bottom Navigation Card: I wanted two try another look at my home screen, so I made a navigation card and wanted to see if that did my life happier I maybe never use it, but someone else might.

This is a simple card (beauty as it is) that can be used for anything. It’s not stuck at the bottom of the page. I have done cards above to make it at the buttom

Here it is.

In use.

Bottom Navigation Card:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: navigate
          navigation_path: /mushroom-beta/sensors-page
        icon: mdi:leak
        entity: ''
        card_mod: null
        style: |-
          ha-card {
            top: 14px;
            --chip-background: none;
           }
      - type: template
        tap_action:
          action: navigate
          navigation_path: /mushroom-beta/home-page
        icon: mdi:home
        entity: ''
        card_mod: null
        style: |-
          ha-card {
                top: 14px;
              }
      - type: template
        tap_action:
          action: navigate
          navigation_path: /mushroom-beta/devices-page
        icon: mdi:devices
        entity: ''
        card_mod: null
        style: |-
          ha-card {
           top: 14px;
            --chip-background: none;
           }
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-border-radius: 12px;
          --chip-height: 42px;
          --chip-padding: 23px;
          --chip-spacing: 42px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: Sensors
        tap_action:
          action: navigate
          navigation_path: /mushroom-beta/sensors-page
        card_mod: null
        style: |-
          ha-card {
                top: 0px;
                --chip-background: none;
              }
      - type: template
        content: Home
        tap_action:
          action: navigate
          navigation_path: /mushroom-beta/home-page
        card_mod: null
        style: |-
          ha-card {
                top: 0px;
                --chip-background: none;
              }
      - type: template
        content: Devices
        tap_action:
          action: navigate
          navigation_path: /mushroom-beta/devices-page
        card_mod: null
        style: |-
          ha-card {
                top: 0px;
                --chip-background: none;
              }
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin: 0px 0px 0px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-border-radius: 12px;
          --chip-height: 42px;
          --chip-padding: 23px;
          --chip-spacing: 23px;
        }

/Thekholm

[Thekholm]

Please read the first post!

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 …

Best regards
Thekholm

[WebPower (Karoly Papp)]

Conditional Chip card, if the lights are on, show how many lights are on and place them on the chip card. Powered by rhysb

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: group.office_all_lamps
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
      content: >-
        {{ expand(states.group.office_all_lamps, states.light.master_bedroom_l)
        | selectattr( 'state', 'eq', 'on') | list | count }}
      entity: group.office_all_lamps
      icon_color: amber
      tap_action:
        action: none
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        span {
          position: relative;
          right: 6px;
          top: -6px;
          width: 0px;
          font-size: 10px;
          margin-right: -5px;
        }
    mushroom-conditional-chip:nth-child(2):
      mushroom-template-chip$: |
        span {
          position: relative;
          right: 6px;
          top: -6px;
          width: 0px;
          font-size: 10px;
          margin-right: -5px;
        }
    .: |
      ha-card {
        height: 36px !important;
      }

[theandouz]

Adding this to the vertical stack will anchor it to the bottom of the screen

card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      bottom: 0;
    }

[Banditt]

Conditional Chip Card to show whether it is garbage or recycling today or tomorrow. Hidden other days.

You need the Garbage Collection integration in HACS: Garbage-Collection/README.md at master · bruxy70/Garbage-Collection · GitHub

When you create the helper, make sure to check “Verbose state” and in the code change sensor.garbage_recycling and sensor.trash_collection to your helper you create.

Code

type: conditional
conditions:
  - entity: sensor.garbage_recycling
    state: today
chip:
  type: template
  icon: mdi:recycle
  icon_color: green
  content: Today

type: conditional
conditions:
  - entity: sensor.garbage_recycling
    state: tomorrow
chip:
  type: template
  icon: mdi:recycle
  icon_color: green
  content: Tomorrow

type: conditional
conditions:
  - entity: sensor.trash_collection
    state: tomorrow
chip:
  type: template
  icon: mdi:trash-can
  icon_color: grey
  content: Tomorrow

type: conditional
conditions:
  - entity: sensor.trash_collection
    state: today
chip:
  type: template
  icon: mdi:trash-can
  icon_color: grey
  content: Today

[Tyfoon]

Wow! This is great. Did some searching and also found below. Sticky back arrow at the left top of the page. Great for mobile use.

type: custom:mushroom-chips-card
chips:
  - type: action
    icon: mdi:arrow-left
    tap_action:
      action: navigate
      navigation_path: home
alignment: justify
card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      top: var(--header-height);
    }
    ha-card {
      margin-left: 10px;
      margin-top: 10px;
      margin-right: 10px;
    }

[Thekholm]

My Input-time Card: This card is used with automations to start an alarm, light or anything that you want to control inside of Mushroom! This is very handy and a nice looking card.

This is the same card but with and without background on the buttons. This Card is done by ArenaCloser, so special thanks to him, THANKS! I just changed the the card to fit my needs.

This one is a little tricky to get right, look at the code and also read ArenaCloser input on the Mushroom topic.

ArenaCloser

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

Thanks for the help to get this card ready! This is good enough! On to the next one [Screenshot_20221018-232030_Home Assistant] Best regards Thekholm

What you need is the following;

1. DateTime Helper (time only).
2. One script for the plus button.

Plus Script:

service: input_datetime.set_datetime
data:
  time: >-
    {{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
    + timedelta(minutes=+15))| timestamp_custom('%H:%M', false) }}
target:
  entity_id: input_datetime.mushroom

3. One script for the minus button.

Minus Script:

service: input_datetime.set_datetime
data:
  time: >-
    {{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
    + timedelta(minutes=-15))| timestamp_custom('%H:%M', false) }}
target:
  entity_id: input_datetime.mushroom

4. One automation (to turn on/or do something).

Simple Automation:

alias: Mushroom - Datetime Auto
description: ""
trigger:
  - platform: time
    at: input_datetime.mushroom
condition: []
action:
  - service: light.turn_on
    data: {}
    target:
      entity_id: light.sovrum
mode: single

5. The code for the card (two cards in a grid)

DateTime Card:

square: false
columns: 2
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Väckning
        secondary: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           På
          {% else %}
            Av
          {% endif %}
        icon: mdi:alarm
        entity: ''
        icon_color: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           green
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: automation.toggle
          data: {}
          target:
            entity_id: automation.mushroom_datetime_auto
        hold_action:
          action: more-info
      - type: custom:layout-card
        layout_type: masonry
        layout:
          width: 221
          max_cols: 1
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:minus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_minus
          - type: template
            entity: input_datetime.mushroom
            content: >-
              {{(state_attr('input_datetime.mushroom','timestamp')) |
              timestamp_custom('%H:%M', false) }}
          - type: template
            icon: mdi:plus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_plus
        alignment: center
        card_mod:
          style: |
            ha-card {
              margin: -2px 0px 12px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-border-width: 0;
              --chip-border-radius: 12px;
              --chip-height: 40px;
              --chip-padding: 12px;
              --chip-spacing: 1px;
            }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Väckning
        secondary: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           På
          {% else %}
            Av
          {% endif %}
        icon: mdi:alarm
        entity: ''
        icon_color: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           green
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: automation.toggle
          data: {}
          target:
            entity_id: automation.mushroom_datetime_auto
        hold_action:
          action: more-info
        card_mod: null
        style: |
          ha-card:after {
          content: '';
          border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
          margin: 15px 0px -12px;
          }
      - type: custom:layout-card
        layout_type: masonry
        layout:
          width: 221
          max_cols: 1
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:minus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_minus
          - type: template
            entity: input_datetime.mushroom
            content: >-
              {{(state_attr('input_datetime.mushroom','timestamp')) |
              timestamp_custom('%H:%M', false) }}
          - type: template
            icon: mdi:plus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_plus
        alignment: center
        card_mod:
          style: |
            ha-card {
              margin: -1px 0px 5px;
              --chip-border-width: 0;
              --chip-border-radius: 12px;
              --chip-height: 42px;
              --chip-padding: 10px;
              --chip-spacing: 1px;
            }

[kroonen]

How do I get 3 lights in one row. somtinhing with vertical stack card and colums? Can you post the code of lights also

[WebPower (Karoly Papp)]

Hello,

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: entity
        entity: sensor.office_motion_sensor_temperature
        icon_color: green
      - type: conditional
        conditions:
          - entity: binary_sensor.office_right_window_sensor
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.office_right_window_sensor
          icon_color: red
          icon: mdi:window-open-variant
      - type: conditional
        conditions:
          - entity: binary_sensor.office_motion_sensor_motion
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.office_motion_sensor_motion
          icon_color: red
          content_info: none
      - type: conditional
        conditions:
          - entity: group.office_all_lamps
            state: 'on'
        chip:
          type: template
          icon: mdi:lightbulb
          content: >-
            {{ expand(states.group.office_all_lamps,) | selectattr( 'state',
            'eq', 'on') | list | count }}
          entity: group.office_all_lamps
          icon_color: amber
          tap_action:
            action: none
    alignment: start
  - square: false
    columns: 3
    type: grid
    title: Lights
    cards:
      - type: custom:mushroom-light-card
        entity: light.table_lamp_1
        use_light_color: true
        show_brightness_control: true
        name: Work
      - type: custom:mushroom-light-card
        entity: light.table_lamps_office
        use_light_color: true
        show_brightness_control: true
        icon: hue:table-shade
        name: Table
      - type: custom:mushroom-light-card
        entity: light.office_all_lamps
        show_brightness_control: true
        use_light_color: true
        icon: mdi:lightbulb-group-outline
        name: All Lamp

[alexandrechoske (Smart Chosk)]

@theandouz

  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      bottom: 0;

This is amazing.
Any way to identify actual page and highlight on navigation bar?

[ArenaCloser]

Just change the background of the respective icon for each individual page

[ArenaCloser]

This is my Apple-inspired overview for the current fuel prices.

It uses this integration in HACS (for The Netherlands): GitHub - metbril/home-assistant-brandstofprijzen: Home Assistant component for fuel prices from United Consumers

Code

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_euro95
        primary: Euro 95
        secondary: ''
        icon: mdi:currency-eur
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_euro95
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_super
        primary: Super
        secondary: ''
        icon: mdi:engine
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_super
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_diesel
        primary: Diesel
        secondary: ''
        icon: mdi:gas-station
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_diesel
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }

[mase]

i´ve added it, still it doesn´t stick to the bottom. is there a way to move it all the way down or do i have to so it with empty cards?`