![Community Forum][community_forum_shield] ![Revolut.Me][revolut_me_shield] ![buymecoffee][buy_me_coffee_shield]

Here's a link to the old version of this dashboard.

In this repo i will share with you the code of my dashboard, mainly those cards:

Header card
Persons cards
Rooms cards

Notes:

This dashboard meant to be used in Home Assistant App for best performance.
If you dont have motion sensors, you can remove the motion sensors sections from the card.
For fans, i'm just using smart plugs example: switch.fan_plug.
Try to understand what the code does in the card to be able to customize the cards the way you like.
If you have any qustions, feel free to open an issue and i will reply ASAP.
More coming soon, follow me on YouTube

preparation:

1. you need to install the folowing integrations from HACS:

In this YouTube video i went through the cards we need which are the folowing:

For Home page:

lovelace-mushroom

lovelace-mushroom-themes

Set the theme in Home Assistant profile to mushroom shadow to get rid of the boarders.

button-card

stack-in-card

swipe-card

card-mod

For other views:

mini-graph-card

vacuum-card

xiomi-vacuum-card

frigate-card

2. you need to enable these sensors in the companion app:

Detectd Activity

Battery sensors

Geocoded Location

Last Reboot

Location sensors

Network sensors

3. you need to create Area's for your rooms in:

Settings > Areas & Zones > + CREATE AREA

also create an Area called: Media (we need it later for media count)

4. you need to create this virtual/fake button:

this button (input_boolean) is needed to give some mushroom cards (that we need for navigation only) some colors, more info about it here.

to create it:

Settings > Devices & Services > Helpers > + CREATE HELPER > Toggle

name it: on state

so this button entity id would be: input_boolean.on_state

5. you need to have/create groups and lights count sensors:

Note: make more groups & sensors for every user & room you want.

Restart is required after you create the sensors.

use your own entities!

Groups examples: (Click to expand)

Livingroom group
* paste this code to your **groups.yaml** ``` livingroom_lights: name: Livingroom lights entities: - light.livingroom_lamp - light.livingroom_socket - light.under_tv_led - light.behind_tv_led - light.right_led - light.left_led ```

Office group
* paste this code to your **groups.yaml** ``` office_lights: name: office lights entities: - light.desk_led - light.monitor_led ```

Kitchen group
* paste this code to your **groups.yaml** ``` kitchen_lights: name: kitchen lights entities: - light.kitchen_lamp ```

Bedroom group
* paste this code to your **groups.yaml** ``` bedroom_lights: name: Bedroom lights entities: - light.bedroom_lamp ```

Bath group
* paste this code to your **groups.yaml** ``` bath_lights: name: Bath lights entities: - light.bath_lamp ```

WC group
* paste this code to your **groups.yaml** ``` wc_lights: name: WC lights entities: - light.wc_lamp ```

All lights group
* paste this code to your **groups.yaml** ``` all_lights: name: All lights entities: - light.livingroom_lamp - light.livingroom_socket - light.under_tv_led - light.behind_tv_led - light.right_led - light.left_led - light.desk_led - light.monitor_led - light.bedroom_lamp - light.kitchen_lamp - light.bath_lamp - light.wc_lamp ```

All media group
* paste this code to your **groups.yaml** ``` all_media: name: All media entities: - media_player.livingroom_speaker - media_player.bedroom_speaker - media_player.samsung_tv ```

All devices group
* paste this code to your **groups.yaml** ``` all_devices: name: All devices entities: - light.livingroom_lamp - light.livingroom_socket - light.under_tv_led - light.behind_tv_led - light.right_led - light.left_led - light.desk_led - light.monitor_led - light.bedroom_lamp - light.kitchen_lamp - light.bath_lamp - light.wc_lamp - media_player.livingroom_speaker - media_player.bedroom_speaker - media_player.samsung_tv ```

All plugs group
* paste this code to your **groups.yaml** ``` all_plugs: name: All plugs entities: - switch.plug_1 - switch.plug_2 - switch.plug_3 ```

Lighs/Media/Devices counters examples: (Click to expand)

Livingroom Lights count
* paste this code to your **sensors.yaml** * replace Livingroom in line 7 with your own Area name, (upper/lower case sensitive). ``` - platform: template sensors: livingroom_lights_of_count: friendly_name: 'livingroom lights of count' unique_id: livingroom_lights_of_count value_template: > {{ expand(area_entities('Livingroom')) | selectattr('domain', 'in', ['light']) | selectattr('state', 'eq', 'on') | rejectattr('object_id', 'search', 'segment') | list | count }} ```

