HACS Room Card Examples

[BeardedTinker]

Here are current examples for my Room Cards:

Example #1

type: custom:room-card
title: Outside
entity: light.bar_light
icon: mdi:lightbulb-outline
show_icon: true
tap_action:
  action: toggle
entities:
  - entity: light.balcony_light
    icon: mdi:outdoor-lamp
    show_icon: true
    tap_action:
      action: toggle
  - entity: camera.ebroz920_terasa2
    name: Balcony
  - entity: camera.ebroz920_lift
    name: Elevator
  - entity: switch.mss620_d096_outlet2
info_entities:
  - sensor.balcony_humidity
  - sensor.balcony_pressure
  - sensor.balcony_temperature

Example #2

type: custom:room-card
title: Dining room
entity: group.bedroom_lights
icon: mdi:floor-lamp-outline
show_icon: true
tap_action:
  action: toggle
entities:
  - entity: light.left
    name: Left
    show_icon: true
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
  - entity: light.right
    name: Right
    show_icon: true
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
  - entity: light.bar_light
    name: Bar
    show_icon: true
    icon: mdi:desk-lamp
    tap_action:
      action: toggle
  - entity: light.rice_lights
    name: Rice
    show_icon: true
    icon: phu:light-strip
    tap_action:
      action: toggle
info_entities:
  - entity: sensor.tado_smart_thermostat_ru2262433792_current_temperature
cards:
  - type: custom:simple-thermostat
    entity: climate.dining_room
    show_states:
      - heat
    name: Thermostat
    title: Thermostat
    control:
      _headings: true
      _icons: true
      _names: true
      hvac:
        heat:
          icon: mdi:fire
          name: 'On'
        'off':
          icon: mdi:power
          name: 'Off'
    hide_if:
      conditions:
        - condition: equals
          value: 'on'

Example #3

type: custom:room-card
title: Living
entity: light.living_room_lights
tap_action:
  action: toggle
icon: mdi:lightbulb-outline
show_icon: true
entities:
  - entity: light.standing
    name: Sofa
    icon: mdi:floor-lamp
    tap_action:
      action: toggle
    show_icon: true
  - entity: light.corner
    name: Table
    icon: mdi:table-chair
    tap_action:
      action: toggle
    show_icon: true
  - entity: light.tv
    name: TV
    icon: mdi:television
    tap_action:
      action: toggle
    show_icon: true
  - entity: light.entrance
    name: Entrance
    icon: mdi:desk-lamp
    tap_action:
      action: toggle
    show_icon: true
  - entity: media_player.lg_tv
    name: LG
  - entity: media_player.google_tv
    name: Google
  - entity: climate.living_room
    name: Radiator
    tap_action:
      action: toggle
    hide_if:
      conditions:
        - condition: equals
          value: 'off'
  - entity: media_player.display_me
    show_icon: true
info_entities:
  - entity: binary_sensor.living_room_motion_occupancy
    show_icon: true
  - entity: media_player.display_me
    show_icon: true
    icon: phu:nest-hub
  - entity: binary_sensor.shelly_gas_10521cef4a01_gas
    show_icon: true
  - sensor.living_room_temperature
cards:
  - type: custom:mini-media-player
    entity: media_player.sonos_roam_sl
    show_states:
      - playing
  - type: custom:mini-media-player
    entity: media_player.sonos_roam_sl_2
    show_states:
      - playing
  - type: custom:mini-media-player
    entity: media_player.display_me
    show_icon: true
    show_states:
      - playing
      - paused
  - type: custom:simple-thermostat
    entity: climate.living_room
    name: Radiator
    title: Living room
    layout:
      step: row
    control: false
    header: false
    hide_if:
      conditions:
        - condition: equals
          value: 'off'

Example #5

type: custom:room-card
title: Loft
entity: light.stream_desk
icon: mdi:lightbulb-outline
show_icon: true
tap_action:
  action: toggle
entities:
  - entity: light.stream_desk
    name: Strip
    icon: mdi:desk
    tap_action:
      action: toggle
    show_icon: true
  - entity: light.ledge
    name: Ledge
    tap_action:
      action: toggle
  - entity: light.elgato_key_light_air_left
    name: Left
    icon: phu:elgato-key-light-air
    tap_action:
      action: toggle
    show_icon: true
  - entity: light.elgato_key_light_air_right
    name: Right
    icon: phu:elgato-key-light-air
    tap_action:
      action: toggle
    show_icon: true
  - entity: media_player.entertainment_room
    name: HomePod
    icon: phu:homepod-mini
    show_icon: true
  - entity: media_player.loft_echo_dot
    name: Echo
    icon: phu:echo-dot-gen-3
    show_icon: true
  - entity: media_player.loft
    name: Stick
info_entities:
  - sensor.living_room_motion_illuminance
  - sensor.bathroom_temperature
cards:
  - type: custom:mini-media-player
    entity: media_player.entertainment_room
    show_states:
      - playing
      - paused
  - type: custom:mini-media-player
    entity: media_player.loft_echo_dot
    show_states:
      - playing
      - paused
  - type: custom:mini-media-player
    entity: media_player.loft_tv
    show_states:
      - playing
      - paused
  - title: null
    type: glance
    entity: sensor.hp_deskjet_3520_series
    entities:
      - entity: sensor.hp_deskjet_3520_series_black_ink
        name: Black
      - entity: sensor.hp_deskjet_3520_series_cyan_ink
        name: Cyan
      - entity: sensor.hp_deskjet_3520_series_magenta_ink
        name: Magenta
      - entity: sensor.hp_deskjet_3520_series_yellow_ink
        name: Yellow
  - type: custom:simple-thermostat
    entity: climate.air_conditioning
    name: AC
    title: AirCondition
    layout:
      step: row
    control: false
    header: false

[Michthe]

Hi, i tried to make a card according your video, but it doesn´t works correctly. If i switch any light on, the icon doesn´t change the color. Is it because entity is "switch" and not "light" or did I something wrong. Many thanks for help.

[BeardedTinker]

Not sure, but it could be that. Did you try to create virtual light from switch and see if that helps? https://www.home-assistant.io/integrations/switch_as_x/

[Michthe]

Thank you for your reply. I tried it but it has no effect. This behavior is only on the room-card, on other tabs the icon changes its state. I will still look for some solutions. Thanks a lot for your videos, they are very inspiring and understandable even for beginners. I myself have HA only 2 weeks, but thanks to your videos I am moving very fast and the dashboards are getting nice and clear.

[mariusbtro]

Hi! You must use: state_color: true

[Michthe]

Hi! You must use: state_color: true

hi, it works, thank you so much.