Here’s the code for the first entity, the others are a copy-paste with just the entity id changed.
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: rgba(28,28,28,0.6)
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90% 10%
cards:
- type: custom:mushroom-light-card
entity: light.living_room_strip
fill_container: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: false
use_light_color: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 154
target:
entity_id: light.living_room_strip
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: amber
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 267
target:
entity_id: light.living_room_strip
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-amber), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: orange
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 500
target:
entity_id: light.living_room_strip
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-orange), 0.2);
}
Here is a visualization to understand the sections of the card:
