My Room Card is really simple looking with little information (I want it simple). But I have a slider on it to turn on/off some products (fans, coffee machine, media etc).
Home Slider Code:
square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:swipe-card
parameters:
spaceBetween: 8
cards:
- type: custom:mushroom-template-card
primary: Vardagsrum
secondary: >-
{{ states('sensor.hue_motion_sensor_1_temperature') | round(0) }}
°C
icon: mdi:sofa
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
layout: horizontal
entity: light.vardagsrum
tap_action:
action: navigate
navigation_path: vardagsrum-page
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: |-
{% if is_state(config.entity, "playing") %}
mdi:speaker
{% else %}
mdi:speaker
{% endif%}
entity: media_player.bluesound_vardagsrum
icon_color: |-
{% if is_state(config.entity, "playing") %}
indigo
{% else %}
grey
{% endif%}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'playing') %}
background: rgba(var(--rgb-light-green),0.2);
{% else %}
background: rgba(var(--rgb-disabled),0.2);
{% endif %}
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: |-
{% if is_state(config.entity, "on") %}
mdi:power-socket-de
{% else %}
mdi:power-socket-de
{% endif%}
entity: switch.vardagsrumsfonster_switch
icon_color: |-
{% if is_state(config.entity, "on") %}
green
{% else %}
grey
{% endif%}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
background: rgba(var(--rgb-green),0.1);
{% else %}
background: rgba(var(--rgb-disabled),0.1);
{% endif %}
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:swipe-card
parameters:
spaceBetween: 8
cards:
- type: custom:mushroom-template-card
primary: TV Rum
secondary: '{{ states(''sensor.tv_wave_temperature'') | round(0) }} °C'
icon: mdi:television
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
layout: horizontal
entity: light.tv_rum
tap_action:
action: navigate
navigation_path: tvrum-page
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: |-
{% if is_state(config.entity, "playing") %}
mdi:speaker
{% else %}
mdi:speaker
{% endif%}
entity: media_player.bluesound_biorum
icon_color: |-
{% if is_state(config.entity, "playing") %}
indigo
{% else %}
grey
{% endif%}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'playing') %}
background: rgba(var(--rgb-indigo),0.2);
{% else %}
background: rgba(var(--rgb-disabled),0.2);
{% endif %}
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: |-
{% if is_state(config.entity, "on") %}
mdi:remote
{% else %}
mdi:remote
{% endif%}
entity: remote.harmony_hub
icon_color: |-
{% if is_state(config.entity, "on") %}
green
{% else %}
grey
{% endif%}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
background: rgba(var(--rgb-green),0.1);
{% else %}
background: rgba(var(--rgb-disabled),0.1);
{% endif %}
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
/Thekholm