Mushroom Inspiration!

:mushroom: 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 Card/Vertical Stack in Card, Layout Card and Gap Card and maybe other card mods.

Links to awesomeness :innocent:

Mushroom by piitaya, Paul:
Mushroom Cards - Build a beautiful dashboard easily :mushroom: - Share your Projects! - Home Assistant Community (home-assistant.io)

rhybs - Sort only for his post and get ready!
Mushroom Cards - Build a beautiful dashboard easily :mushroom: - Share your Projects! - Home Assistant Community (home-assistant.io)

Emoji - Have fun with Emoji in Mushroom.
:orange_book: Emojipedia — :smiley: Home of Emoji Meanings 💁:ok_hand::bamboo::heart_eyes:

Many Thanks
Thekholm (Newbie of Mushroom and Home Assistant)

83 Likes

My Harmony Mushroom Card. I only have three activities, XBOX, Music and Nvidia Shield for media.

TV and Harmony remote Code:
square: false
columns: 2
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: media_player.samsung_tv_55
        primary: Samsung TV
        secondary: |
          {% if is_state('media_player.samsung_tv_55', 'on') %} På
          {%else%} 
          Av
          {% endif %}
        icon: mdi:television
        icon_color: |
          {% if is_state('media_player.samsung_tv_55', '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: media_player.samsung_tv_55
            icon: mdi:power
            icon_color: black
            content_info: none
            tap_action:
              action: more-info
        alignment: center
        card_mod:
          style: |
            ha-card {
              margin: -4px 0px 11px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-border-width: 0;
              --chip-border-radius: 12px;
              --chip-height: 43px;
              --chip-padding: 62px;
              --chip-spacing: 10px;
            }
  - 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
          - type: entity
            entity: switch.harmony_hub_bluesound
            icon_color: indigo
            content_info: none
            tap_action:
              action: toggle
          - type: entity
            entity: switch.harmony_hub_shield_tv
            icon_color: indigo
            icon: mdi:shield
            content_info: none
            tap_action:
              action: toggle
        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: 6px;
            }

/Thekholm

18 Likes

Great idea, subscribed. My initial contribution:

Light card (single light) with scene selection:
Screenshot 2022-11-05 110658

Code
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 90% 10%
    cards:
      - type: custom:mushroom-light-card
        entity: light.buro
        show_brightness_control: true
        show_color_control: true
        use_light_color: true
        card_mod:
          style: |
            ha-card {
               box-shadow: none;
            } 
      - type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: action
                icon_color: amber
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  data: {}
                  target:
                    entity_id: scene.buro_entspannen
                icon: mdi:lightbulb
                card_mod:
                  style: |
                    ha-card {
                      --chip-background: rgba(var(--rgb-amber), 0.2);
                    } 
          - type: custom:mushroom-chips-card
            chips:
              - type: action
                icon_color: orange
                icon: mdi:lightbulb
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  data: {}
                  target:
                    entity_id: scene.buro_sonnenuntergang
                card_mod:
                  style: |
                    ha-card {
                      --chip-background: rgba(var(--rgb-orange), 0.2);
                    } 
          - type: custom:mushroom-chips-card
            chips:
              - type: action
                icon_color: pink
                icon: mdi:lightbulb
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  data: {}
                  target:
                    entity_id: scene.buro_vapor_wave
                card_mod:
                  style: |
                    ha-card {
                      --chip-background: rgba(var(--rgb-pink), 0.2);
                    }

Light card (multiple lights, collapsable) with scene selection:
Screenshot 2022-11-05 110719

Code
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 90% 10%
        cards:
          - type: custom:fold-entity-row
            open: false
            head:
              type: custom:mushroom-light-card
              entity: light.schlafzimmer
              icon: mdi:bed
              style: |
                ha-card {
                   box-shadow: none;
                }
            group_config:
              show_brightness_control: true
              show_color_temp_control: true
              show_color_control: true
              use_light_color: true
              hide_state: true
              collapsible_controls: true
            entities:
              - type: custom:mushroom-light-card
                entity: light.sz_strip
                name: Schrank
                icon: phu:light-strip
              - type: custom:mushroom-light-card
                entity: light.sz_decke
                name: Decke
                icon: mdi:ceiling-light
          - type: vertical-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: action
                    icon_color: orange
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      data: {}
                      target:
                        entity_id: scene.buro_entspannen
                    icon: mdi:lightbulb
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: rgba(var(--rgb-orange), 0.2);
                        } 
              - type: custom:mushroom-chips-card
                chips:
                  - type: action
                    icon_color: white
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      data: {}
                      target:
                        entity_id: scene.buro_sonnenuntergang
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: rgba(var(--rgb-white), 0.2);
                        } 