Office Lights count
* paste this code to your **sensors.yaml** * replace Office in line 7 with your own Area name, (upper/lower case sensitive). ``` - platform: template sensors: office_lights_of_count: friendly_name: 'Office lights of count' unique_id: office_lights_of_count value_template: > {{ expand(area_entities('Office')) | selectattr('domain', 'in', ['light']) | selectattr('state', 'eq', 'on') | rejectattr('object_id', 'search', 'segment') | list | count }} ```

Bedroom Lights count
* paste this code to your **sensors.yaml** * replace Bedroom in line 7 with your own Area name, (upper/lower case sensitive). ``` - platform: template sensors: bedroom_lights_of_count: friendly_name: 'Bedroom lights of count' unique_id: bedroom_lights_of_count value_template: > {{ expand(area_entities('Bedroom')) | selectattr('domain', 'in', ['light']) | selectattr('state', 'eq', 'on') | rejectattr('object_id', 'search', 'segment') | list | count }} ```

Kitchen Lights count
* paste this code to your **sensors.yaml** * replace Kitchen in line 7 with your own Area name, (upper/lower case sensitive). ``` - platform: template sensors: kitchen_lights_of_count: friendly_name: 'Kitchen lights of count' unique_id: kitchen_lights_of_count value_template: > {{ expand(area_entities('Kitchen')) | selectattr('domain', 'in', ['light']) | selectattr('state', 'eq', 'on') | rejectattr('object_id', 'search', 'segment') | list | count }} ```

Bath Lights count
* paste this code to your **sensors.yaml** * replace Bath in line 7 with your own Area name, (upper/lower case sensitive). ``` - platform: template sensors: bath_lights_of_count: friendly_name: 'Bath lights of count' unique_id: bath_lights_of_count value_template: > {{ expand(area_entities('Bath')) | selectattr('domain', 'in', ['light']) | selectattr('state', 'eq', 'on') | rejectattr('object_id', 'search', 'segment') | list | count }} ```

WC Lights count
* paste this code to your **sensors.yaml** * replace WC in line 7 with your own Area name, (upper/lower case sensitive). ``` - platform: template sensors: wc_lights_of_count: friendly_name: 'WC lights of count' unique_id: wc_lights_of_count value_template: > {{ expand(area_entities('WC')) | selectattr('domain', 'in', ['light']) | selectattr('state', 'eq', 'on') | rejectattr('object_id', 'search', 'segment') | list | count }} ```

Media count
* paste this code to your **sensors.yaml** ``` - platform: template sensors: media_of_count: friendly_name: 'Media of count' unique_id: media_of_count value_template: > {{ expand(area_entities('Media')) | selectattr('domain', 'in', ['media_player']) | selectattr('state', 'in', ['on', 'idle']) | rejectattr('object_id', 'search', 'segment') | list | count }} ```

All Lights count
* paste this code to your **sensors.yaml** * replace Area's names in line 8 with your own, (upper/lower case sensitive). ``` - platform: template sensors: lights_of_count: friendly_name: 'Lights of count' unique_id: lights_of_count value_template: > {%- set search_state = 'on' %} {%- set search_areas = ['Livingroom','Office','Bedroom','Kitchen','Bath','WC'] %} {%- set ns = namespace(lights=[]) %} {%- for light in states.light | selectattr('state','eq', search_state) | rejectattr('object_id', 'search', 'segment')%} {%- for area in search_areas %} {% if area_name(light.entity_id) == area %} {%- set ns.lights = ns.lights + [ light.entity_id ] %} {% endif%} {%- endfor %} {%- endfor %} {{ ns.lights| list | length }} ```

(Note: make more groups & sensors for every user & room you want)

6. you need to create these additional sensors:

(Restart is required after you create the sensors)

Battery icon & color based of phone battery level
* paste this code to your **sensors.yaml** (replace the word *user* with your own name or family members names) ``` - platform: template sensors: user_battery_icon: friendly_name: 'user battery icon' value_template: > {% set state = states('sensor.user_battery_level')|float %} {% if state >= 0 and state < 10 %} mdi:battery-10 {% elif state >= 10 and state < 20 %} mdi:battery-20 {% elif state >= 20 and state < 30 %} mdi:battery-30 {% elif state >= 30 and state < 40 %} mdi:battery-40 {% elif state >= 40 and state < 50 %} mdi:battery-50 {% elif state >= 50 and state < 60 %} mdi:battery-60 {% elif state >= 60 and state < 70 %} mdi:battery-70 {% elif state >= 70 and state < 80 %} mdi:battery-80 {% elif state >= 80 and state < 95 %} mdi:battery-90 {% else %} mdi:battery {% endif %} - platform: template sensors: user_battery_color: friendly_name: 'user battery color' value_template: > {% set state = states('sensor.user_battery_level')|float %} {% if state >= 0 and state < 20 %} red {% elif state >= 20 and state < 50 %} orange {% elif state >= 50 and state < 80 %} yellow {% else %} green {% endif %} ```

