I’m using the vertical-stack-in-card to create a custom area card:
type: custom:vertical-stack-in-card
cards:
- type: custom:bubble-card
card_type: separator
name: Main Room
icon: mdi:table-furniture
card_layout: large
sub_button: []
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.couch
name: Couch
content_info: name
- type: light
entity: light.tv
name: TV
content_info: name
- type: light
entity: light.dining
name: Dining
content_info: name
- type: spacer
- type: entity
entity: sensor.living_room_climate_temperature
icon_color: red
- type: entity
entity: sensor.living_room_climate_humidity
icon_color: primary
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: fan.living_room_fan
name: Living
content_info: name
- type: entity
entity: fan.dining_room_fan
name: Dining
content_info: name
- type: spacer
- type: entity
entity: binary_sensor.living_room_sliding_door_contact
name: Door
content_info: none
- type: entity
entity: binary_sensor.living_room_window_1_contact
content_info: none
- type: entity
entity: binary_sensor.living_room_window_2_contact
content_info: none
card_mod:
style:
.: |
ha-card {
padding: 1em;
}
bubble-card $: |
.bubble-line {
display: none;
}
mushroom-chips-card:nth-child(3)$:
mushroom-entity-chip$: |
ha-state-icon {
--color: rgb(255, 152, 0);
}
There’s just one issue: how can I make the whole card clickable so that I can click to navigate?
I’ve tried searching the forums for a possible way to do this, but so far, no luck.
Any ideas how this could be done? Or did I miss something obvious?