Mushroom Cards - Build a beautiful dashboard easily πŸ„ (Part 1)

While you wait for the new feature, you can achieve what you want with a little CSS.

Vertical:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-1
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }

Horizontal:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-2
fill_container: false
multiline_secondary: false
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat 0px center;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }

Rounded:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-3
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }
     ha-card {
       width: 66px;
       border-radius: 30px;
       margin-left: auto;
       margin-right: auto;
     }

Edit: Update to stop icon floating in

13 Likes