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

[LiQuid_cOOled]

I recreated your first 3 cards and changed the main card to a custom:stack-in-card

Try and let me know

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Pannello Automazioni
    title_tap_action:
      action: call-service
      service: input_boolean.toggle
      target:
        entity_id: input_boolean.menu_automazioni
    alignment: center
    card_mod:
      style: |
        ha-card {
          border: 2.5px outset blue !important;
          padding-right: 150px !important;
          padding-left: 150px !important;
          padding-bottom: 30px !important;
          padding-top: 30px !important;
          border-radius: 0px;
          background-color: #002f7a !important;
          animation: ping 2s infinite;
          }
          @keyframes ping {
              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
              70% {box-shadow: 0 0 0 10px transparent;}
              100% {box-shadow: 0 0 0 0 transparent;}
          }
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.menu_automazioni
        state: 'on'
    card:
      type: custom:stack-in-card
      keep:
        margin: false
        box_shadow: false
        background: false
      cards:
        - type: custom:mushroom-template-card
          entity: automation.notifica_connessione_internet
          icon: |
            {% if is_state(config.entity, 'on') %}
                       mdi:robot
                       {% else %}
                       mdi:robot-off
                       {% endif %}
          icon_color: |
            {% if is_state(config.entity, 'on') %}
                       green
                       {% else %}
                       red
                       {% endif %}
          primary: Notifica Connessione Internet Ripristinata
          secondary: |
            {{ states('automation.notifica_connessione_internet') }}
          layout: horizontal
        - type: custom:mushroom-template-card
          entity: automation.notifica_connessione_internet_caduta
          icon: |
            {% if is_state(config.entity, 'on') %}
                       mdi:robot
                       {% else %}
                       mdi:robot-off
                       {% endif %}
          icon_color: |
            {% if is_state(config.entity, 'on') %}
                       green
                       {% else %}
                       red
                       {% endif %}
          primary: Notifica Connessione Internet Caduta
          secondary: |
            {{ states('automation.notifica_connessione_internet_caduta') }}
          layout: horizontal
        - type: custom:mushroom-template-card
          entity: automation.ferie_apertura
          icon: |
            {% if is_state(config.entity, 'on') %}
                       mdi:robot
                       {% else %}
                       mdi:robot-off
                       {% endif %}
          icon_color: |
            {% if is_state(config.entity, 'on') %}
                       green
                       {% else %}
                       red
                       {% endif %}
          primary: Ferie Inizio Scena
          secondary: |
            {{ states('automation.ferie_apertura') }}
          layout: horizontal

It was successful for me.

I would also recommend

secondary: |
            {{ states('automation.notifica_connessione_internet') }}

or this if you want to capitalize the active state.

secondary: |
            {% if is_state(config.entity, 'on') %}
                      On
                       {% else %}
                       Off
                       {% endif %}

vs

secondary: '{{ states.automation.notifica_connessione_internet.state }}'

[Faecon (Jo)]

      - type: horizontal-stack
        cards:                
          - type: custom:mushroom-template-card
            primary: Vaatwasblokjes
            entity: counter.keuken_vaatwas_vaatwasblokjes
            icon_color: >
              {{ [200, 62, 77] if states("counter.keuken_vaatwas_vaatwasblokjes")| round(0) | int(0) <20 else [86,86,86] }}
            icon: mdi:counter
            fill_container: true
            layout: horizontal
            multiline_secondary: false
          - type: custom:mushroom-template-card
            primary: "{{ states('counter.keuken_vaatwas_vaatwasblokjes') | float(0) }} blokjes"
            icon: 
            entity: counter.keuken_vaatwas_vaatwasblokjes
            fill_container: true
            layout: horizontal
            multiline_secondary: false 
        alignment: end

      - type: horizontal-stack
        cards:                
          - type: custom:mushroom-template-card
            primary: Verbruik vaatwas
            icon: mdi:dishwasher
            entity: sensor.vaatwas_verbruik
            
            fill_container: true
            layout: horizontal
            multiline_secondary: false
          - type: custom:mushroom-template-card
            primary: "{{ states('sensor.keuken_vaatwas_verbruik') | float(0) }} kWh"
            icon: 
            entity: sensor.keuken_vaatwas_verbruik
            fill_container: true
            layout: horizontal
            multiline_secondary: false 
        alignment: end

