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

has anyon done a water tank card?

You can use custom:stack-in-card to merge a mushroom template card with a media player card (where you hide everything but the volume bar).

1 Like

Is it possible to place custom:mushroom-number-card vertically, the whole slider/buttons?

Hi guys, when using custom stack in card to add some chips with additional detail into a primary card, is it possible to have the chips overlay the first card, rather than stack? id like to place chips into a card without disrupting the size, spacing etc of the primary card when its in a grid

image

Nice card :wink:

Could you explain how it works with that dropdown card?
Do I need to create a input boolean to achieve this?

Hi,
I’ve arrived a little late to this party. However I’m getting a real kick out of building a lovely mobile card.
I have two questions:

  1. How to build a chip card that counts the number of lights that are on?
  2. Is it possible to display the date?
    Thanks so much for your effort in presenting this to me. I’m not a programmer! :frowning:
    TIA
    Regards,
    John

Hi John,
Best way for both of your requests is to use the built in “template” version of the card/chip.

you can then use the homeassistant built in jinja templating within your card.

something like this:
image

Card Code

How it is added in visual editor:

and in raw Yaml code:

type: custom:mushroom-chips-card
chips:
  - type: template
    content: |-
      {% if expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Bedroom'))
        |map(attribute='entity_id')
        |list | count > 0 
      %}
        {{ expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Bedroom'))
        |map(attribute='entity_id')
        |list | count }}
      {% else %}

      {% endif %}
    icon: |-
      {% if expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Bedroom'))
        |map(attribute='entity_id')
        |list | count > 1
      %}
        mdi:lightbulb-multiple
      {% else %}
        mdi:lightbulb
      {% endif %}
    icon_color: |-
      {% if expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Bedroom'))
        |map(attribute='entity_id')
        |list | count > 0 
      %}
        amber
      {% else %}
        white
      {% endif %}

And then to display dates there is a great thread on how to convert dates into multiple different formats just how you would like it here.

But if you are only just starting let me give you a pointer. if you have a sensor that gives you a future date/time like this for example:


It will be a string when parsed initially, which we cant use to convert with. so you first need to convert it to a datetime. this is easy with this:

We can then subract the time that it is now, from the future time that the sensor gives like this:

We will want that in seconds so that we can convert that to days, hours, minutes, etc. whatever you desire. just easier when you have seconds already :slight_smile:

You can then convert that using the link i gave in various ways. the one i like to use is this:

{{((states('sensor.washing_machine_washer_completion_time') | as_datetime) - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) }}

This gives me hours and minutes which is just fine for my washing machine completion time :slight_smile:
image
if you then wanted to use that in a mushroom card, you would again use the template card or the template chip so that you can add the info like this:
image

Card Code

How its added in visual editor:

and just raw yaml code:

type: custom:mushroom-template-card
primary: Washing Machine
secondary: |-
  {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
    Finished 
  {% else %}
    Est. Completion {{((states('sensor.washing_machine_washer_completion_time') | as_datetime) - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) }}
  {% endif %}
icon: |-
  {% if states('sensor.washing_machine_washer_job_state') == 'drying' %}
    mdi:tumble-dryer
  {% else %}
    mdi:washing-machine
  {% endif %}
icon_color: |-
  {% if states('sensor.washing_machine_washer_job_state') == 'none' %} 
    #5bc779 
  {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
    #697fff
  {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
    #fc7b03
  {% endif %}
entity: sensor.washing_machine_washer_job_state
tap_action:
  action: more-info
hold_action:
  action: none
double_tap_action:
  action: none
multiline_secondary: false
8 Likes

Thanks Dimitri. That’ll keep me interested (quiet!) for a while :smiley:

Hello,

Trying to create a side bar, and i want to fix date / time font weight, remove those HA grey borders and move the icon in the opposite side.

this is my code.

Code
cards:
  - type: custom:mushroom-template-card
    primary: >-
      {{ as_timestamp(states('sensor.date'))|timestamp_custom('%A %d %B', true)
      }}
    secondary: ''
    icon: ''
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 18px;
          text-align: center;
          font-family: 'Open Sans', sans-serif;
  - type: custom:mushroom-template-card
    primary: '{{ states(''sensor.time'') }}'
    secondary: ''
    icon: ''
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 100px;
          text-align: center;
  - type: custom:mushroom-template-card
    primary: Test 1
    secondary: ''
    icon: mdi:home
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 18px;
          background-color: #002f7a !important;
          border-radius: 50px !important;
          margin-left: 100px;
          margin-right: -50px;
  - type: custom:mushroom-template-card
    primary: Test 1
    secondary: ''
    icon: ''
  - type: custom:mushroom-template-card
    primary: Test 1
    secondary: ''
    icon: ''
  - type: custom:mushroom-template-card
    primary: Test 1
    secondary: ''
    icon: ''
  - type: custom:mushroom-template-card
    primary: Test 1
    secondary: ''
    icon: ''```
            mushroom-state-item:
              $: |
                .container {
                  flex-direction: row-reverse !important;
                  margin-bottom: -40px;
                }

@PskNorz @andiukas. I would say that this likely works better for most people.

card_mod:
  style:
    mushroom-state-item$: |
      .container {
        flex-direction: row-reverse !important;
      }
    mushroom-state-info$: |
      .container {
        align-items: end !important;
        padding-right: 10px;
      }

So in your case like this:

  - type: custom:mushroom-template-card
    primary: Test 1
    secondary: ''
    icon: mdi:home
    card_mod:
      style: 
        mushroom-state-item$: |
          .container {
            flex-direction: row-reverse !important;
          }
        mushroom-state-info$: |
          .container {
            align-items: end !important;
            padding-right: 10px;
          }
        .: |
          ha-card {
            --card-primary-font-size: 18px;
            background-color: #002f7a !important;
            border-radius: 50px !important;
            margin-left: 100px;
            margin-right: -50px;
          }
4 Likes

Anyone have a idea? Or ist it not possible?

I would use a horizontal stack with 2 chips cards. The left one is aligned left and the other is aligned right. Or else you should try a spacer chip somewhere.

Thanks it worked!
image

Q1: How can i change the fonts weight / style, i will show how i did it and tell me if it is correct way.

"Photo | Code

image

- type: custom:mushroom-template-card
    primary: >-
      {{ as_timestamp(states('sensor.date'))|timestamp_custom('%A %d %B', true)
      }}
    secondary: ''
    icon: ''
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-weight: 100 !important;
          }
        .: |
          ha-card {
          --card-primary-font-size: 15px;
            text-align: center;      
             font-variant: small-caps;
          }

Q2: How can i make disappear all the borders?

1 Like

Hi There, I have created this little card that I have created, it’s static only at this moment. And please note im not a CSS wizard in any stretch of the imagination :smiley:

How can I better sort the icons so they dont do this?

type: custom:stack-in-card
mode: vertical
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: true
  border_radius: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Next Rubbish Collection
        secondary: This Friday
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            --card-primary-font-weight: 400;
            --card-secondary-font-weight: 400;!important;
            margin-left:10px;
          }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: ''
            secondary: ''
            icon: mdi:trash-can
            icon_color: red
            badge_icon: mdi:check-bold
            badge_color: green
            layout: vertical
            multiline_secondary: false
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                position:relative;
                left:15px;
                margin: 0 -10px 0 0;
              }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: ''
            icon: mdi:trash-can
            icon_color: green
            badge_icon: mdi:check-bold
            badge_color: green
            layout: vertical
            multiline_secondary: false
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                position:relative;
                left:5px;
                margin: 0 -10px 0 0;
              }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: ''
            icon: mdi:trash-can
            icon_color: grey
            badge_icon: mdi:close
            badge_color: grey
            layout: vertical
            multiline_secondary: false
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                position:relative;
                left:0px;
                margin: 0 -10px 0 -10px;
              }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: ''
            icon: mdi:bottle-wine
            icon_color: grey
            badge_icon: mdi:close
            badge_color: grey
            layout: vertical
            multiline_secondary: false
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                position:relative;
                margin: 0 10px 0 -10px;
              }
3 Likes

You could do it with chips instead? then you know the scaling will work across screen sizes.
image
This solution does require you to have material icons font installed which can be found here:

and @rhysb has explained how to install here:

Code
type: custom:stack-in-card
mode: vertical
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: true
  border_radius: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Next Rubbish Collection
        secondary: This Friday
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            --card-primary-font-weight: 400;
            --card-secondary-font-weight: 400;!important;
            margin-left:10px;
          }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: ''
            icon: mdi:trash-can
            icon_color: red
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-red), 0.2) !important;
                  border: none;
                  box-shadow: none;
                }
                ha-card:after {
                  content: "done";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-green));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            icon: mdi:trash-can
            icon_color: green
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-green), 0.2) !important;
                  border: none;
                  box-shadow: none;
                }
                ha-card:after {
                  content: "done";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-green));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            icon: mdi:trash-can
            icon_color: grey
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-grey), 0.2) !important;
                  border: none;
                  box-shadow: none;        
                }
                ha-card:after {
                  content: "close";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-grey));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            icon: mdi:bottle-wine
            icon_color: grey
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-grey), 0.2) !important;
                  border: none;
                  box-shadow: none;        
                }
                ha-card:after {
                  content: "close";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-grey));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 16px;
            }
3 Likes

font weight numerical values go from 100 - 900 from light to extra bold.

for the border, put this below every one of you cards in the stack. or if you already have an ha-card just add the border: none !important; to it. (untested)

card_mod:
  style: |
    ha-card {
      border: none !important;
    }
1 Like

This is a very good looking card!
To make even better for my purposes. Is it possible to also include a toggle for lights in the upper right corner of the lower card?
Something like this

1 Like

Hello everyone,

I have a room overview that uses color codes to signal whether something is turned on (orange) or if there’s a critical alarm, such as a water leak or similar issues > red

So far, I’ve been handling this with conditional variables, which works, but depending on the situation, it doesn’t look very appealing. I would like to have the rooms listed in a grid of two columns in the order I specify.

Currently, only two rooms are displayed in a single column. Is there a way to list all the rooms one after another and then display them in two columns?

I understand that if only one room is critical, only one room will be displayed. However, when there are two or more critical rooms, I’d like the display to look “nicer.”

like so:

and not so:

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
        subtitle: 'Rooms: '
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Room 1
            secondary: ''
            tap_action:
              action: navigate
              navigation_path: /lovelace/r_01
            icon: mdi:table-furniture
            icon_color: >-

              {% if is_state('group.room_01critical', 'on') %}
                red
              {% elif is_state('group.room_01notify', 'on') %}
                orange
              {% elif is_state('group.room_01critical', 'off') and
              is_state('group.room_01notify', 'off') %}
                green
              {% else %}
                purple
              {% endif %}
            fill_container: false
            multiline_secondary: true
            layout: vertical
            badge_icon: ''
            double_tap_action:
              action: none
            hold_action:
              action: none
            badge_color: ''
          - type: custom:mushroom-template-card
            primary: Room 2
            secondary: ''
            tap_action:
              action: navigate
              navigation_path: /lovelace/r_02
            icon: mdi:door
            icon_color: >-

              {% if is_state('group.room_02critical', 'on') %}
                red
              {% elif is_state('group.room_02notify', 'on') %}
                orange
              {% elif is_state('group.room_02critical', 'off') and
              is_state('group.room_02notify', 'off') %}
                green
              {% else %}
                purple
              {% endif %}
            fill_container: false
            multiline_secondary: true
            layout: vertical
            badge_icon: ''
            badge_color: ''
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Room 3
            secondary: ''
            tap_action:
              action: navigate
              navigation_path: /lovelace/r_03
            icon: mdi:bed
            icon_color: >-

              {% if is_state('group.room_03critical', 'on') %}
                red
              {% elif is_state('group.room_03notify', 'on') %}
                orange
              {% elif is_state('group.room_03critical', 'off') and
              is_state('group.room_03notify', 'off') %}
                green
              {% else %}
                purple
              {% endif %}
            fill_container: false
            multiline_secondary: true
            layout: vertical
            badge_icon: ''
            badge_color: ''
          - type: custom:mushroom-template-card
            primary: Room 4
            secondary: ''
            tap_action:
              action: navigate
              navigation_path: /lovelace/r_04
            icon: mdi:toilet
            icon_color: >-

              {% if is_state('group.room_04critical', 'on') %}
                red
              {% elif is_state('group.room_04notify', 'on') %}
                orange
              {% elif is_state('group.room_04critical', 'off') and
              is_state('group.room_04notify', 'off') %}
                green
              {% else %}
                purple
              {% endif %}
            fill_container: false
            multiline_secondary: true
            layout: vertical
            badge_icon: ''
            badge_color: ''
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Room 5
            secondary: ''
            tap_action:
              action: navigate
              navigation_path: /lovelace/r_05
            icon: mdi:sofa
            icon_color: >-

              {% if is_state('group.room_05critical', 'on') %}
                red
              {% elif is_state('group.room_05notify', 'on') %}
                orange
              {% elif is_state('group.room_05critical', 'off') and
              is_state('group.room_05notify', 'off') %}
                green
              {% else %}
                purple
              {% endif %}
            fill_container: false
            multiline_secondary: true
            layout: vertical
            badge_icon: ''
            badge_color: ''
          - type: custom:mushroom-template-card
            primary: Room 6
            secondary: ''
            tap_action:
              action: navigate
              navigation_path: /lovelace/r_06
            icon: mdi:balcony
            icon_color: >-

              {% if is_state('group.room_06critical', 'on') %}
                red
              {% elif is_state('group.room_06notify', 'on') %}
                orange
              {% elif is_state('group.room_06critical', 'off') and
              is_state('group.room_06notify', 'off') %}
                green
              {% else %}
                purple
              {% endif %}
            fill_container: false
            multiline_secondary: true
            layout: vertical
            badge_icon: ''
            badge_color: ''

Can you post some code on how you are making this work right now? hard to understand what you are wanting when i dont understand what you currently have.