Take a look at these threads here and here
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: Fan
secondary: "{{states('switch.kitchen_lights')|title}}"
icon: >
{{'mdi:fan' if is_state('switch.kitchen_lights', 'on') else
'mdi:fan-off'}}
tap_action:
action: perform-action
perform_action: switch.toggle
target:
entity_id: switch.kitchen_lights
icon_color: |
{{ 'red' if is_state('switch.kitchen_lights', 'on') else 'grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('switch.kitchen_lights', 'on') %}
--shape-animation: spin 1s linear infinite;
{% else %}
--shape-animation: spin 3s ease-out;
{% endif %}
.: |
ha-card{
border: none !important;
}
- type: custom:mushroom-template-card
primary: Fan
secondary: "{{states('switch.kitchen_lights')|title}}"
icon: >
{{'mdi:fan' if is_state('switch.kitchen_lights', 'on') else
'mdi:fan-off'}}
tap_action:
action: perform-action
perform_action: switch.toggle
target:
entity_id: switch.kitchen_lights
icon_color: |
{{ 'red' if is_state('switch.kitchen_lights', 'on') else 'grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('switch.kitchen_lights', 'on') %}
--shape-animation: spin 1s linear infinite;
{% else %}
--shape-animation: spin 3s ease-out;
{% endif %}
.: |
ha-card{
border: none !important;
}
- type: custom:mushroom-number-card
entity: number.living_room_fanspeed
primary_info: none
icon_type: none
layout: horizontal
card_mod:
style: |
ha-card {
border: none !important;
}