14 Likes

My Room Card is really simple looking with little information (I want it simple). But I have a slider on it to turn on/off some products (fans, coffee machine, media etc).

Home Slider Code:
square: false
columns: 2
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:swipe-card
        parameters:
          spaceBetween: 8
        cards:
          - type: custom:mushroom-template-card
            primary: Vardagsrum
            secondary: >-
              {{ states('sensor.hue_motion_sensor_1_temperature') | round(0) }}
              °C
            icon: mdi:sofa
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
            layout: horizontal
            entity: light.vardagsrum
            tap_action:
              action: navigate
              navigation_path: vardagsrum-page
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
          - type: custom:vertical-stack-in-card
            horizontal: true
            cards:
              - type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                layout: vertical
                icon: |-
                  {% if is_state(config.entity, "playing") %}
                    mdi:speaker
                  {% else %}
                    mdi:speaker
                  {% endif%}
                entity: media_player.bluesound_vardagsrum
                icon_color: |-
                  {% if is_state(config.entity, "playing") %}
                    indigo
                  {% else %}
                    grey
                  {% endif%}
                tap_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state(config.entity,'playing') %}
                          background: rgba(var(--rgb-light-green),0.2);
                      {% else %}
                          background: rgba(var(--rgb-disabled),0.2);
                      {% endif %}
                    }
              - type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                layout: vertical
                icon: |-
                  {% if is_state(config.entity, "on") %}
                    mdi:power-socket-de
                  {% else %}
                    mdi:power-socket-de
                  {% endif%}
                entity: switch.vardagsrumsfonster_switch
                icon_color: |-
                  {% if is_state(config.entity, "on") %}
                    green
                  {% else %}
                    grey
                  {% endif%}
                tap_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state(config.entity,'on') %}
                          background: rgba(var(--rgb-green),0.1);
                      {% else %}
                          background: rgba(var(--rgb-disabled),0.1);
                      {% endif %}
                    }
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:swipe-card
        parameters:
          spaceBetween: 8
        cards:
          - type: custom:mushroom-template-card
            primary: TV Rum
            secondary: '{{ states(''sensor.tv_wave_temperature'') | round(0) }} °C'
            icon: mdi:television
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
            layout: horizontal
            entity: light.tv_rum
            tap_action:
              action: navigate
              navigation_path: tvrum-page
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
          - type: custom:vertical-stack-in-card
            horizontal: true
            cards:
              - type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                layout: vertical
                icon: |-
                  {% if is_state(config.entity, "playing") %}
                    mdi:speaker
                  {% else %}
                    mdi:speaker
                  {% endif%}
                entity: media_player.bluesound_biorum
                icon_color: |-
                  {% if is_state(config.entity, "playing") %}
                    indigo
                  {% else %}
                    grey
                  {% endif%}
                tap_action:
                  action: more-info
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state(config.entity,'playing') %}
                          background: rgba(var(--rgb-indigo),0.2);
                      {% else %}
                          background: rgba(var(--rgb-disabled),0.2);
                      {% endif %}
                    }
              - type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                layout: vertical
                icon: |-
                  {% if is_state(config.entity, "on") %}
                    mdi:remote
                  {% else %}
                    mdi:remote
                  {% endif%}
                entity: remote.harmony_hub
                icon_color: |-
                  {% if is_state(config.entity, "on") %}
                    green
                  {% else %}
                    grey
                  {% endif%}
                tap_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state(config.entity,'on') %}
                          background: rgba(var(--rgb-green),0.1);
                      {% else %}
                          background: rgba(var(--rgb-disabled),0.1);
                      {% endif %}
                    }
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }

/Thekholm

12 Likes

My Intro Card. Again with little information and simple, but the text on top is highlighted when somethings happens, I can press it to get more information if needed! For me they are Motion Sensors, Contact Sensors and Media.

