I think we might be better off going vertical vs horizontal. Two columns with two cards (entity and chips) per column. I believe it will eliminate the row flex. I’m messing with that concept.
ok - sounds good to me 
It would be nice to get this working. Previously I had a horizontal stack and this was giving me the slight issue with sizing of the entity card.
This may be the way to go
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 70% 30%
cards:
- type: custom:mushroom-template-card
entity: light.bed_lights
icon: mdi:lamp
primary: Front
card_mod:
style: |
ha-card {
border:none ;
padding: 1px;
margin-left: -10px
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.bed_lights
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) <
30 %} red {% elif states ('sensor.linktap_tap_front_battery')
| int(0) < 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.basement_sensor'') }}%'
card_mod:
style: |
ha-card {
border: none;
padding: 0;
position: relative;
}
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.bed_lights
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) <
30 %} red {% elif states ('sensor.linktap_tap_front_battery')
| int(0) < 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.basement_sensor'') }}%'
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
margin-top: -14px;
border: none;
padding: 0;
}
card_mod:
style: |
ha-card {
border: none;
padding: 0;
margin-left: -30px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 70% 30%
cards:
- type: custom:mushroom-template-card
entity: light.bed_lights
icon: mdi:lamp
primary: Back
card_mod:
style: |
ha-card {
border:none ;
padding: 1px;
margin-left: -10px
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.bed_lights
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) <
30 %} red {% elif states ('sensor.linktap_tap_front_battery')
| int(0) < 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.basement_sensor'') }}%'
card_mod:
style: |
ha-card {
border: none;
padding: 0;
position: relative;
}
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.bed_lights
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) <
30 %} red {% elif states ('sensor.linktap_tap_front_battery')
| int(0) < 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.basement_sensor'') }}%'
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
margin-top: -14px;
border: none;
padding: 0;
}
card_mod:
style: |
ha-card {
border: none;
padding: 0;
margin-left: -30px;
}
Needs more styling, but works on PC and phone both portrait and rotated.
2 Likes
Thanks so much. I will happily work in the styling etc. I will let you know how I get on.
Great work, please let us see the code.
Friend, the issue with rotation was successfully resolved! There is one more problem: when the fan is turned off, it stops but the icon continues to be active… can I make it turn gray? so that it can be seen that the device is turned off and not stopped. Thank you.
Just add this…
icon_color: |
{{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
2 Likes
Thank you friend!!! Now I’m happy with this card! Thank you very much!!!
Yes, please, post the entire code…
is the Pollenflug Card an Auto Entities Card? Can you share them?
not, but conditional.
type: vertical-stack
cards:
- type: markdown
content: >
<h2><font color= lightgrey><ha-icon
icon="mdi:flower-pollen-outline"></ha-icon> Pollenflug</font></h2>
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
--ha-card-border-width: 0;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_ambrosia_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Ambrosia
entity: sensor.pollenflug_ambrosia_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_ambrosia_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_beifuss_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Beifuß
entity: sensor.pollenflug_beifuss_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_beifuss_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_birke_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Birke
entity: sensor.pollenflug_birke_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_birke_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_birke_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_birke_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_birke_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_erle_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Erle
entity: sensor.pollenflug_erle_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_erle_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_erle_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_erle_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_erle_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_esche_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Esche
entity: sensor.pollenflug_esche_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_esche_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_esche_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_esche_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_esche_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_graeser_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Gräser
entity: sensor.pollenflug_graeser_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_graeser_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_hasel_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Hasel
entity: sensor.pollenflug_hasel_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_hasel_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_roggen_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Roggen
entity: sensor.pollenflug_roggen_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_roggen_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
i will provide a github-link, because the first page/dashboard has over 1600 lines of code 
https://github.com/b1ackbyte/HomeAssistant/tree/f0166fa91f9ead7d7030f0a3a52f8b5cdf361de5
Just ask, if i forgot something.
Hello, does anyone have examples of animation of icons for heating, humidification and air conditioning? I’ve been leafing through the forum all day, but I haven’t found any suitable examples. I would appreciate any code example. I found one example on heating, I’ll attach it, maybe it will be useful to someone. 
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: heater
secondary: ''
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
action: toggle
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
{{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
You did find “Part 1” I assume?
Because in there, there are tons of anitmation examples. You can start (approx.) here:
1 Like
Hi!
Is there a way to put text on an action chip card?
Guys, after a long time without any issue…
Some update broken my dashboard.
The space between the chips is too big.
I already tried to adjust “–chip-spacing:” property but no success.
See below how it was before:
After the update, the space is too big that a second line is being showed 
Does someone knows how to fix this space between the icons?
This is the code:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Sala
icon: mdi:sofa-outline
layout: hotizontal
multiline_secondary: false
fill_container: true
entity: light.luzes_sala
tap_action:
action: navigate
navigation_path: sala
hold_action:
action: none
double_tap_action:
action: toggle
icon_color: |-
{% if is_state('light.luzes_sala', 'on') %}
amber
{% else %}
blue
{% endif %}
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: template
entity: media_player.tv_da_sala
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:television-play
{% elif state=='off' %}
mdi:television-off
{% else %}
mdi:television-off
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: switch.porta_virtual
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:door-open
{% elif state=='off' %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: none
- type: template
entity: binary_sensor.janela_da_sala_contact
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:window-open-variant
{% elif state=='off' %}
mdi:window-closed-variant
{% else %}
mdi:window-closed-variant
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: binary_sensor.pir_da_sala_occupancy
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:motion-sensor
{% elif state=='off' %}
mdi:motion-sensor-off
{% else %}
mdi:motion-sensor
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: fan.ventilador
state: 'on'
chip:
type: template
icon_color: blue
entity: fan.ventilador
icon: mdi:fan
tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.echo_show_da_sala
state: playing
chip:
type: template
icon_color: blue
entity: media_player.echo_show_da_sala
icon: mdi:music
tap_action: none
style: |
ha-card {
height: 102px;
}
1 Like
Hello friends, please tell me, this code contains the animation I need, but when I insert an icon into the code, it starts to rotate along with the animation. Is there any way to stop the icon from rotating but still have the animation around the icon continue to rotate? is this even real?
type: custom:mushroom-template-card
icon: none
primary: Dual
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: spin 1s ease infinite;
border: 4px solid transparent;
border-top-color: rgb(var(--rgb-deep-orange));
border-bottom-color: rgb(var(--rgb-deep-orange));
--shape-color: none !important;
--icon-size: 34px;
}
I have been playing around with the different options you have helped me with.
This last one is the best in terms of supporting different devices/orientations but I much prefer two separate entitities (with a border/gap between - so they look normal in my dashboard).
Overall, I like the following design the most and I think I can build on this concept for a number of my dashboard views.
I would like to develop this idea so that any cell in the grid can have a stack in card and the chips can be aligned to either the cell or the entity card in the cell. Do you think this is possible.
Below is my fav design and yaml.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 75px 75px
margin: 5px 0px -10px 0px
cards:
- type: custom:mushroom-template-card
primary: Watering Setup
secondary: |
Profile: {{ states ('input_select.watering_schedule') }}
icon: mdi:sprinkler-variant
tap_action:
action: call-service
service: script.set_watering_schedule
target: {}
hold_action:
action: none
multiline_secondary: true
fill_container: false
double_tap_action:
action: none
entity: script.set_watering_schedule
icon_color: >-
{% if state_attr ('script.set_watering_schedule', 'last_triggered') +
timedelta (hours = 24) < now() %} red {% else %} green {% endif %}
- type: custom:mushroom-entity-card
entity: input_boolean.watering_smart
name: Smart Watering
icon: mdi:toggle-switch
layout: horizontal
tap_action:
action: toggle
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_back
name: Back
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_front_battery') | int(0)
< 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_signal') | int < 30 %}
red {% elif states ('sensor.linktap_tap_front_signal') | int < 50
%} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 87px;
left: 170px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
@media screen and (max-width: 400px) {
ha-card {
position: absolute;
top: 87px;
left: 120px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_back_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_back_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_back_battery') | int(0) <
50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_back_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_back_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_back_signal') | int < 30 %} red
{% elif states ('sensor.linktap_tap_back_signal') | int < 50 %}
orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_back_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 87px;
right: 10px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
@media screen and (max-width: 400px) {
ha-card {
position: absolute;
top: 87px;
right: 10px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
5 Likes