(for header) Temperature icon color based of temperature
* paste this code to your **sensors.yaml** `Celsius` ``` - platform: template sensors: livingroom_temp_color_no_rgb: friendly_name: 'livingroom temp color no rgb' value_template: > {% set state = states('sensor.livingroom_temperature')|float %} {% if state >= 0 and state < 18 %} blue {% elif state >= 18 and state < 20 %} yellow {% elif state >= 20 and state < 23 %} orange {% elif state >= 23 and state < 50 %} red {% else %} grey {% endif %} ``` `Fahrenheit` ``` - platform: template sensors: livingroom_temp_color_no_rgb: friendly_name: 'livingroom temp color no rgb' value_template: > {% set state = states('sensor.livingroom_temperature')|float %} {% if state >= 0 and state < 64 %} blue {% elif state >= 64 and state < 68 %} yellow {% elif state >= 68 and state < 73 %} orange {% elif state >= 73 and state < 212 %} red {% else %} grey {% endif %} ```

(for rooms cards) Temperature icon color based of temperature
* paste this code to your **sensors.yaml** `Celsius` ``` - platform: template sensors: livingroom_temp_color: friendly_name: 'livingroom temp color' value_template: > {% set state = states('sensor.livingroom_temperature')|float %} {% if state >= 0 and state < 18 %} rgb(26, 209, 255) {% elif state >= 18 and state < 20 %} rgb(255, 214, 51) {% elif state >= 20 and state < 23 %} rgb(255, 163, 26) {% elif state >= 23 and state < 50 %} rgb(255, 51, 51) {% else %} grey {% endif %} ``` `Fahrenheit` ``` - platform: template sensors: livingroom_temp_color: friendly_name: 'livingroom temp color' value_template: > {% set state = states('sensor.livingroom_temperature')|float %} {% if state >= 0 and state < 64 %} rgb(26, 209, 255) {% elif state >= 64 and state < 68 %} rgb(255, 214, 51) {% elif state >= 68 and state < 73 %} rgb(255, 163, 26) {% elif state >= 73 and state < 212 %} rgb(255, 51, 51) {% else %} grey {% endif %} ```

(for person cards) This shows the user address nicley in the card
* paste this code to your **sensors.yaml** (replace the word *user* with your own name or family members names) ``` - platform: template sensors: user_geo_1: friendly_name: 'user geo 1' value_template: > {{ (states('sensor.user_geocoded_location')).split(",")[0] }} - platform: template sensors: user_geo_2: friendly_name: 'user geo 2' value_template: > {{ (states('sensor.user_geocoded_location')).split(",")[1] }} ```

(for person cards) needed for Proximity (converting to KM/Miles and math stuff)
* paste this code to your **sensors.yaml** (replace the word *user* with your own name or family members names) `meters/KM` ``` - platform: template sensors: user_proximity: friendly_name: 'user proximity' value_template: > {% set state = states('proximity.user')|float %} {% if state >= 0 and state < 50 %} {{ (states('proximity.user')| int * 0)}} km {% elif state >= 50 and state < 999 %} {{ (states('proximity.user')| int * 0.001) | round(1)}} km {% elif state > 999 and state <= 99999 %} {{ (states('proximity.user')| int * 0.001) | round(1)}} km {% elif state > 99999 %} {{ (states('proximity.user')| int * 0.001) | round(0)}} km {% endif %} ``` `ft/miles` ``` - platform: template sensors: user_proximity: friendly_name: 'user proximity' value_template: > {% set state = states('proximity.user')|float %} {% if state >= 0 and state < 528 %} {{state|round}} ft {% elif state >= 528 and state < 5280 %} {{ (state * 0.0001894) | round(1) }} m {% elif state >= 5280 %} {{ (state * 0.0001894) | round(1) }} m {% endif %} ```

(for person cards) Proximity (how far from home is a family member)
* add this to your configuration.yaml: `proximity: !include proximity.yaml` * create a proximity.yaml in your config/ and paste this code in it (replace the word *user* with your own name or family members names) this calculates how far from home is a family member in `meters` or `ft`. `meter` ``` user: zone: home devices: - device_tracker.user tolerance: 50 unit_of_measurement: m ``` `ft` ``` user: zone: home devices: - device_tracker.user tolerance: 200 unit_of_measurement: ft ```

7. laptop/PC states/actions:

To get the state of the laptop/PC like in the office room, i've used HASS.Agent.

Setup Dashboard cards :

Header card:

Go to your dashboard add card then choose Manual.
copy/paste the code below.
in this card use the (for header) sensor from step .6 to avoid errors.
replace entities like: lights count, groups, temperature sensors, nav bath, etc.. with your own entities.

Yaml Code (Click to expand)

``` type: custom:stack-in-card mode: vertical keep: outer_padding: false margin: true cards: - type: custom:mushroom-chips-card chips: - type: template entity: input_boolean.on_state double_tap_action: action: none icon: mdi:pine-tree content: '' icon_color: green hold_action: action: none tap_action: action: navigate navigation_path: weather - type: weather entity: weather.forecast_home double_tap_action: action: none show_conditions: true show_temperature: true hold_action: action: none - type: entity entity: sensor.openweathermap_wind_speed icon_color: blue-grey icon: mdi:weather-windy double_tap_action: action: none hold_action: action: none alignment: center - type: custom:mushroom-chips-card chips: - type: template double_tap_action: action: none icon: mdi:home icon_color: |- {% if is_state('group.all_devices','on')%} amber {%endif%} {% if is_state('group.all_devices','off')%} grey {%endif%} hold_action: action: more-info tap_action: action: none entity: group.all_devices - type: template entity: sensor.livingroom_temperature icon_color: '{{states(''sensor.livingroom_temp_color_no_rgb'')}}' icon: mdi:thermometer use_entity_picture: true double_tap_action: action: none hold_action: action: none tap_action: action: more-info content: |- {% if is_state('sensor.livingroom_temperature','unavailable') %} - {% elif is_state('sensor.livingroom_temperature','unknown') %} - {% else %} {{states('sensor.livingroom_temperature')}}° {% endif %} - type: template entity: sensor.livingroom_humidity icon_color: light-blue icon: mdi:water-percent name: '' use_entity_picture: true hold_action: action: none double_tap_action: action: none tap_action: action: more-info content: |- {% if is_state('sensor.livingroom_humidity','unavailable') %} - {% else %} {{states('sensor.livingroom_humidity')}}% {% endif %} - type: template double_tap_action: action: none icon: mdi:lightbulb-group content: |- {% if is_state('sensor.lights_of_count','0') %} {% else %} {{states('sensor.lights_of_count')}} {% endif %} icon_color: |- {% set state = states('sensor.lights_of_count')|float %} {% if state <= 0 %} grey {% else %} amber {% endif %} hold_action: action: none tap_action: action: none entity: sensor.lights_of_count - type: template double_tap_action: action: none icon: mdi:play content: |- {% if is_state('sensor.media_of_count','0') %} {% else %} {{states('sensor.media_of_count')}} {% endif %} icon_color: |- {% set state = states('sensor.media_of_count')|float %} {% if state <= 0 %} grey {% else %} red {% endif %} hold_action: action: none tap_action: action: none entity: sensor.media_of_count alignment: center - type: custom:swipe-card mode: vertical keep: outer_padding: false margin: true box_shadow: false background: false cards: - type: horizontal-stack cards: - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: mdi:remote icon_color: teal layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: remote primary_info: none secondary_info: name name: TV - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: group.all_lights icon_color: yellow secondary_info: name layout: vertical name: Lights double_tap_action: action: none hold_action: action: none tap_action: action: more-info primary_info: none icon: mdi:lamps - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state icon: mdi:floor-plan icon_color: white layout: vertical primary_info: none secondary_info: name tap_action: action: navigate navigation_path: floor hold_action: action: none double_tap_action: action: none name: Floor - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state name: Media icon: mdi:television-play icon_color: red layout: vertical double_tap_action: action: none hold_action: action: none tap_action: action: navigate navigation_path: media secondary_info: name primary_info: none - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state name: Clean icon: mdi:vacuum icon_color: cyan layout: vertical double_tap_action: action: none hold_action: action: none tap_action: action: navigate navigation_path: vacuum secondary_info: name primary_info: none - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: group.all_plugs name: Plugs icon: mdi:power-socket-eu icon_color: green layout: vertical double_tap_action: action: none hold_action: action: none tap_action: action: navigate navigation_path: plugs secondary_info: name primary_info: none - type: horizontal-stack cards: - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: mdi:shield-home icon_color: teal layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: arm primary_info: none secondary_info: name name: Alarm - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: mdi:flask-outline icon_color: cyan layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: lab primary_info: none secondary_info: name name: Lab - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: mdi:gas-station icon_color: orange layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: brandstof primary_info: none secondary_info: name name: Gas - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: mdi:shopping icon_color: white layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: shopping primary_info: none secondary_info: name name: List - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: none icon_color: none layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: Home primary_info: none secondary_info: none name: TV - type: custom:mushroom-entity-card card_mod: style: | ha-card{ box-shadow: none; } entity: input_boolean.on_state double_tap_action: action: none icon: none icon_color: none layout: vertical hold_action: action: none tap_action: action: navigate navigation_path: Home primary_info: none secondary_info: none name: TV ```

person cards:

person cards

Go to your dashboard add card then choose horizontal-stack.
within the horizontal-stack add card with + and choose Manual
copy/paste the code below.
you can add a second user by clicking +
Replace "user" with your own users names.

Yaml Code (Click to expand)

``` type: custom:swipe-card cards: - type: custom:stack-in-card cards: - type: custom:mushroom-person-card entity: person.user icon_type: entity-picture tap_action: action: more-info double_tap_action: action: none hold_action: action: none secondary_info: state layout: horizontal primary_info: none fill_container: true - type: custom:mushroom-chips-card card_mod: style: | ha-card { --chip-font-size: 0.3em; --chip-icon-size: 0.5em; --chip-border-width: 0; --chip-box-shadow: none; --chip-background: none; --chip-border: none; --chip-spacing: none; --chip-font-weight: bold; } chips: - type: template entity: sensor.user_battery_level icon: '{{states(''sensor.user_battery_icon'')}}' icon_color: '{{states(''sensor.user_battery_color'')}}' content: '{{states(''sensor.user_battery_level'')}}%' tap_action: action: more-info - type: template entity: sensor.user_battery_level icon: >- {% if is_state('binary_sensor.user_is_charging','on')%}mdi:power-plug {% else %} mdi:power-plug-off {% endif %} icon_color: |- {% if is_state('binary_sensor.user_is_charging','on')%}blue {% else %} grey {% endif %} content: '' tap_action: action: none - type: template entity: sensor.user_network_type icon: |- {% if is_state('sensor.user_network_type','wifi')%} mdi:wifi {% elif is_state('sensor.user_network_type','cellular')%} mdi:signal-4g {% else %} mdi:network-strength-off {% endif %} icon_color: |- {% if is_state('sensor.user_network_type','wifi')%} green {% elif is_state('sensor.user_network_type','cellular')%} red {% else %} grey {% endif %} content: '' hold_action: action: none double_tap_action: action: none tap_action: action: none alignment: center - type: custom:mushroom-chips-card card_mod: style: | ha-card { --chip-font-size: 0.28em; --chip-icon-size: 0.4em; --chip-border-width: 0; --chip-box-shadow: none; --chip-background: none; --chip-border: none; --chip-font-weight: normal; } alignment: justify chips: - type: entity entity: device_tracker.user content_info: last-updated icon: mdi:clock icon_color: grey tap_action: action: more-info - type: entity entity: sensor.user_proximity content_info: state icon: mdi:map-marker-right-outline icon_color: grey tap_action: action: more-info - type: custom:stack-in-card mode: vertical keep: margin: true outer-padding: false cards: - type: custom:mushroom-template-card card_mod: style: | ha-card { --font-size: 0.32em; --icon-size: 0.52em; --border-width: 0; --box-shadow: none; --background: none; --border: none; --spacing: 0.5em; --font-weight: normal; } primary: '' secondary: 'WiFi: {{states(''sensor.user_wifi_connection'')}}' icon: '' entity: sensor.user_wifi_connection layout: vertical double_tap_action: action: none hold_action: action: none tap_action: action: more-info - type: custom:mushroom-chips-card card_mod: style: | ha-card { --chip-font-size: 0.32em; --chip-icon-size: 0.52em; --chip-border-width: 0; --chip-box-shadow: none; --chip-background: none; --chip-border: none; --chip-spacing: none; --chip-font-weight: normal; } chips: - type: entity entity: sensor.user_detected_activity icon_color: teal double_tap_action: action: none hold_action: action: none tap_action: action: more-info - type: entity entity: input_boolean.a_on_state icon_color: red icon: mdi:cellphone-wireless use_entity_picture: false content_info: none tap_action: action: call-service service: script.user_find_phone data: {} target: {} hold_action: action: none double_tap_action: action: none alignment: center - type: custom:mushroom-entity-card card_mod: style: | ha-card { --font-size: 0.2em; --icon-size: 0.5em; --border-width: 0; --box-shadow: none; --background: none; --border: none; --spacing: none; --font-weight: normal; } entity: sensor.user_geo_1 icon_type: none primary_info: '' name: 'Possible Location:' layout: vertical fill_container: true double_tap_action: action: none hold_action: action: none tap_action: action: more-info - type: custom:mushroom-entity-card card_mod: style: | ha-card { --font-size: 0.2em; --icon-size: 0.5em; --border-width: 0; --box-shadow: none; --background: none; --border: none; --spacing: none; --font-weight: normal; } entity: sensor.user_geo_2 icon_type: none primary_info: '' name: 'Possible Location:' layout: vertical fill_container: true double_tap_action: action: none hold_action: action: none tap_action: action: more-info - type: custom:stack-in-card mode: vertical keep: margin: true outer-padding: true cards: - type: custom:mushroom-template-card card_mod: style: | ha-card { --font-size: 0.3em; --icon-size: 0.5em; --border-width: 0; --box-shadow: none; --background: none; --border: none; --spacing: 0.5em; --font-weight: normal; } primary: '' secondary: 'other info:' icon: '' entity: sensor.karam_wifi_connection layout: vertical double_tap_action: action: none hold_action: action: none tap_action: action: more-info - type: custom:mushroom-chips-card card_mod: style: | ha-card { --chip-font-size: 0.32em; --chip-icon-size: 0.52em; --chip-border-width: 0; --chip-box-shadow: none; --chip-background: none; --chip-border: none; --chip-spacing: none; --chip-font-weight: normal; } chips: - type: entity entity: sensor.user_public_ip_address icon_color: teal double_tap_action: action: none hold_action: action: none tap_action: action: more-info alignment: center - type: custom:mushroom-chips-card card_mod: style: | ha-card { --chip-font-size: 0.32em; --chip-icon-size: 0.52em; --chip-border-width: 0; --chip-box-shadow: none; --chip-background: none; --chip-border: none; --chip-spacing: none; --chip-font-weight: normal; } chips: - type: entity entity: sensor.user_last_reboot icon_color: teal double_tap_action: action: none hold_action: action: none tap_action: action: more-info alignment: center ```

Rooms cards:

Go to your dashboard add card then choose horizontal-stack.
Within the horizontal-stack add card with + and choose Manual
copy/paste the code below.
in this card use the (for rooms) sensor from step .6 to avoid errors.
replace entities like: Lights, lights counters, groups, temperature sensors, etc.. with your own entities.
most room cards have light.empty entity, leave it as is, as this let you have an empty row (in the room card quick toggle view).

Livingroom - Office

living-office

Livingroom card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.livingroom_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Living room secondary: '' icon: mdi:sofa layout: horizontal entity: group.livingroom_lights icon_color: |- {% if is_state('group.livingroom_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: livingroom hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.livingroom_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.livingroom_lights_of_count'].state == '0') return ' ' return `${states['sensor.livingroom_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - value: 'on' icon: mdi:thermometer entity: sensor.livingroom_temperature styles: icon: - color: | [[[ return `${states['sensor.livingroom_temp_color'].state}` ]]] - width: 15px - position: relative - top: 4px - right: 12px card: - border-radius: 80% - width: 40px - height: 40px name: - color: white - font-size: 10px - position: relative - bottom: 10px - left: 5px - font-weight: bold name: | [[[ if (states['sensor.livingroom_temperature'].state == 'unknown') return '-' return `${states['sensor.livingroom_temperature'].state}°` ]]] - type: custom:button-card state: - operator: default color: grey - value: 'off' color: grey - value: 'on' color: rgb(4,212,240) styles: icon: - animation: rotating 0.8s linear infinite card: - border-radius: 50% icon: mdi:fan tap_action: action: none entity: switch.plug_4 styles: icon: - width: 19px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card state: - operator: default color: grey - value: 'on' color: rgb(255, 51, 51) - value: idle color: rgb(255, 51, 51) styles: card: - border-radius: 50% tap_action: action: none icon: mdi:youtube-tv entity: media_player.samsung_tv styles: icon: - width: 19px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:chandelier tap_action: action: toggle entity: light.livingroom_lamp styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:chandelier tap_action: action: toggle entity: light.livingroom_socket styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:desk tap_action: action: toggle entity: light.desk_led styles: icon: - width: 24px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:television-ambient-light tap_action: action: toggle entity: light.behind_tv_led styles: icon: - width: 21px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:monitor tap_action: action: toggle entity: light.monitor_led styles: icon: - width: 21px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:led-strip tap_action: action: toggle entity: light.left_led styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:rectangle tap_action: action: toggle entity: light.under_tv_led styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:led-strip tap_action: action: toggle entity: light.right_led styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card ```