Intro Card Code:
type: custom:vertical-stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      margin: 4px 0px 0px 0px;
    cards:
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: template
            entity: group.sensor
            content: Rörelse
            tap_action:
              action: more-info
            card_mod: null
            style: |-
              ha-card {
                top: 0px;
                --chip-background: none;
                {% if is_state(config.entity,'on') %}
                --text-color: rgb(var(--rgb-black));;
                {% else %}
                --text-color: rgb(var(--rgb-disabled));
                {% endif %}
                --chip-border-width: 0;
                --chip-padding: 24px;
              }
          - type: template
            entity: group.binary_sensor
            content: 'Kontaktsensorer '
            tap_action:
              action: more-info
            card_mod: null
            style: |-
              ha-card {
                top: 0px;
                --chip-background: none;
                {% if is_state(config.entity,'on') %}
                --text-color: rgb(var(--rgb-black));;
                {% else %}
                --text-color: rgb(var(--rgb-disabled));
                {% endif %}
                --chip-border-width: 0;
              }
          - type: template
            entity: group.media_player
            content: 'Media '
            tap_action:
              action: more-info
            card_mod: null
            style: |-
              ha-card {
                top: 0px;
                --chip-background: none;
                {% if is_state(config.entity,'on') %}
                --text-color: rgb(var(--rgb-black));;
                {% else %}
                --text-color: rgb(var(--rgb-disabled));
                {% endif %}
                --chip-border-width: 0;
                --chip-padding: 24px;
              }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      margin: '-15px 0px 0px 0px;'
    cards:
      - type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           Godkväll!
          {% elif (time >= 12) %}
           Godafton!
          {% elif (time >= 5) %}
           God Morgon!
          {% else %}
           Hej!
          {% endif %}
        subtitle: ''
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          margin: '-20px 0px -10px 0px;'
        cards:
          - type: custom:simple-weather-card
            entity: weather.smhi_tullinge
            name: Tullinge
            card_mod: null
            style: |
              ha-card {
                box-shadow: none;
                background: none;
                --ha-card-border-width: 0;
              }

/Thekholm

12 Likes

My Graph Card. I use this card with my Airthings sensor (it has six sensors inside of it). So I have three rows of this with different colors.

Graph Card Code:
type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.tv_wave_temperature
        primary: Temperature
        secondary: |
          {{ states('sensor.tv_wave_temperature') | round(0) }}°C
        icon: mdi:thermometer
        icon_color: green
        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:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.tv_wave_temperature
                name: Temperature
                color: '#00bb33'
            hours_to_show: 24
            line_width: 3
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  --ha-card-border-width: 0;
                }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.tv_wave_humidity
        primary: Humidity
        secondary: |
          {{ states('sensor.tv_wave_humidity') | round(0) }}%
        icon: mdi:water-percent
        icon_color: blue
        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:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.tv_wave_humidity
                name: Humidity
                color: '#2196f3'
            hours_to_show: 24
            line_width: 3
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  --ha-card-border-width: 0;
                }

/Thekholm

46 Likes

Door contact sensor with state icon and badge and collapsable chart (apex-chart-card):
Screenshot 2022-11-05 125347

Summary
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Wohnungstür
    secondary: '{{ ''Geöffnet'' if is_state(entity,''on'') else ''Geschlossen'' }}'
    icon: '{{ ''mdi:door-open'' if is_state(entity,''on'') else ''mdi:door-closed'' }}'
    entity: binary_sensor.wohnungstur
    icon_color: '{{ ''red'' if is_state(entity,''on'') else ''green'' }}'
    badge_icon: >-
      {{ 'mdi:cellphone-message' if is_state('automation.notification_wohnungstur_geoffnet','on') else       'mdi:cellphone-message-off' }}
    badge_color: >-
      {{ 'blue' if is_state('automation.notification_wohnungstur_geoffnet','on') else 'grey' }}
    tap_action:
      action: more-info
    hold_action:
      action: call-service
      service: automation.toggle
      data: {}
      target:
        entity_id: automation.notification_wohnungstur_geoffnet
    double_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
        --chip-padding: 0 0.2em
      }
    alignment: right
    chips:
      - type: template
        icon: |-
          {% if is_state(entity, 'off') %}
            mdi:chevron-down 
          {% elif is_state(entity, 'on') %}   
            mdi:chevron-up    
          {% endif %}
        tap_action:
          action: toggle
        entity: input_boolean.dropdown
        icon_color: disabled
        style: |
          ha-card {
            --chip-icon-size: 1em
          }
  - type: conditional
    conditions:
      - entity: input_boolean.dropdown
        state: 'on'
    card:
      type: custom:apexcharts-card
      header:
        show: false
      graph_span: 24h
      update_interval: 1min
      apex_config:
        yaxis:
          show: false
        chart:
          height: 100
        grid:
          show: false
      series:
        - entity: binary_sensor.wohnungstuer
          transform: 'return x === ''off'' ? 1 : 0;'
          type: column
          stroke_width: 2

