My Light Card. I use this card inside my room cards. This is for all my lights in that room, this example is from my bedroom.
First picture is when it’s off.
The second picture is when turned on.
Third picture is when it’s expanded.
Light Card Code:
type: custom:vertical-stack-in-card
cards:
- type: picture-entity
image: >-
https://img.freepik.com/free-photo/pillow-bed_1203-9518.jpg?w=1800&t=st=1666202344~exp=1666202944~hmac=7531e58884b24b8d2b847a8d0b04e59005362e7fdad1fabbc3c7678247086a4a
entity: light.sovrum
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: light.sovrum
primary: Belysning
secondary: >
{% set room = expand(area_entities('sovrum')) |selectattr('domain',
'eq',
'light')|rejectattr('attributes.is_hue_group', 'true') |list %}{% set
on =
room |selectattr('state', 'eq', 'on')|list |count %}{% set all = room
|count %}{% if on |int(0) > 0 %}{{ on }}/{{ all }}{% else %} Släckt {%
endif %} {% if is_state('light.sovrum', 'on') %} Lampor är på
{%else%}
{% endif %}
icon: mdi:lightbulb-group
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_matrum_card
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_matrum_card
state: 'on'
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.taklampa_sovrum
primary: Taklampa
secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
icon: mdi:ceiling-light
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
entity: light.ledlist_2
primary: Ledlist
secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
icon: hue:gradient-lightstrip
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
entity: light.midesklamp1s_b9af
primary: Skrivbordslampa
secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
icon: hue:desk-lamp
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
entity: light.fonsterlampa
primary: Fönsterlampa
secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
icon: hue:floor-shade
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
entity: light.sanglampa_1
primary: Sänglampa 1
secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
icon: hue:wall-runner
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
entity: light.sanglampa_2
primary: Sänglampa 2
secondary: '{{ ''På'' if is_state(entity, ''on'') else ''Släckt'' }}'
icon: hue:wall-runner
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
card_mod: null
style: |
ha-card {
--ha-card-border-width: 0;
}
/Thekholm