The 2 columns are even. I want the first a little bigger so I can put a little more text
The second column I want aligned on the right, but I don’t manage it…

[LiQuid_cOOled]

I’d recommend using a grid card or type: custom:layout-card

You can control the column widths grid-template-columns: 80% 20% and margins

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 80% 20%
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: Vaatwasblokjes
        entity: counter.keuken_vaatwas_vaatwasblokjes
        icon_color: >
          {{ [200, 62, 77] if states("counter.keuken_vaatwas_vaatwasblokjes")|
          round(0) | int(0) <20 else [86,86,86] }}
        icon: mdi:counter
        fill_container: true
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: >-
          {{ states('counter.keuken_vaatwas_vaatwasblokjes') | float(0) }}
          blokjes
        icon: null
        entity: counter.keuken_vaatwas_vaatwasblokjes
        fill_container: true
        layout: horizontal
        multiline_secondary: false
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 80% 20%
      margin: 0px 0px 0px 0px
    cards:
          - type: custom:mushroom-template-card
            primary: Verbruik vaatwas
            icon: mdi:dishwasher
            entity: sensor.vaatwas_verbruik
            fill_container: true
            layout: horizontal
            multiline_secondary: false
          - type: custom:mushroom-template-card
            primary: '{{ states(''sensor.keuken_vaatwas_verbruik'') | float(0) }} kWh'
            icon: null
            entity: sensor.keuken_vaatwas_verbruik
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            

[Faecon (Jo)]

          - type: custom:mushroom-template-card
            primary: "{{ states('counter.keuken_vaatwas_vaatwasblokjes') | round(0) | float(0) }} blokjes"

the state is 100
why do I get 100.0 and not 100 ?

[LiQuid_cOOled]

@Faecon

'counter.keuken_vaatwas_vaatwasblokjes'

try this

primary: |
{{ states('counter.keuken_vaatwas_vaatwasblokjes') | round(0)  }} blokjes

or

primary:  "{{ states('counter.keuken_vaatwas_vaatwasblokjes') | round(0)  }} blokjes"