5 Likes

My Light Card. I use this card inside my room cards. This is for all my lights in that room, this example is from my bedroom.

First picture is when it’s off.

The second picture is when turned on.

Third picture is when it’s expanded.

Light Card Code:
type: custom:vertical-stack-in-card
cards:
  - type: picture-entity
    image: >-
      https://img.freepik.com/free-photo/pillow-bed_1203-9518.jpg?w=1800&t=st=1666202344~exp=1666202944~hmac=7531e58884b24b8d2b847a8d0b04e59005362e7fdad1fabbc3c7678247086a4a
    entity: light.sovrum
    show_state: false
    show_name: false
    camera_view: auto
    aspect_ratio: '3'
    tap_action:
      action: toggle
    theme: Mushroom
  - 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: light.sovrum
        primary: Belysning
        secondary: >
          {% set room = expand(area_entities('sovrum')) |selectattr('domain',
          'eq',

          'light')|rejectattr('attributes.is_hue_group', 'true') |list %}{% set
          on =

          room |selectattr('state', 'eq', 'on')|list |count %}{% set all = room

          |count %}{% if on |int(0) > 0 %}{{ on }}/{{ all }}{% else %} Släckt {%

          endif %} {% if is_state('light.sovrum', 'on') %} Lampor är på

          {%else%} 

          {% endif %}
        icon: mdi:lightbulb-group
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
        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_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: custom:mushroom-template-card
          entity: light.taklampa_sovrum
          primary: Taklampa
          secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
          icon: mdi:ceiling-light
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-template-card
          entity: light.ledlist_2
          primary: Ledlist
          secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
          icon: hue:gradient-lightstrip
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-template-card
          entity: light.midesklamp1s_b9af
          primary: Skrivbordslampa
          secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
          icon: hue:desk-lamp
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-template-card
          entity: light.fonsterlampa
          primary: Fönsterlampa
          secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
          icon: hue:floor-shade
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-template-card
          entity: light.sanglampa_1
          primary: Sänglampa 1
          secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
          icon: hue:wall-runner
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-template-card
          entity: light.sanglampa_2
          primary: Sänglampa 2
          secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
          icon: hue:wall-runner
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
      card_mod: null
      style: |
        ha-card {
          --ha-card-border-width: 0;
        }

/Thekholm

29 Likes

Here is my person card with phone information:
image

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-person-card
    entity: person.ramon_bell
    use_entity_picture: true
    hide_name: true
    layout: vertical
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.pixel_6_is_charging
        content_info: none
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
        icon_color: |-
          {% set state=states('binary_sensor.pixel_6_is_charging') %}
          {% if state=='on' %}
          green
          {% elif state=='off' %}
          yellow
          {% else %}
          red
          {% endif %}
      - type: entity
        entity: binary_sensor.pixel_6_bluetooth_state
        content_info: none
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
        icon_color: |-
          {% set state=states('binary_sensor.pixel_6_bluetooth_state') %}
          {% if state=='on' %}
          green
          {% elif state=='off' %}
          red
          {% endif %}
      - type: entity
        entity: sensor.pixel_6_battery_level
        content_info: none
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
      - type: entity
        entity: sensor.pixel_6_ringer_mode
        content_info: none
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
    alignment: center
12 Likes

A other person card, created for mobile view and a popup card with location.2022-11-05 20_10_30-Mushroom – Home Assistant and 2 more pages - Personal - Microsoft​ Edge

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
18 Likes

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

5 Likes

Maybe my Media Card :grinning: 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

18 Likes

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

16 Likes

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 :crazy_face:

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

14 Likes

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

32 Likes

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

18 Likes

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 :grinning: 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 :wink:

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

19 Likes

Please read the first post!

Best regards
Thekholm

1 Like

Conditional Chip card, if the lights are on, show how many lights are on and place them on the chip card. Powered by :slight_smile: 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;
      }

15 Likes

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;
    }
11 Likes