Office card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.office_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Office secondary: '' icon: mdi:desk layout: horizontal entity: group.office_lights icon_color: |- {% if is_state('group.office_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: office hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.office_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.office_lights_of_count'].state == '0') return ' ' return `${states['sensor.office_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - value: 'on' icon: mdi:thermometer entity: sensor.livingroom_temperature styles: icon: - color: | [[[ return `${states['sensor.livingroom_temp_color'].state}` ]]] - width: 15px - position: relative - top: 4px - right: 12px card: - border-radius: 80% - width: 40px - height: 40px name: - color: white - font-size: 10px - position: relative - bottom: 10px - left: 5px - font-weight: bold name: | [[[ if (states['sensor.livingroom_temperature'].state == 'unknown') return '-' return `${states['sensor.livingroom_temperature'].state}°` ]]] - type: custom:button-card state: - operator: default color: grey - value: Unlocked color: rgb(34,139,34) - value: Locked color: rgb(255, 71, 26) styles: card: - border-radius: 50% icon: mdi:laptop tap_action: action: more-info entity: sensor.laptop_sessionstate styles: icon: - width: 19px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:desk tap_action: action: toggle entity: light.desk_led styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:chandelier tap_action: action: toggle entity: light.livingroom_socket styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:monitor tap_action: action: toggle entity: light.monitor_led styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

bedroom-kitchen

Bedroom card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.bedroom_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Bedroom secondary: '' icon: mdi:bunk-bed layout: horizontal entity: group.bedroom_lights icon_color: |- {% if is_state('group.bedroom_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: bedroom hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.bedroom_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.bedroom_lights_of_count'].state == '0') return ' ' return `${states['sensor.bedroom_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - value: 'on' icon: mdi:thermometer entity: sensor.mi_bedroom_temperature styles: icon: - color: | [[[ return `${states['sensor.bedroom_temp_color'].state}` ]]] - width: 15px - position: relative - top: 4px - right: 12px card: - border-radius: 80% - width: 40px - height: 40px name: - color: white - font-size: 10px - position: relative - bottom: 10px - left: 5px - font-weight: bold name: | [[[ if (states['sensor.mi_bedroom_temperature'].state == 'unavailable') return '-' return `${states['sensor.mi_bedroom_temperature'].state}°` ]]] - type: custom:button-card state: - operator: default color: grey - value: 'off' color: grey - value: 'on' color: rgb(4,212,240) styles: icon: - animation: rotating 0.8s linear infinite card: - border-radius: 50% icon: mdi:fan tap_action: action: none entity: switch.plug_3 styles: icon: - width: 19px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.wled_window styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:light-recessed tap_action: action: toggle entity: light.bedroom_lamp styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:table-furniture tap_action: action: toggle entity: light.table_led styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.wled_window styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

Kitchen card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.kitchen_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Kitchen secondary: '' icon: mdi:silverware-fork-knife layout: horizontal entity: group.kitchen_lights icon_color: |- {% if is_state('group.kitchen_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: kitchen hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.kitchen_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.kitchen_lights_of_count'].state == '0') return ' ' return `${states['sensor.kitchen_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - value: 'on' icon: mdi:thermometer entity: sensor.livingroom_temperature styles: icon: - color: | [[[ return `${states['sensor.livingroom_temp_color'].state}` ]]] - width: 15px - position: relative - top: 4px - right: 12px card: - border-radius: 80% - width: 40px - height: 40px name: - color: white - font-size: 10px - position: relative - bottom: 10px - left: 5px - font-weight: bold name: | [[[ if (states['sensor.livingroom_temperature'].state == 'unknown') return '-' return `${states['sensor.livingroom_temperature'].state}°` ]]] - type: custom:button-card state: - operator: default color: yellow - value: 'off' color: grey - value: 'on' color: rgb(255, 71, 26) styles: card: - border-radius: 50% icon: mdi:motion-sensor tap_action: action: more-info entity: binary_sensor.pir_kitchen_occupancy styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: input_boolean.on_state styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:light-recessed tap_action: action: toggle entity: light.kitchen_lamp styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: input_boolean.on_state styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

bath-wc

Bath card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.bath_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Bath icon: mdi:shower-head layout: horizontal entity: group.bath_lights icon_color: |- {% if is_state('group.bath_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: bath hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.bath_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.bath_lights_of_count'].state == '0') return ' ' return `${states['sensor.bath_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - operator: default color: yellow - value: 'off' color: grey - value: 'on' color: rgb(255, 71, 26) styles: card: - border-radius: 50% icon: mdi:motion-sensor tap_action: action: more-info entity: binary_sensor.pir_bath_occupancy styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.wled_window styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:dome-light tap_action: action: toggle entity: light.bath_lamp styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.wled_window styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

WC card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.wc_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: WC icon: mdi:toilet layout: horizontal entity: group.wc_lights icon_color: |- {% if is_state('group.wc_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: toilet hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.wc_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.wc_lights_of_count'].state == '0') return ' ' return `${states['sensor.wc_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - operator: default color: yellow - value: 'off' color: grey - value: 'on' color: rgb(255, 71, 26) styles: card: - border-radius: 50% icon: mdi:motion-sensor tap_action: action: more-info entity: binary_sensor.pir_wc_occupancy styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:light-recessed tap_action: action: toggle entity: light.wc_lamp styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

security-hall

Security card

``` type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('camera.tapo_cam_sd_stream', 'idle') %} background: rgba(91, 215, 91,0.1); {% endif %} } mode: vertical cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: '' .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -21px 0px 0px -21px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Security secondary: '' icon: mdi:cctv layout: horizontal entity: switch.tapo_cam_privacy icon_color: green badge_color: '' badge_icon: '' multiline_secondary: false fill_container: false double_tap_action: action: none tap_action: action: navigate navigation_path: security hold_action: action: none - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

Hall card

``` type: custom:swipe-card cards: - type: custom:stack-in-card card_mod: style: | ha-card { {% if is_state('group.hall_lights', 'on') %} background: rgba(255, 152, 0, 0.1); {% endif %} } mode: vertical keep: outer_padding: false cards: - type: custom:mushroom-template-card card_mod: style: mushroom-shape-icon$: | @keyframes ping { 0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); } 100% { box-shadow: 0 0 5px 15px transparent; } } .: | mushroom-shape-icon { --icon-size: 76px; display: flex; margin: -20px 0px 0px -20px !important; } ha-card { clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px)); } primary: Hall icon: mdi:door layout: horizontal entity: group.hall_lights icon_color: |- {% if is_state('group.hall_lights','on')%} amber {%endif%} tap_action: action: navigate navigation_path: hall hold_action: action: toggle double_tap_action: action: none badge_color: '' badge_icon: '' fill_container: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: none state: - operator: default color: grey - value: 'on' color: orange icon: mdi:lightbulb-group entity: group.hall_lights styles: icon: - width: 19px grid: - position: relative custom_fields: notification: - border-radius: 50% - position: absolute - left: 50% - top: 3% - height: 20px - width: 20px - font-size: 10px - line-height: 20px - font-weight: bold card: - border-radius: 50% - width: 40px - height: 40px custom_fields: notification: | [[[ if (states['sensor.hall_lights_of_count'].state == '0') return ' ' return `${states['sensor.hall_lights_of_count'].state}` ]]] name: ' ' - type: custom:button-card state: - operator: default color: yellow - value: 'off' color: grey - value: 'on' color: rgb(255, 71, 26) styles: card: - border-radius: 50% icon: mdi:motion-sensor tap_action: action: more-info entity: binary_sensor.pir_hall_occupancy styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: custom:stack-in-card mode: vertical cards: - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' - type: horizontal-stack cards: - type: custom:button-card color_type: blank-card - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: mdi:light-flood-down tap_action: action: toggle entity: light.hall_lamp styles: icon: - width: 23px card: - width: 40px - height: 40px name: ' ' - type: custom:button-card color_type: blank-card - type: horizontal-stack cards: - type: custom:button-card state: - operator: default color: grey - value: 'on' color: orange - value: 'off' color: grey styles: card: - border-radius: 50% icon: none tap_action: action: none entity: light.empty styles: icon: - width: 18px card: - width: 40px - height: 40px name: ' ' ```

![Revolut.Me][revolut_me_shield] ![buymecoffee][buy_me_coffee_shield]