[chrs]

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: person.[YOUR_SENSOR_or_NAME]
    primary_info: state
    tap_action:
      action: more-info
    secondary_info: none
    name: [YOUR_SENSOR_or_NAME]
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
          margin-top: 0px;
          background: transparent;
          height: 13px;
          width: 100px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: -20px;
          --card-primary-font-size: 12px;
          --card-secondary-font-size: 10px;
          z-index: 950;
        }
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.[YOUR_SENSOR_or_NAME]_battery_level
        color: teal
        max: 100
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -135
          endAngle: 135
          hollow:
            size: 80%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            strokeWidth: 70%
            margin: 0
      fill:
        type: gradient
        gradient:
          shade: light
          type: horizontal
          shadeIntensity: 1
          gradientToColors:
            - mediumseagreen
          inverseColors: false
          opacityFrom: 1
          opacityTo: 1
          stops:
            - 0
            - 100
      legend:
        show: false
      chart:
        height: 140
      stroke:
        dashArray: 10
    card_mod:
      style: |
        ha-card {
          margin-top: 0px;
          background: transparent;
          height: 140px; /* Adjust if necessary to fit the chart */
          width: 100%;
          z-index: 1000; /* Ensure this is lower than the button card's z-index */
        }
  - show_name: true
    show_icon: true
    type: custom:button-card
    entity: sensor.[YOUR_SENSOR_or_NAME]_address
    name: ' '
    entity_picture: /local/images/[YOUR_SENSOR_or_NAME].jpg
    show_entity_picture: true
    show_state: true
    styles:
      card:
        - width: 180px
        - height: 100px
        - background: transparent
      name:
        - color: orange
      state:
        - color: darkorange
        - font-size: 12px
        - font-weight: bold
    card_mod:
      style: |
        ha-card {
          margin-top: -125px;
          margin-left: 51%;
          width: 180px;
          height: 180px;
          transform: translateX(-50%);
          z-index: 1001;
          position: relative; /* Ensure the position is set for z-index to work */
          overflow: hidden; /* This hides the parts of the image that overflow the container */
        } 
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%; /* Set height to 100% to match the card size */
            object-fit: cover; /* This will cover the area, effectively "zooming in" on the image */
            object-position: center; /* Adjust the position of the image if needed */
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:baseball
        icon_color: red
        show_state: true
        card_mod:
          style: |
            ha-card {
              margin-top: -100px;
              margin-left: 53px;
              background: none!important;
              border: 0px !important;
              {% if not is_state('sensor.[YOUR_SENSOR_or_NAME]_battery_state', 'Charging') %}
                display: none !important;
              {% endif %}
            }
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            animation: pulse 2s linear infinite;
            opacity: 1;
          }
          @keyframes pulse {
            0% {transform:scale(5);color: #228B22; left:0px; top:0px;}
            70% {transform:scale(5.8);color: rgba(var(--rgb-teal), 0.7); left:0px; top:0px;}
            100% {transform:scale(5);color: #228B22; left:0px; top:0px;}
  - type: custom:mushroom-entity-card
    entity: sensor.[YOUR_SENSOR_or_NAME]_battery_state
    primary_info: state
    secondary_info: none
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
          margin-top: -25px;
          background: transparent;
          height: 13px;
          width: 100%;
          margin-left: auto;
          margin-right: auto;
          padding-right: 0px !important;
          padding-left: 0px!important;
          padding-bottom: 0px !important;
          padding-top: 0px !important;
          --card-primary-font-size: 12px;
          --card-secondary-font-size: 10px;
          z-index: 950;
          border-radius: 15px !important;
          {% if not is_state('sensor.[YOUR_SENSOR_or_NAME]_battery_state', 'Not Charging') %}
            --primary-text-color: MediumSeaGreen; !important;
            animation: ping 3s infinite;
            width: 100px;
            align-items: center;
          {% endif %}
        }
        @keyframes ping {
          0% {box-shadow: 0 0 0 2px rgba(var(--rgb-darkgreen), 0.7);}
          50% {box-shadow: 0 0 0 2.5px rgba(var(--rgb-teal), 0.7);}
          100% {box-shadow: 0 0 0 2px rgba(var(--rgb-darkgreen), 0.7);}
          }
        .info {
          position: relative;
          top: -5px; /* Adjust the top position to bring the text closer to the pulsing ring */
        }
card_mod:
  style: |
    ha-card {
      background: transparent;
      }

Template to fetch address

# you put this in your configuration.yaml
template:
  - sensor:
      - name: "[PICK_YOUR_CHOICE]"
        unique_id: "[PICK_YOUR_CHOICE]"
        state: >
          {% set full_address = state_attr('sensor.[YOUR_SENSOR]_geocoded_location', 'Name') %}
          {% if full_address %}
            {% set address_parts = full_address.split(' ') %}
            {% set street_address = address_parts[:2] %}
            {{ street_address | join(' ') }}
          {% else %}
            'Unknown'
          {% endif %}

[Diegocampy]

really interesting, but my skills are so limited that I still don’t understand things and I can’t finish my cards. For the light having to choose between only two icons and two colors all solved. But now for the temperature on the card next to it, I wanted 3 icons and three colors, so I don’t understand how to write it. I tried but I don’t think entering the second option is correct.

I posted all the code because there are actually two problems:

1. just explained that I would like three icons and three colors, but something isn’t working
2. the second thermometer icon next to it does not show me the temperature

Thank you very much if you can give me some help this time too

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.porta_ingresso_contact
    icon: >-
      {% if is_state('binary_sensor.porta_ingresso_contact', 'off') %}
      mdi:door-closed {%- else -%} mdi:door-open {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.porta_ingresso_contact', 'off') %} grey {%
      else %} red {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensore_ingresso_device_temperature
    content: '{{stastes.sensore_ingresso_device_temperature.state}} °C'
    icon: >-
      {% if states('sensor.sensore_ingresso_device_temperature') | int <= 17 %}
      mdi:thermometer-minus   {% else %}   mdi:thermometer-check  {% endif %}
    icon_color: |-
      {% if states('sensor.sensore_ingresso_device_temperature') | int <= 17 %}
      blue | int >= 20 %} red {% else %} green {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensore_ingresso_illuminance_lux
    content: '{{states.sensor.sensore_ingresso_illuminance_lux.state}} lux'
    icon: >-
      {% if states('sensor.sensore_ingresso_illuminance_lux') | int >= 20 %}
      mdi:brightness-5   {% else %}   mdi:brightness-4  {% endif %}
    icon_color: |-
      {% if states('sensor.sensore_ingresso_illuminance_lux') | int >= 20 %}
      yellow {% else %} grey {% endif %}
    tap_action:
      action: more-info
    use_entity_picture: true
  - type: template
    entity: binary_sensor.sensore_ingresso_occupancy
    icon: >-
      {% if is_state('binary_sensor.sensore_ingresso_occupancy', 'on') %}
      mdi:motion-sensor {%- else -%} mdi:motion-sensor-off {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.porta_ingresso_contact', 'on') %} grey {%
      else %} yellow {% endif %}
    tap_action:
      action: more-info

[dimitri.landerloos]

Template outputs (so entity states) are strings until you tell it otherwise.

So use | int, | float, | round(0) whatever you want, that tells jinja that its a number. Otherwise default assumption is that it is a string.

[Lewis_gio (Lewis)]

I have a problem with conditional chips, both with light.tavolo on and off it always shows me the icon. I emptied the cash, uninstalled and installed mushroom but nothing seems to be the conditions are not working

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - condition: state
            entity: light.tavolo
            state: 'on'
        chip:
          type: template
          icon: mdi:car-lifted-pickup
          icon_color: red
          card_mod:
            style: |
              ha-card 
                {
                  --chip-font-size: 0.25em;
                  --chip-height: 45px
                }      

[Diegocampy]

@Diegocampy

I posted all the code because there are actually two problems:

1. just explained that I would like three icons and three colors, but something isn’t working
2. the second thermometer icon next to it does not show me the temperature

I solved a problem 2 myself, and I’m writing it in case it might be useful to someone:
I got the logic wrong write correct “states” and “sensor”
wrong: ‘{{stastes.sensore_ingresso_device_temperature.state}} °C’
correct:‘{{states.sensor.sensore_ingresso_device_temperature.state}} °C’

the first problem remains and I have to figure out how to solve it: How can I set three different colors?

[FedeL16 (Federico)]

thank you it works for me now. I’ve found another solution with local conditional card too, but your its better.

states(‘sensor.temperature’) does not work and now I don’t understand to avoid states.sensor_xxxx.state

[raub21]

I am facing a challenge showing the icon of an entity that depends on its state. When it is closed, it works on a pc but not on the iPhone HA app. It does not work when it is open on both PC and iPhone. Here are the screen shots:

iPhone:

Here is the code:

type: custom:mushroom-entity-card
entity: binary_sensor.garagedoor_sensor_iaszone
tap_action:
  action: more-info
name: Garage
card_mod:
  style: |
    ha-card {
      padding: 0px !important;
      padding-bottom: 3px !important;
      text-align: left !important;
      ha-state-icon {
         {% if is_state(config.entity, 'off') %}
           --card-mod-icon: mdi:garage-lock;
           --card-mod-icon-color: green;
          
         {% else %}
           --card-mod-icon: mdi:garage-open;
           --card-mod-icon-color: red;
        {% endif %};
        }
    border: 0px outset #02CCFF;
    font-style: italic;
    font-variant: small-caps;
    box-shadow: none !important;
    --secondary-text-color: orange;
    }

[cob94440 (chris)]

Hello. Thanks for sharing.
But my picture and localized address are not centered

[chintito4ever]

If I put them in grid then it works fine for me

square: false
type: grid
cards:

[Zenia (Yevgeniy)]

Thank you for sharing your person card, great job. Mine, for some reason not showing for some reason address where I am located right now. Here is a template, which I put in my templates file:

#####Full Address for Person Card#######


    - name: My Address
      unique_id: 692d4852-2d29-4c24-80bc-0d35ecc245ef
      state: >
        {% set full_address = state_attr('sensor.sm_s918u_geocoded_location', 'Name') %}
        {% if full_address %}
          {% set address_parts = full_address.split(' ') %}
          {% set street_address = address_parts[:2] %}
          {{ street_address | join(' ') }}
        {% else %}
          'Unknown'
        {% endif %}

Thank you

[chrs]

Look for ”margin-left:” in the code and change after your needs.

[chrs]

Do you see your adress if you look at the sensor state of ’sensor.sm_s918u_geocoded_location’?

Is it ”your street adress”, ”zip code city”?

[Zenia (Yevgeniy)]

Yes, I can see address on my phone geolocation sensor

[LiQuid_cOOled]

Can you post the exact format you are using?

I use it like this:

secondary: |
            {{ states('automation.living_room_motion') }}

[andreadannibale (Andrea)]

try to change the attribute to “name”… in my case the attributes are lower case